Three.js: 機能のリクエスト：画面スペースの反射

ここでの私の唯一の懸念は、ステレオレンダリングではうまく機能しないことです。そのため、WebVRでは難しいでしょうが、この機能に反対しているとは思わないでください：）：+ 1：

VRでオフにするだけです。 コストのかかる効果の多くは、VRではうまく機能しません。 UE4は、速度を上げるためにVRコンテキストで延期するのではなく、フォワードレンダリングを使用することを提案しています。

まさに、それが私がそれに反対しない理由です。

リフレクションマッピングのReactNative実装に取り​​組んでいるときに、ここで偶然見つけました。画面スペースのリフレクションは、VR以外のゲームに最適です。

THREE.ReflectorはVRで動作します✌️
https://threejs.org/examples/webvr_sandbox.html

良い！

ナイトリーでも「VRが見つかりません」と表示されますが、チェックします。

私の特定の問題（OPではない）は、反射の問題を解決することではなく、three.jsネイティブオブジェクトを作成し、ReactVRの既存のシーンとレンダラー内でそれらをレンダリングする方法でした。 私はOKの結果を得ました、唯一のことは背景画像が少し奇妙だったので、反射は奇妙に見えます-しかしそれは予想通りです、ReactVRは背景パノラマのために裏返しの球を作成します。 キューブマップは試していませんが、うまくいくかもしれません。

私は本のページをめちゃくちゃにしているので、おそらく既存のデモをそのままにしておくつもりですが、これは素晴らしいテクニックのように見えます。

このタイプのエフェクトについてもっと知りたいと思っていたので、作曲家のエフェクトを作ってみました。 実行できる作業はまだいくつかありますが、Kode80の実装とMorgan McGuireのブログ投稿に基づいてまとめたものを次に示します（スポンジシーンの読み込みには少し時間がかかります）。

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

次に行うことのいくつかは、ジッターアーティファクト、光沢のある反射（ブラーパスまたはミップマップサンプリング+デプスマップピラミッドを使用）、および時間的再投影による複数のバウンスをクリーンアップすることです。

誰かが実際にこの効果の使用に興味を持っているなら、私は誰かと協力してこれをもう少し磨くことができれば幸いです！

@gkjohnsonスウィート。 ただし、シーンが複雑すぎる可能性があります。 いずれにせよ、あなたのデモはほとんど反応しないようです。 もっと簡単な例を作成できますか？ また、オン/オフの切り替えがいいでしょう。

@WestLangley

あなたのデモはほとんど反応しないようです

デモを見ることができますか？ 接続によってはSponzaシーンのダウンロードに少し時間がかかるため、画面が数秒間真っ暗になる場合があります。

まったく機能しない場合は、もっと簡単なものを作成することを検討できます。ただし、Pixel2では機能します。

オンオフトグルがいいでしょう。

「強度」スライダーを0まで下げると、オフにするのと同じように見えますが、レイトレーシングはまだ行われているため、その場合はパフォーマンスに違いはありません。

@gkjohnson了解しました。 私のMacでは、デモはしばらくの間黒くなり、その後フレームレートは4になります。

@WestLangleyこれは解像度に非常に依存する効果なので、ウィンドウを小さくするとフレームレートが上がる可能性があります。 より低い解像度でレイトレーシングを実行してから、フル解像度のバッファーで合成すると、効果がよりスケーラブルになりますが、最適化するのに時間がかかりませんでした。

@gkjohnson反射面のみにマスクするにはどうすればよいですか？ 強度を上げると、すべてが反射し始め、かなり耳障りなアーティファクトがいくつかあります。

@bicubic現時点では、サーフェス属性は考慮されていませんが、その基本バージョンを追加するのはそれほど難しいことではありません。 マテリアルの鏡面反射光/粗さ属性に基づいて、効果をフェードまたはぼかします。

残念ながら、現時点ではエフェクトを使用できないため、これらの他の機能を追加するために邪魔をすることはありません。 でも、さっきも言ったように、何かに使ってみたいと思ったら、コラボして効果を完成させてあげたいです！

マテリアルの鏡面反射光/粗さ属性に基づいて、効果をフェードまたはぼかします。

