[Three.js] WebGLRenderTargetを使ってオフスクリーンレンダリング #JavaScript

Three.jsは色々なものをすぐに利用できるよう設計されています。
オフスクリーンレンダリングも例外ではなく、THREE.WebGLRenderTaregetクラスを利用することで簡単にオフスクリーンレンダリングを行うことができます。

コード

具体的には以下のようにセットアップし、それをテクスチャとして指定してやることで簡単にオフスクリーンレンダリングの結果をオンスクリーンで表示することができます。

Render targetを作る

webgl-render-target

var width = 100, height = 100;
var renderTarget = new THREE.WebGLRenderTarget(width, height, {
    magFilter: THREE.NearestFilter,
    minFilter: THREE.NearestFilter,
    wrapS: THREE.ClampToEdgeWrapping,
    wrapT: THREE.ClampToEdgeWrapping
});

render targetの作り方は非常に簡単。

Render targetをテクスチャにする

通常のテクスチャと同様に、マテリアルのmapに、生成したrender targetオブジェクトを渡してやるだけで、あとはそれをテクスチャとしてレンダリングしてくれるようになります。

setup-render-target-as-texture

var planeGeo = new THREE.PlaneGeometry(200, 200, 10, 10);
var planeMat = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    map: renderTarget,
    side: THREE.DoubleSide
});

Render targetにレンダリングする

さて、上記まででセットアップが終わりました。
が、これだけではなにも画面には出力されません。
当然ですが、生成したrender targetに対してなにも、レンダリングする命令をしていないからです。

ただ、これも非常に簡単で、単純にレンダラーのrenderメソッドの第三引数に、生成したrender targetを指定してやれば、あとは勝手にオフスクリーンレンダリングを行ってくれます。非常に手軽ですね。
（自分でこれをやろうとすると、フレームバッファのバインド切り替えやテクスチャのバインド切り替えなど、だいぶ手間がかかります）

render-in-offscreen

renderer.render(subScene, subCamera, renderTarget);

ちなみに、オフスクリーンレンダリングする場合はメインのシーンではないなにかをレンダリングするはずなので、渡される第一、第二引数は、オフスクリーンレンダリングを行いたいシーンとカメラを指定してレンダリングすることがほとんとでしょう。

あとは、これをレンダリングループ内でupdateしてやればオフスクリーンレンダリングされたものをテクスチャとして画面にレンダリングしてくれます。