gkjohnson氏が、three.js上でGPUを活用した高品質な物理ベースレンダリングを実現するオープンソースのパストレーサー「three-gpu-pathtracer」を公開しています。
three-gpu-pathtracer
「three-gpu-pathtracer」は、three.js向けに開発されているGPUパストレーシングレンダラーです。
現在のバージョンではWebGPUのCompute Shaderを使用し、GPU上でパストレーシングを実行することで、three.jsのシーンを高品質な物理ベースレンダリングで描画できます。
もともとは「three-mesh-bvh」とWebGL 2を利用する構成で開発されてきましたが、現在はWebGPU Compute Shaderを使用する実装へと移行しています。three-mesh-bvhは、three.jsのメッシュに対してBVH（Bounding Volume Hierarchy）を構築し、レイキャストや空間検索などを高速化するためのライブラリです。
対応機能
公式デモでは、glTFモデルやプリミティブを使用した基本的なセットアップのほか、物理ベースマテリアル、インテリアシーン、被写界深度、HDR環境などを使用したレンダリングを確認できます。また、Area Light、Spot Light、HDR環境、Depth of Field、Denoising、Upscaling、Animation Rendering、などの機能を確認できるサンプルも用意されています。
three.jsのMeshStandardMaterialとMeshPhysicalMaterialに対応しており、既存のthree.jsシーンをベースにパストレーシングレンダリングを組み込める構成になっています。
WebGPU版ではWebGPURendererとWebGPUPathTracerを使用し、サンプルを繰り返しレンダリングして結果を蓄積することで、徐々にノイズの少ない画像へ収束させていきます。
Web上でデモを確認可能
公式ページには多数のデモが用意されており、ブラウザ上から実際のレンダリング結果を確認できます。
特にマテリアル表現やインテリアシーンなどを見ると、通常のリアルタイムラスタライズとは異なるパストレーシングならではのライティングや反射、透過表現を確認できます。
現行版ではWebGPUが必須となっているほか、一部ライトの利用条件や対応マテリアルなどに制限があります。
プロジェクトはMITライセンスで公開されています。
three.jsでここまでのパストレーシングがブラウザ上で動く時代
以前から開発されているプロジェクトですが
WebGPU Compute Shaderベースへ移行しているのも注目したいところですね
Web上で3Dビューワーを作るだけでなく
高品質な商品ビジュアライゼーションやレンダリング用途など
色々遊べそうです。
公式デモがかなり充実しているので
まずは実際にブラウザ上で動いているところをチェックしてみてください！
リンク
コメント