Babylon.jsでレイトレーシング Babylon.js ゆるほめLT会

自己紹介 つらみぃ ・半導体装置の光学系開発 構造解析・光学シミュレーションとか ・Babylon.js歴1.5ヶ月 ブラウザでGPGPUできるのすごい！ まずはBabylon.jsでシェーダーを弄る練習 @turamy3D

レイトレーシングって？ 視線の方向にレイを打ち出し、 反射・屈折する光の量を計算して色を決める

やったこと Mesh, Materialデータを TextureのRGBに書込み シェーダーに 送る レイトレの結果を Canvasに描画 Babylon.js Scene Texture Ray Tracing Shader

レイトレーシングのすごいところ でも計算コストはとても高い。。。 多重反射・屈折 自然なボケ

自由度の高いマテリアル表現

気づき ・レイトレーシングはシンプルだけど超強力 ・クロスプラットフォームかつ特別な環境なしに GPGPUできるのは魅力的 （しかもBabylon.jsを使えば簡単！） ・次はBabylon.js 5.0で対応したWebGPUを使ってみたい （もっと高速らしい）

Appendix

Playgroundデモ ・水面の反射・屈折のデモ ★★★★ https://www.babylonjs-playground.com/#MHTAGR#3 ・多重反射・屈折のデモ ★★★★ https://www.babylonjs-playground.com/#8EI65X#5 ・レンズボケのデモ ★ https://www.babylonjs-playground.com/#BD7XZ9#3 ・マテリアル表現のデモ ★★ https://www.babylonjs-playground.com/#5IS6A5#2 ※★の数が多いほどレンダリング負荷高め

参考文献 [1] Tomas Akenine-Moller, Eric Haines, Naty Hoffman, Angelo Pesce, Sebastien Hillaire, Michał Iwanicki, 中本 浩 訳, “リアルタイムレンダリング 第4版”, 株式会社 ボーンデジタル, 2019 https://www.borndigital.co.jp/book/15291.html [2] Fletcher Dunn, Ian Parberry, 松田 晃一 訳, “実例で学ぶゲーム3D数学”, O'Reilly Japan, 2008 https://www.oreilly.co.jp/books/9784873113777/ https://gamemath.com/ [3] Brian Karis, “Real Shading in Unreal Engine 4”, Epic Games, 2013 https://de45xmedrsdbp.cloudfront.net/Resources/files/2013SiggraphPresentationsNotes-26915738.pdf [4] Mark Jarzynski, Marc Olano, “Hash Functions for GPU Rendering”, Journal of Computer Graphics Techniques (JCGT), vol. 9, no. 3, 21-38, 2020 https://jcgt.org/published/0009/03/02/ [5] 細田 翔, “gam0022.net” https://gam0022.net/ [6] Playgroundで見つけたパストレーシングのデモ : https://playground.babylonjs.com/#PW0QJI#11