/ ping @abelnationは、現在常駐しているArea Lightのエキスパートであるため、何かアイデアがあれば。 :)

エリアライトコードをリファクタリングしましたが、これにも精通しています。 シャドウのサポートについては、 https：//eheitzresearch.wordpress.com/705-2/を参照してください。

シャドウのサポートについては、 https：//eheitzresearch.wordpress.com/705-2/を参照してください。

面白い。 レイトレーシングはハードウェアで高速化されていると想定しているため、現時点ではWebGLには少し計算量が多すぎると思います。 残念ながら、それがWebGLにもたらされるのはおそらく何年も前のことです。

私の2つの提案（ポイントライトシャドウまたはスポットライトシャドウ）は、ソフトシャドウに関しては物理的に正確ではありませんが、シャドウなしよりも優れており、両方とも非常に高速です（少なくとも他のシャドウと同じくらい高速です）。実装が簡単です（コードはすでに存在するため）。

@bhoustonああ、そうです... https://github.com/mrdoob/three.js/pull/13057もあります。

議論全体を読んだ場合、コンセンサスは「cookie」サポートをSpotLightに追加することであったと思います。これにより、おそらく長方形の影が可能になります。

NVidiaのPercentageCloserSoft Shadowsは、エリアライトシャドウを近似する適切な役割を果たします。 私はここでTHREE.jsシーンにそれらをハッキングすることをいじっていました： https：//gkjohnson.github.io/threejs-sandbox/pcss/index.html。 現在、指向性ライトシャドウマップを使用していますが、spotLightの方が適している可能性があります。

ただし、これらは完全なソリューションではありません。シャドウエッジが互いに近づくとアーティファクトが発生し、非常に滑らかなシャドウを取得するには多くのサンプルが必要になります。

素晴らしく見える！ しかし、あなたのデモは私のiMacではたった6FPSで実行されます^^

GTX970mで60fpsを取得しています。

Pixelで1FPS😢

私とoreshantがthree.jsにすでにpcss実装を持っています
しばらく前に書いた。

よろしくお願いします、
ベンヒューストン
http://Clara.ioオンライン3Dモデリングとレンダリング

2018年7月21日（土）午後11時2分[email protected]
書きました：

NVidiaのパーセンテージより近いソフトシャドウ
http://developer.download.nvidia.com/shaderlibrary/docs/shadow_PCSS.pdf
エリアライトシャドウを近似する適切な仕事をします。 私はいじっていた
ここでTHREE.jsシーンにそれらをハッキングします：
https://gkjohnson.github.io/threejs-sandbox/pcss/index.html。 それは使用しています
現時点では、指向性ライトシャドウマップですが、spotLightのシャドウマップは
より良い。

ただし、これらは完全なソリューションではありません。
シャドウエッジは互いに近づき、取得するには多くのサンプルが必要になります
本当に滑らかな影。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/mrdoob/three.js/issues/14161#issuecomment-406837539 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAj6_RuFJPv7y5DbEfJnDu26DB3cD2bhks5uI-tJgaJpZM4UQODd
。

私とoreshantがしばらく前に書いたthree.jsにはすでにpcssの実装があります。

https://threejs.org/examples/#webgl_shadowmap_pcss

これは私のiMacで素晴らしい60FPSで動作します^^。

私とoreshantがしばらく前に書いたthree.jsにはすでにpcssの実装があります。

見たことがなかった！ よさそうだ。 その方法でポアソンディスクのような値を生成できるとは知りませんでした。これは、私が使用していた方法よりも分布が良く、より良い結果が得られるようです。 よろしければ借りてもいいですよ！

Pixelで1FPS😢

ハ！ それは私の電話でも機能していませんでした。 私はそれをまったく最適化しませんでした、そして、移動することができるループで進行中の多くの仕事があります。

ただし、 @bhoustonの実装はかなり高速です。 たぶん、エリアライトシャドウに使用できるこれのいくつかのバリエーションがありますか？ このタイプの実装をより簡単にプラグインできるように、エリアライトに任意の種類のシャドウサポートがあると便利です。

