three.jsでクッキーを使ってプロジェクターを実装するには？

Question

これは私がUnity5で比較的簡単に作業できるようにした効果です。私は同じことをthree.jsでどうやってやり遂げることができるのだろうかと思っています。

曲がりくねって、私は曲面に特定の形（「小惑星の船」または三角形）を投影しています。主な技術は、プロジェクタライトとスクリーンの間に「クッキー」（専門用語はcucoloris）を挿入し、その形状を（通常は湾曲した）サーフェスに投影することです。私は、詳細ではなく開始する場所にいくつかの一般的なガイドラインを探しています

：

は、百聞は一見にしかずですので、ここでは団結5からのシーンのスクリーン印刷です説明。たとえば、ProjectorとRayCasterが表示されます。これらのどちらが機能するのでしょうか？残念ながら、「クッキー」という用語には他の意味がありますので、「3つのクッキー」の検索で関連する参考文献は見つかりません。

クッキー自体は、以下のスクリーン印刷のように、ユニティにテクスチャとしてみなされる示す：

任意のアドバイスを大幅に理解されるであろう。

多くのありがとうございます。

Answer 1

three.jsでクッキーを使用する方法を決して理解することはできませんでしたが、私は最終的にoff-screen renderingを使ってはるかに良い解決策を思いつきました。このメソッドは一般的にCookieの使用法に代わるものではありませんが、Cookieを使用して不規則な形状のターゲットサーフェスにシェイプを投影しようとする場合は、投影シーンをオフスクリーンバッファにレンダリングしてからそれを動的テクスチャとしてターゲットオブジェクトのサーフェスに適用します。ここで

は私がやったことを実証するのスクリーンショットです：下部にある

、私は（あなたがはないを表示しなければならないの私は、ソースシーンをレンダリングオフスクリーンバッファの内容を示すのですこのバッファー、私は説明のためにそれを示しています）。それは単なる平面です。私はそのシーンについてオブジェクトを単純な線形の形で動かします。ではなく、はターゲットジオメトリの曲率を考慮する必要があります。基本的にはこれを「ラッピング紙」と考えることができます。

そしてこの場合には、画面の上部の緑色シリンダである、対象物にテクスチャとしてこのバッファを割り当てる：

this.cylMaterial = new THREE.MeshBasicMaterial() 

this.bufferGamePlaneTexture = new THREE.WebGLRenderTarget(
    window.innerWidth, 
    window.innerHeight, 
    {minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter} 
) 
... 
this.cylMaterial.map = this.bufferGamePlaneTexture.texture 

var projCylGeom = new THREE.CylinderGeometry(3, 3, 12, 50) 

this.projCyl = new THREE.Mesh(projCylGeom, this.cylMaterial) 
... 
//render to offscreen buffer in your animation loop 
bufferRenderer.render(
    this.bufferGamePlaneScene, 
    this.bufferSceneCamera, 
    this.bufferGamePlaneTexture 
) 

あなたが見ることができるように、ソース形状が終わります形状がターゲット面に直接描画されているかのように、必要に応じてターゲットジオメトリと曲線に合うように成形されます。

実際には、前に生成したカスタム生成の「ギフト包装紙」でターゲットオブジェクトをラッピングしています。ゲームエンジンは必要な変換をすべて処理するので、ターゲットジオメトリとは独立した簡単な「線形」セマンティクスでソースシーンをレンダリングできます。また、ソースシーンのロジックを変更することなく、別のサーフェス（たとえば球）に簡単に適用することもできます。