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
    });

2011年10月27日木曜日

第22回HTML5とか勉強会で発表してきました

こんばんはー、にゃまだんです。

第22回HTML5とか勉強会でWebGLについて発表してきました。

発表資料はこちら
・右キーでスライドを進めて、左キーでスライドを戻します。
・W, A, S, Dキーを押しながらドラッグしても何かしらのアクションが起きると思います。

以前から勉強会の存在は知っていて、第21回はUstreamで視聴しました。
そして初参加がまさか発表とは本当に驚きました、私が。