NVidiaのPercentageCloserSoft Shadowsは、エリアライトシャドウを近似する適切な役割を果たします。 私はここでTHREE.jsシーンにそれらをハッキングすることをいじっていました： https：//gkjohnson.github.io/threejs-sandbox/pcss/index.html。 現在、指向性ライトシャドウマップを使用していますが、spotLightの方が適している可能性があります。

ただし、これらは完全なソリューションではありません。シャドウエッジが互いに近づくとアーティファクトが発生し、非常に滑らかなシャドウを取得するには多くのサンプルが必要になります。

良い！ 完璧ではありませんが、影がないよりは見栄えがします... Asus ROGPhone2で30fpsを取得します。
そして、私の統合グラフィックスラップトップでは45fpsです。

これは、three.jsのレイトレーシングされたシャドウの例です。これらのビデオでは、シャドウコンポーネントのみが表示されています。

ピクセルごとに1つのシャドウサンプルを使用した60+fps ...スマートフィルタリングを使用すると、結果はかなり良好に見える可能性があります。

https://youtu.be/O21mKUtMtSg
https://youtu.be/2Tn93hf9kNw

これは、長方形のエリアライトシャドウを支援するために使用できます。

ライブWebデモが進行中です。

関連している

13908シャドウの改善

14048光源サンプリングによるソフトシャドウ

14051Three.JSでプログレッシブフォトリアリスティックグローバルイルミネーションを採用

非常に素晴らしい！

関連する問題：現在のIBLコードである種のシャドウを実装する方法がわかりません。

車の例にDirectLightを追加したいが、実際の光源を無視し、シャドウマップのみを使用してIBLコードに影響を与えるとします。

私はいくつかのレイトレース効果で遊んでいます。

• 影-直射日光を含む直接光源から
• アンビエントオクルージョン
• グローバルイルミネーション

3つのうち、IBLで動作するピクセルごとのGIは、リアルタイムのフレームレートを達成するのが最も難しいと思います。

ただし、頂点ごとのGIであり、良好なフレームレートで可能である可能性があります。 レイトレーシングコードは、頂点シェーダーとフラグメントシェーダーが使用できるようになるという考えで書かれています。

@ mrdoob 、 @ WestLangley 、
ユニフォーム「pointLights[]。position」はどのスペースにありますか？
ワールドスペースでレイトレーシングを行っていますが、影が一致していないようです。

調べてみると...モデルビュー空間にあるようです...世界空間で光の位置を取得する良い方法はありますか？

WebGLRenderを変更して、ワールドスペースとビュースペースの両方で送信しますか？

さて、私はそれをポイントライトで動作させました...今度は長方形のエリアライトをテストします！

放出ボリューム内の光源をジッターする方法はありますか？
32のレンダリングのようなものでソフトシャドウを取得するために蓄積します
あなたはただ蓄積しますか？

私はこれをサブピクセルカメラのジッターでうまく機能するものと見ています
TAAThree.jsの例で蓄積したものです。

2019年12月21日土曜日午後10時4分サミュエルシルベスター[email protected]
書きました：

さて、私はそれをポイントライトで動作させました...今度は長方形のエリアライトをテストします！

【画像：画像】
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png

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

-

ベンヒューストンCTO
* M：* + 1-613-762-4113
[email protected]
オンタリオ州オタワ

[画像：threekitlogo1568384278.png] https://www.threekit.com/
Threekitでより良いビジュアルカスタマーエクスペリエンスを作成する
https://www.threekit.com/

[画像：成長するビジネスに合わせて製品のビジュアルを拡大する方法を学ぶ]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

明確にするために、私は、長方形の光でジッターする方法は、単一のものを持つことだと思います
放出面に沿って移動するポイントライト。 あなたは良いものが必要です
ポアソンディスクなどのサンプリング方法、
https://www.google.com/search?q=Poisson+Disk。 そして、結果として
影は柔らかく、長方形の光に適している必要があります。