オブジェクトを反射/非反射として指定できると便利です。 現時点では、カーテンや植物など、すべてが反射しています。 理想的には、このデモでは床だけが反射する必要があります。

@looeee私はそれが私が言っていることに同意します-私が不明確だった場合は申し訳ありません。 マテリアル属性は、画面スペースでサンプリングし、特定のピクセルでの反射をフェードまたはブラーするために使用できるように、ターゲットに書き込む必要があります。 これにより、粗さマップなどが反射にも影響を与える可能性があります。

これがthree.jsのデフォルト機能の一部になることを望んでいます。

遅延レンダラーアーキテクチャもデフォルトのオファリングの一部になるべきかどうか疑問に思うようなものがたくさんあります。 特にwebgl2.0の場合

@gkjohnsonはそれを

@bicubic
専用の遅延レンダリングパスも表示したいということに同意します。 WebGL2と複数のレンダリングテクスチャを使用すると、はるかに実行可能になります。

@looee
必要な効果によって異なりますが、私が説明したアプローチでは、レンダリングされた粗さの値は、「このピクセルで反射をレンダリングしない」を意味する粗さの値1と「完全にレンダリングする」を意味する値0のシーンのマスクとして効果的に動作します。このピクセルでの反射」。 中間の値は、部分的な強度で反射をレンダリングします。 デモのintensityスライダーは効果を示しています（ただし、ピクセルごとではなく、明らかにシーン全体に対して）。

別のアプローチは、粗さの値に基づいて反射されたピクセルをぼかして、光を反射する拡散表面をエミュレートすることです。 したがって、ドレープには、鋭いものではなく、まだいくつかの反射があります。 これにより、たとえば、明るく照らされた青い床でドレープを照らすことができます。

粗さの値1は「このピクセルで反射をレンダリングしない」ことを意味し、値0は「このピクセルで完全な反射をレンダリングする」ことを意味します。

このようにうまくいくようです。 Unrealは「最大粗さ」パラメータを

おっとっと

@gkjohnson
これは非常に興味深いものであり、私はあなたの結果が大好きです。現在WebGL2 / MRTレンダラーに統合しており、実験していきます。 レンダリング呼び出しごとにマテリアルを作成していることに気づきましたか？
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestarありがとう！ そして、私はそれに気づいていませんでした！ しかし、私が言ったように、まだやるべきクリーンアップが少しあると思いますし、パフォーマンスはおそらくそれが非常に使いやすい時点ではまだ十分ではありません。

これらのタイプのエフェクトは、とにかく（おそらく作業中のように）フォワードよりもディファードレンダラーに非常に適しています。 私はこれと他のいくつかの高品質のエフェクトをまとめたいと思っていましたが、適切な遅延レンダラーが利用可能になるまで待ってから、さらに多くの時間を費やす傾向があります。 作業中の遅延/ MRTレンダラーはGithubで利用できますか？

これを統合しましたが、SSRは出力を低解像度のRTに渡しますが、基本的には反射のみを渡し、深度ブラーを使用してメイン画像と組み合わせてエラーを削除/削減します。 粗さの値を属性RTにレンダリングし、それを再度使用してブラーの強度を決定します。1は非表示で、フラグメントを破棄します。

ぼかしは、距離が強くなるエラーも取り除きます。 1つの問題はまだ透明性であり、オブジェクトが他のオブジェクトを部分的に覆い、他の反射をクリップさせているようです。 私は本当にテクニックについてもっと読む必要があります。

THREEのコンポジターを使用せずに、THREEの上部にあるカスタムエンジンで使用しています。 THREEは実際に現在のWebGLRendererでWebGL2コンテキストを使用する準備ができています。そこにMRTを追加しました。 すぐにgithubに載せます。 それでも、背面の深度バッファ用にシーンを2回レンダリングする必要がありますが、それほど高価ではありません。

@Fyrestar
何かニュースはありますか？

私は自分で作成してthree.jsへのPRを作成しましたが、現在はOrthographicCameraをサポートしているだけで、PerspectiveCameraをサポートしようとしています。
デモDEMO2

PerspectiveCameraのサポートはOKになりました。 https://github.com/mrdoob/three.js/pull/20156

デモ

