three.js - 平らなthree.js面に2D形状を描画できますか？

Question

ある種の3Dマップのテストを試してみたいと思います。最も単純なのは、マップラインなどが描画された1つのフラットペインで、フラットです（HTMLキャンバスに描画しているかのように）。しかし、私はそのペインを3D空間で移動できるようにしたいのです。

three.jsで非常に簡単にフラットペインを作成できることは知っていますが、このペインにプログラムで描画できるような「カスタムテクスチャ」を実装することは可能ですか？

Answer 1

これは、webGLではテクスチャへのレンダリングと呼ばれます。

Three.jsは、さらなるテクスチャの画像ソースとして使用できるWebGLRenderTargetを提供します。シーンをメインのWebGL画面ではなくWebGLRenderTargetにレンダリングします。次に、このWebGLRenderTargetをテクスチャの画像ソースとして使用します。

多くの2D後処理はこのように機能します。ワールドを2Dテクスチャにレンダリングし、フラグメントシェーダーを使用して、ぼかしなどのピクセルごとの後処理コードを適用します。

例については、たとえばhttp://mrdoob.github.com/three.js/examples/webgl_postprocessing.htmlを参照してください。

2D後処理のシーンをレンダリングしますが、理論は同じです。

WebGLRenderTargetセットアップコードは次のとおりです。

https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js#L14