Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
July 10, 2022
Programming
1
470
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
July 10, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
250
レガシーフレームワークからの移行
ug
0
120
AWSにおける標的型Bot対策
hacomono
0
440
42tokyo-born2beroot-review
love42
0
120
Prácticas de Seguridad en Kubernetes
pablokbs
0
130
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
120
Writing Greener Java Applications
hollycummins
0
360
Swift Observation
shiz
4
290
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
190
なぜRubyコミュニティにコミットするのか?
luccafort
0
320
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
130
Featured
See All Featured
Statistics for Hackers
jakevdp
785
210k
GraphQLとの向き合い方2022年版
quramy
20
9.9k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Debugging Ruby Performance
tmm1
67
11k
Writing Fast Ruby
sferik
613
58k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
Robots, Beer and Maslow
schacon
154
7.3k
Designing with Data
zakiwarfel
91
4.2k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
A Tale of Four Properties
chriscoyier
149
21k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Transcript
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