私はFOVについて混乱していますが、ポイントライトに設定する必要がありますが、
そして多分あなたは常にそれをrectから法線方向に向けるべきです
エリア表面？ 私が実際に妨げているのは、これらの小さな詳細です
累積サンプル排出量の実施を進めます
ソースベースのシャドウ。

2019年12月23日月曜日の午前9:00に[email protected]は次のように書いています。

放出ボリューム内の光源をジッターする方法はありますか？
32回のレンダリングのようなソフトシャドウを取得するために蓄積します
あなたがたった今蓄積すること？

私はこれをサブピクセルカメラのジッターでうまく機能するものと見ています
TAAThree.jsの例で蓄積したものです。

2019年12月21日土曜日午後10時4分サミュエルシルベスター<
[email protected]>は次のように書いています：

さて、私はそれをポイントライトで動作させました...今度は長方形のエリアライトをテストします！

【画像：画像】
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png

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

-

ベンヒューストンCTO
* M：* + 1-613-762-4113
[email protected]
オンタリオ州オタワ

[画像：threekitlogo1568384278.png] https://www.threekit.com/
Threekitでより良いビジュアルカスタマーエクスペリエンスを作成する
https://www.threekit.com/

[画像：成長するビジネスに合わせて製品のビジュアルを拡大する方法を学ぶ]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

-

ベンヒューストンCTO
* M：* + 1-613-762-4113
[email protected]
オンタリオ州オタワ

[画像：threekitlogo1568384278.png] https://www.threekit.com/
Threekitでより良いビジュアルカスタマーエクスペリエンスを作成する
https://www.threekit.com/

[画像：成長するビジネスに合わせて製品のビジュアルを拡大する方法を学ぶ]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhoustonhttps ://github.com/mrdoob/three.js/issues/14048があなたが話していることだと思います。

ツイストノット光源を使ったデモが気に入りました。 私が見た問題は、光源の反射が正しい画像に解決されなかったことだと思います。

レイトレーシングシャドウの利点の1つは、透明なシャドウを処理するために使用されることです。 また、グローバルイルミネーションや他の多くの照明効果にも使用できます。

@bhouston https://github.com/bhouston私は＃14048だと思います
https://github.com/mrdoob/three.js/issues/14048はあなたが話しているものです
だいたい。

申し訳ありませんが、私は以前に提案したことを忘れがちですが、少なくとも私は
一貫性のある。

ツイストノット光源を使ったデモが気に入りました。 私は推測します
私が見た問題は、光源の反射が決してないということです
正しい画像に解決されました。

それは彼がランダムサンプリングではなく徹底的なサンプリングをしているからです
方法-彼はまた、単なる光源よりもはるかに難しい光源を使用しています
長方形の領域。 彼の方法は、ラスタライズでは累積が遅くなります
レンダリングまたはレイトレーシング-間違っていたのはサンプルメソッドであり、
技術。 また、必要に応じて、レンダリングごとに複数のライトサンプルを作成できます
傾いた。 ハイエンドで32から256のレンダリングが必要だと思いますが、
ライトの種類とレンダリングごとのライトサンプルの数によって異なります。 で
60 fpsは、この1〜4秒です。 私はそれを単純化された「インスタント」と考えています
ラジオシティ」ソリューション。

あなたは、レイトレーシングが素晴らしいことは正しいです。 ジッターだと思った
照明は、照明システム全体をやり直すよりも簡単です。
リアルタイムのための良い解決策があります、影はただ固くてそれからオンになります
それらが完全に柔らかくなるのを止めてください、そしてレンダリングアルゴリズムは切り替わりません、
物事が揺らぎ、蓄積するだけです。

2019年12月23日月曜日11:03 AMSamuel [email protected]
書きました：

@bhouston https://github.com/bhouston私は＃14048だと思います
https://github.com/mrdoob/three.js/issues/14048はあなたが話しているものです
だいたい。