これは美しく、かなりの成果です。 私のマシンでは非常に遅いです-1920x1080で5fpsを取得します。 実装とSketchfabの実装の違いは何ですか？ 私たちがあなたのものを最適化する方法を知っているだろう別のことを知っていたら、私は思う。

@bhoustonありがとう！

現在、シーン内のすべてが反射的ですが、ほとんどの実際のプロジェクトでは必要ありません。
IntensityMapプロパティのようなものを追加するか、既存のRoughness Metalness情報を距離減衰と組み合わせて使用​​し、値が0のピクセルで計算を直接終了します。これにより、fpsが大幅に向上すると思います。
反射ピクセルの一部をランダムに選択することもあります。

Sketchfabのコードを表示しようとしましたが、失敗しました。 もう一度やり直しますが、あまり希望はありません。 誰かがSketchfabのコードを持っているなら、共有してください、ありがとう！

- - - 編集 - - -
さらに、Sketchfabのプレゼンテーションウィンドウはデフォルトではフルスクリーンではなく、操作がない場合はレンダリングを停止します。
フルスクリーンで回転し続けると、単純なシーンでもGPUの使用率が高くなります。

@gonnavisこの例のシェーダーコードは、Spector.jsChrome拡張機能を介して表示できる必要があります。

Sketchfabで遊んでいるだけで、SSRの解像度がシフトして洗練されていることがわかります。 彼らが徐々にジャンプしている3から5の品質レベルであるならば、私は驚かないでしょう。 これにより、インタラクティブなフレームレートが確保されますが、静的な場合は完全に洗練されます。

これにより、インタラクティブなフレームレートが確保されますが、静的な場合は完全に洗練されます。

欠点は、カメラの動きが止まり、品質レベルが切り替わると、目立ったジャンプが発生することです。 いくつかのシーンでは他のシーンよりも明白です。 これは非常に明白なものです。

編集：彼らは単なる反射以上のものでそれを行います-それは光、影、反射、そして多分テクスチャ解像度が徐々に強化されているようです。 このシーンの後ろの壁の光/影を

上記のSSRRを試していたとき、ここでMorgan Mcguireの記事をかなり参照しまし

具体的には、ピクセルストライドを増やすことができるため、サンプリングされるピクセルピクセルが少なくなり、ピクセルごとの通常のジッターと組み合わせることができるため、兄弟ピクセルはステッピング中に異なる深度サンプルを「スキップ」します。 光線のストライドが十分に高い場合は、深度バッファで何かが交差したら、最後にバイナリ検索を追加して、光線が最初に当たるピクセルを見つけることができます。 反射しないフラグメントを早期に返すことは、@ gonnavisですでに述べたようにおそらく役立つでしょう。

また、低解像度のレイマーチの奥行きと法線を意識したアップスケールを試しましたが、見た目に満足できるところまでは到達しませんでした。 ゲームでのこのテクニックは、利用可能な解像度が2で割り切れることが多いという事実からかなり大きな恩恵を受けることができると思います。これにより、高級感がより簡単になります。

ただし、Sketchfabが反射距離に基づいてぼやける粗い反射をどのように処理しているかについては興味があります。 Godot Engineは、光線の距離と表面の粗さに基づいた半径でブラーを実行するのを見てきましたが、その結果、ここで見ているようなアーティファクトが発生することはありません。 機会があれば、Spector.jsをいじくり回す必要があります（@WestLangleyのヒントに感謝します！）。 @bhoustonが投稿したFrostbiteの論文は、レイマーチングの際に深度ピラミッドを使用することを最初に提案していますが、それを生成することはwebgl1（そしておそらく2？）で苦痛になる可能性があります。

よさそうだ@gonnavis！ それが図書館に入るかもしれないのを見てうれしいです。

@WestLangleyありがとう！ しかし、SketchfabでSpector.jsを使用すると、「glコマンドのあるフレームが検出されません。カメラを動かしてみてください」というメッセージが表示されます。 エラー。

前に述べたようにSSRPassが最適化された後でも、Sketchfabのパフォーマンスが大幅に向上するかどうかは疑問です。 特に、 @ bhouston @looeeeが述べたように、継続的なレンダリングとダウングレード戦略がない場合。 実装の詳細について話さなければ、このSSRPassのコアコンセプトはすでに最適なソリューションであるかもしれないと私は思います。

