WebGLとthree.jsを使って適切な反射と影でレンダリングする（フォトリアリスティック）

Question

私はすでに3ds maxを使って作成したシーンをレンダリングしようとしていました。私はすべてのオブジェクトをobjファイルとしてエクスポートし、ブラウザでシーンをレンダリングするためにthree.jsライブラリを使用しました。反射のために、私はCubecameraメソッドを使用してみましたが、期待される結果が得られません。シャドウについては、シャドウマップを試しましたが、私はそれらを正しく使用していないと思います。私は、three.jsとWebGlだけを使用したいものを何でもすることが可能かどうかを知りたいと思います。はいの場合、誰かに教えてください。また、3ds maxソフトウェアではMental rayレンダラーを使用して、反射や影が簡単に生成されることがわかりました。それで、簡単にやり遂げるのに役立つthree.jsに類似のレンダリングテクニックがありますか？

これは、私は残念ながらお答えすることは非常に大きな問題であるとリアルタイムの反射を行うための多くの方法がある

Answer 1

を望むものに似ています。 Mental Rayが反射を計算する方法は、WebGL（またはOpenGL）を使用してリアルタイムで行う方法とはまったく異なります。

最も簡単な方法は、シーンを上下反転させて（反射面の平面に沿って）初めてシーンを2回レンダリングすることです。これは（反射が進む限り）非常に単純ですが、あなたを1つの反射面に制限します。あなたのイメージを与え、唯一の反射面が床のように見えること。それが最善の選択かもしれない。

ミラーリングされたシーンをテクスチャにレンダリングして、パイプラインで後で操作できるようにすることもできます（たとえば、水を見るように画像を歪ませる場合など）。または、さまざまなプレーンの周りに複数の反射を実行します。レンダリングコストは、劇的に増加する可能性があります。

元の投稿に記載されているように、事前レンダリングされたキューブマップを使用できます。このシーンには複数のものが必要かもしれませんが。各キューブマップをキャプチャする場所を示すポイントをシーンに配置する典型的には、メモリ使用量を低く抑えるために、これらは比較的低品質である。

第3の選択肢は、機能するが、解決するための独自の問題（ディスプレイの端）があるスクリーンスペースリフレクションマッピング（合理的な紹介はhttp://roar11.com/2015/07/screen-space-glossy-reflections/です）です。通常、フルゲームエンジン（Unreal Engine、https://docs.unrealengine.com/latest/INT/Resources/Showcases/Reflections/など）でこれらのすべてを見つけることができます。