ツイストノット光源を使ったデモが気に入りました。 私は推測します
私が見た問題は、光源の反射が決してないということです
正しい画像に解決されました。

レイトレーシングシャドウの利点の1つは、処理に使用されることです。
透明な影。 また、グローバルイルミネーションや多くの
その他の照明効果。

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

-

ベンヒューストンCTO
* M：* + 1-613-762-4113
[email protected]
オンタリオ州オタワ

[画像：threekitlogo1568384278.png] https://www.threekit.com/
Threekitでより良いビジュアルカスタマーエクスペリエンスを作成する
https://www.threekit.com/

[画像：成長するビジネスに合わせて製品のビジュアルを拡大する方法を学ぶ]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston私は＃14048で提案された解決策が好きです...特に長方形のような単純な形状の場合。
その方法はかなり簡単に使用できるはずです。 このソリューションを備えた3つのフォークはありますか？

レイトレーシングについて...デスクトップクラスのハードウェアでは、レイトレーシングソリューションは1sppでリアルタイムに動作します。 参照してください... https：//youtu.be/amX3icmbpzY。

私はまだモバイルをテストしていません。

私が取り組んでいるデモでは、ライティング用語は既存のコードを使用して計算されますが、シャドウはシャドウマッピングの代わりにレイトレーシングされます。

@ mrdoob 、@ bhouston
そこで、GDC2018からのNvidiaのrtxデモを反映するようにデモを更新しました

そして、ラップトップと携帯電話でリアルタイムに実行しています...

ノートパソコンのデモ... https：//youtu.be/MKCKXRVks3I
携帯電話のデモ... https： //youtu.be/P-cnT2hYNF4

また、影のリアリズムを改善するために、影のサンプルの分布を改善しました

@ mrdoob 、 @ WestLangley 、 @bhoustonなど

レイトレーシングで動作する長方形のエリアライトのシャドウを取得しました。

ここに示されているデモ... https：//youtu.be/tZmlb29OUBU
ポイントライトと長方形エリアライトがあります。

シャドウサンプルの分布に対するいくつかの改善が進行中です。 また、エリアライトの場合、ライトごとに2つのシャドウを計算する必要があるようです。 拡散シャドウと鏡面シャドウ。

現在、拡散シャドウのみが計算されています。

このデモを使用してライブWebサイトをセットアップし、これらの変更を3つのフォークにすぐにプッシュする予定です。

見栄えがいいです！ 単一の深さのテクスチャのみを使用しますか？

見栄えがいいです！ 単一の深さのテクスチャのみを使用しますか？

@mrdoobありがとう！ これは実際には適切なレイトレーシングであり、現在2つのテクスチャを使用しています。 1つはワールド空間ジオメトリを格納し、もう1つはBVHデータを格納します。

この設定では、RTXアンビエントオクルージョンを計算でき、いくつかの更新でGIも可能になります。

ブラウザでデモを実行するには、次を参照してください... https://three-rtx.azurewebsites.net/

注...これはレイトレーシングされており、統合されたGPUは、適切なフレームレートのレイトレーシングされたシャドウを持つ1つの光源しか処理できないことがわかりました。 しかし、RTX 2080を有効にすると、2つの光源を1ライトあたり16sppで、フレームレートの2倍でレイトレーシングすることができました。 これは、ディスクリートGPUでは64倍弱です。

また、これを携帯電話で実行してみたところ、1080pで30fps以上の2019フラグシップ以上が必要であることがわかりました。

より多くのパフォーマンスとより少ないノイズを絞り出すために、さらにいくつかの改善があると思います。

私は今持っているコードをフォークにプッシュし、それから微調整を続けるつもりです。

注：パフォーマンスを平均fpsの50％以上向上させる微調整が1つあります...これはシェーダーの最初のコンパイルで機能しますが、2番目のコンパイルがトリガーされると、面白いことが起こり始めます...プリプロセッサ

