Babylon.jsで作ったsceneをレイトレーシングで映えさせる

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Appendix
   

   View Slide

9. 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
   ※★の数が多いほどレンダリング負荷高め
   

   View Slide

10. 参考文献
    [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
    

    View Slide