$30 off During Our Annual Pro Sale. View Details »

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

turamy
July 10, 2022

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

turamy

July 10, 2022
Tweet

Other Decks in Programming

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