@ sam-g-steel
これは素晴らしい！ ある時点で作品をオープンソース化する計画はありますか？ それはどれくらいうまくスケーリングしますか？より複雑なキャラクターまたは製品モデルでテストを行いましたか？ そして、ここでのレイトレーシングは静的なシーンでのみ機能すると思いますよね？

レイトレーシングシャドウの利点の1つは、透明なシャドウを処理するために使用されることです。 また、グローバルイルミネーションや他の多くの照明効果にも使用できます。

これは、この手法にとってプラスのように思えます。 ＃14048のジッターアプローチでかなり良い結果が得られると思います。

@bhouston

間違っていたのはサンプルメソッドであり、テクニックではありません。

MeshSurfaceSamplerヘルパーのようなものを複数のライトと一緒に使用すると、結果が少し良くなると思います。

@gkjohnson

これは素晴らしい！ ある時点で作品をオープンソース化する計画はありますか？

ありがとう！！！ はい、すぐにコードを公開する予定です。 それがthree.jsに組み込まれるのを見てみたいです！
現在、デモは2つの主要部分で構成されています。 今後数日で公開したいモデルビューとワールドスペースで照明情報を送信する3つのカスタムビルドと、BVHをビルドし、レイトレーシングを行うシェーダーを生成するthree.js「プラグイン」。

それはどれくらいうまくスケーリングしますか？より複雑なキャラクターまたは製品モデルでテストを行いましたか？

複雑なシーンでどのように機能するかを確認するためにいくつかのテストを行いました...私が得た結果は非常に有望でした。 私はウェブサイトhttps://three-rtx.azurewebsites.net/をすぐにもっと多くのデモで更新することに取り組んでいます。 私はそれをバックアップするためにデモで主張したくありません。

そして、ここでのレイトレーシングは静的なシーンでのみ機能すると思いますよね？

実際、ダイナミックなシーンがサポートされています！ 私もすぐにデモをする予定です！ 現在、最初のbvhビルドには300ミリ秒かかり、後続のビルドにはシングルスレッドのCPUで約10ミリ秒かかります。 注意すべき点の1つは、bvhコードをさらに最適化できることです。

うまくいけば、今週末はコードを公開できなくなります。 妻と私が3人目の子供を世界に迎えたばかりだったため、予想よりも時間がかかりました:)

@ mrdoob 、@ gkjohnson
レイトレーシングコードの公開を開始しました...ここにあります... https：//github.com/sam-g-steel/three.js/tree/RTX

すべてのコードがコミットされているわけではありません...私は物事を少しクリーンアップしようとしています。 うまくいけば、私はすぐにすべてのコードをアップするでしょう。

私はまだこれに取り組んでいます...
コードにいくつかのエラーが見つかったので、何が問題になっているのかを理解するために、より多くのテストケースに取り組んでいます。

新しいデモの1つはここで見ることができます...

https://youtu.be/ZvoSuBi4rFE
@gkjohnson 、このデモでは画面に動的オブジェクトが表示され、完全なBVH再構築のパフォーマンスをテストするのに役立ちます。

残りのシェーダーまたは「RTX」シェーダーをコミットしたいと思っています...今夜とBVHコードはすぐに

注：現在、サポートされているプリミティブは三角形のみです

2020年2月8日更新
ウェブサイトが更新され、新しいデモが追加されました...
動的BVHの構築は、4日前よりも40％高速になりました...今後さらに最適化が行われます。
https://github.com/sam-g-steel/three.js/tree/RTXがより多くのコードで更新されました。

今後のアップデート!!!

まだレイトレーシングフォークに取り組んでいます...数週間以内にもっと多くのことを見せたいと思っています。
私はフレームレートと画質を改善するためにノイズフィルタリングに取り組んできました。

以下はノイズフィルターの写真です...
それはまだ進行中の作業です。

2020年3月28日更新

https://ciechanow.ski/lights-and-shadows/