2011年10月31日月曜日

Three.jsでFloatingBufferを使う方法

思い立ってThree.jsをいじってます。

WebGLRendererのrenderメソッドの第三引数には実はrederer.render(scene, camera, target)のようにレンダリングターゲットを指定できます。
レンダリングターゲットはTHREE.WebGLRenderTargetです。
 width, heightの後にオプションを指定できます。
 オプションはオブジェクトで渡すのですがtypeにTHREE.FloatTypeを渡してやるとFloatBufferになります。
 また、デフォルトではリニアフィルタがかかるので必要に応じてニアレストネイバーにします。

これでだいたいうまくいったのですが、実際レンダリングしてみるとNVALID FRAMEBUFFER OPERATIONというエラーがでました。 
どうやらgetExtensionしてやる必要があるようで、レンダラから呼び出してやります。

    var renderer = new THREE.WebGLRenderer();
    if (!renderer.context.getExtension("OES_texture_float")) {
      throw "Requires OES_texture_float extension";
    }
    var renderTarget = new THREE.WebGLRenderTarget(256, 256, {
      type: THREE.FloatType,
      magFilter: THREE.NearestFilter,
      minFilter: THREE.NearestFilter
    });

0 件のコメント:

コメントを投稿