displacement.mapによって置き換えられた修正されたメッシュをthree.jsで置き換えます

Question

私は戻って、displacementMapによって置き換えられているメッシュをエクスポートしようとしています。

シェーダが（ three.js/SRC /レンダラー/シェーダー/ ShaderChunk/displacementmap_vertex.glslから）このラインに従って頂点変換される：

transformed += normalize(objectNormal) * (texture2D(displacementMap, uv).x * displacementScale + displacementBias); 

これは、displacementMapに従って頂点を変位さその頂点のuv座標と混合されます。

このメッシュ/ジオメトリを作成して、後でエクスポートできるようにしようとしています。

私はここでの問題の「デモ」を作成しました： Github Page 私はexportSTLを押すと上の、ビューポートに見られるように変位は、メッシュたいと思います。しかし、私は未配置の飛行機しか手に入れていません。

私はこれがなぜ起こるのか理解しています。変位はシェーダでのみ起こり、実際には平面のジオメトリを直接変位させるわけではありません。

three.jsで提供されているメソッドが見つかりませんでしたが、これまでシェーダから変更を取得する方法が見つかりませんでした。 私は "demo.js"の関数でそれをやろうとしています。 しかし、私はWebGL/three.jsの初心者であり、シェイダーが何をしているのかを再現するのに問題があります。

私は輸出業者がmorphTargetを扱っているのを発見しましたが、これは助けにはなりません。 this questionを読んだ後、Shaneerに近いのでPlaneBufferGeometryを試しましたが、これは私にとっては同じ結果をもたらします。 私はthis questionはもともと同様のものを作り出そうとしましたが、無関係な質問を受け入れました。

最後に、リアルタイムでテクスチャを更新するHTMLキャンバスを描画したいと思います（私はこの部分が動作しています）。ユーザーは、3次元印刷のためにメッシュをエクスポートすることができます。

シェイダーの変更されたジオメトリを私に与える方法はありますか？ 誰かがシェイダーラインを "従来の" Three.js関数に変換するのを助けることができますか？ これは、完全に間違った方法で、移動したメッシュを取得するのでしょうか？

更新 - 例は、もともとimersoにより示唆されるように、私は今、CPUの変位を計算することができDeeFisherから例に

感謝を進めています。 今すぐGithub Pageをクリックすると、実際の例が得られます。 現時点で私は最後に正しいキャンバスを得るためにキャンバスを鏡にしなければならない理由を完全に理解していませんが、これは最悪の場合です。

Answer 1

変位のためにシェーダーを使用している間にこれを行うには、WebGL2に切り替えてTransform-Feedback（Google検索：WebGL2 Transform-Feedback）を使用する必要があります。

テクスチャをCPUに読み戻し、CPUのみを使用して頂点を移動しながらスキャンする方法もあります（Google検索：WebGL readPixels）。

両方の選択肢には多少の努力が必要なため、現時点ではコードサンプルはありません。 =）

Answer 2

BABYLON.jsはTHREE.jsと組み合わせて使用​​することができ、変位マップを適用する場合、それはあなたが実際のメッシュの頂点を変位させることができ：

var sphere = BABYLON.Mesh.CreateSphere("Sphere", 64, 10, scene, true); 
sphere.applyDisplacementMap(url, minHeight, maxHeight, onSuccess, uvOffset, uvScale) 

は、使用here関数の例を参照してください。

次に、forを使用して、BABYLONメッシュデータを3つのメッシュオブジェクトにループ転送することができます。