@gkjohnson情報とサポートをありがとう！ 私は改善し続けます。

@gonnavis

Safariの[グラフィック]タブをお勧めします。

Linuxを使用している場合は、Epiphany（別名Gnome Web）を使用できます。
https://webkit.org/downloads/

しかし、Windows用のWebKitビルドはないと思います...

@mrdoobありがとう！ 私は主にWindowsを使用していますが、必要に応じてMacで試してみます。

しかし、glsl関数などの便利なものが見つかった場合、Sketchfabのコードをオープンソースライブラリにアップロードできるかどうか疑問に思っていますか？

このSSRPassの構造はthree.jsSSAOPassに基づいており、デモシーンではthree.js webgl_shading_physicalの例を使用し、キーpointToLineDistance関数はwolfram.comから

ありがとう！ しかし、SketchfabでSpector.jsを使用すると、「glコマンドのあるフレームが検出されません。カメラを動かしてみてください」というメッセージが表示されます。 エラー。

マウスをスクロールしてカメラをズームします。 Spectorをトリガーするにはそれで十分です。

また、レンダリングループを必要としない静的シーンを例で使用します。 現在、フレームレートが低すぎて許容できません。

@WestLangleyこのシーンで成功しました、ありがとう！

Sketchfabのコードを投稿しないでください。 私は単に私たちが理解していることを示唆していました
彼らの技術。 彼らのコードを共有せずにこれを行うことができます。 あなたも
彼らのコードから何もコピーすることはできません、それは著作権に反するでしょう。

火、2020年8月25日に6:21で可視[email protected]書きました：

@WestLangleyhttps ：//github.com/WestLangleyこのシーンで成功しました
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 、
ありがとう！

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 、
または購読を解除する
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
。

-
ベンヒューストン、CTO
M ：+ 1-613-762-4113
[email protected]
カナダ、オタワ
ThreeKit Visualization Platform：3D、2D、AR、VR
http：//https//threekit.com/

@bhouston OK、必要な場合にのみ参照してください。

インスピレーションを受けた後、他の人の論文やコードを見続けることは、特に異なる環境にいるときは、自分で書くよりも難しいと感じることさえよくあります。

たとえば、今回は主にこの小屋に触発されましたが、最初のテキストの意味を明確に理解することは難しく、彼が使用する座標系が異なるため、の実行方法がわかりません。 cxxファイルなので、私はほんの少しのテキストを読むだけで、コードはほとんど読みません。 二つの絵、最終的にはそうIMGA imgB私のほとんどを助けました。

いくつかのデモを追加します。

Demo、 Demo2、 Demo3、 SelectiveDemo、 OrthographicDemo。

@gonnavisに触発されて、私はついに数年前に投稿したSSR実装でいくつかの新しいことを試すことに

新機能のいくつか：

• ブルーノイズレイジッターをサポートしているため、交差パターンの規則性が低くなります。
• 詳細を保持するための、低解像度のマーチテクスチャからの深さと法線加重のアップスケール/ブラー。
• ジッタのあるサンプルとミップマップを使用して光沢のある反射をレンダリングするための、いくつかの微調整されたアプローチ。
• 法線マップとアルファマップのサポート。

これはかなり集中的な効果ですが、反射のアップスケーリング、ブラー、ジッター、およびステップ数の少なさを組み合わせることで、フルウィンドウアプリではなく小さな埋め込みキャンバスで特にうまく機能する可能性があるように感じます。 https://github.com/mrdoob/three.js/issues/14048で説明されているように、複数のフレームにわたって最終的な画像を解決することで、まともな光沢のある反射も得られる可能性があります。 もちろん、他の場所で言及されているように、拡散などの個別のパスがないと、反射はまだ実際には正しくありませんが、改善すべきことが常にあります。

ステップ数が多いスクリーンショットを次に示します。

| 光沢なし| マルチサンプル光沢| 深さ階層の光沢|
| --- | --- | --- |
| | | |

そして、これがデモです：

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Siggraph 2015には、「確率的画面-空間反射」に関するスライドがあります。http ：