WebGPUに触れてみた

Seminar slide for RayTracingCamp9

Transcript

1. WebGPUに触れてみた
 kugi(@kugi_masa)
 RayTracingCamp9

2. WebGPUとは
 Introduction - Learn WebGPU for C++ documentation (eliemichel.github.io) • Web開発におけるグラフィックスAPI(2014年ごろから開発されている) • Apple, Mozilla, Microsoft, Google などのエンジニアからなる W3CのGPU for Webコミュニティグループによって開発されている • 2023年5月 Google Chrome ではv113 よりデフォルトで使用可能に • コンピュートシェーダーが使用できる
3. Render Hardware Interface
 Hello WebGPU - Learn WebGPU for C++ documentation (eliemichel.github.io)
 Unreal Engine のグラフィック プログラミングの概要 | Unreal Engine 5.2 ドキュメント 
 Unreal EngineでもRHIの設定をカスタマイズすることができる 
 デバイスに要求される機能レベルに応じた描画を行う 
 各グラフィックスAPIを薄くラッピングしたインターフェースで 
 レンダラーとグラフィックスAPIの中間層 

4. なぜWebGPU?その１
 • Google Chrome v113 が
 リリースされた日に公開されたブログ 
 • グラフィックAPIの歴史
 WebGLが生まれた歴史的背景
 • WebGPUを使うには
 TypeScript/Rust/C++での導入について 
 WebAppだけでなく、
 Native C++ でも動かせる
 cohost! - "I want to talk about WebGPU" 

5. なぜWebGPU?その２
 ドライバやOSに依存しない実装
 • 初参加の昨年はCPUでのスペクトラルランダリング 
 • 今年の目標はGPUレンダリング
 • 開発環境はMacOS
 RayTracingCamp8より

6. Web以外でWebGPUを使う方法
 • wgpu-native
 • Firefoxのバックエンド
 • Rust実装
 • 軽量
 • Dawn
 • Chromeのバックエンド
 • C++実装
 • エラーが親切

7. WebGPU for C++
 Learn WebGPU for C++ documentation (eliemichel.github.io)
 https://developer.chrome.com/blog/ webgpu-cross-platform/ 

8. WebGPUでレイトレーシング
 ガイドの方でRaytracingとあるが...
 🥺
9. WebGPUでレイトレーシング
 • 現時点では公式にはDXRやVulkan Ray Tracingには非対応
 • Dawn RT
 ◦ 有志によるDXR、Vulkan Ray Tracingへの拡張
 ◦ https://github.com/maierfelix/dawn-ray-tracing
 • WebRTX
 ◦ https://github.com/codedhead/webrtx

10. 描画までの流れ
 Adapter
 GPUハードウェアの情報を持つ
 グラフィックスAPIへのエントリーポイント
 Device
 Adapterの持つハードウェアの情報を元に
 サポートする機能要求などを設定する
 cohost! - "I want to talk about WebGPU" 

11. WGSL(WebGPU Shading Language)
 WebGPU Shading Language (gpuweb.github.io) 
 型に厳しい印象
 (コンパイラ次第...?)
 󰢃var foo : f32 = 1;
 󰢏var foo : f32 = 1.0;

12. compute.toys
 compute.toys
 https://compute.toys/view/145 
 https://compute.toys/view/ 69
 パストレーシング
 スペクトラルコーネルボックス 

13. まとめ
 • 「ドライバやOSに依存しない実装ができる!!」と意気込んだが
 ◦ 結局かなり苦労した...
 • よかったこと
 ◦ ComputeShader入門ができた
 ◦ Dawnとwgpu-nativeの両方に対応できた
 ◦ Windows、Macでも動くGPUレンダラー
 ▪ 一部環境によるバグはある...
 • 今後
 ◦ もう少しWebGPUと仲良くなりたい
 ◦ 実際にWebでも動かしてみたい
 https://github.com/gfx-rs/wgpu/issues/2529 

14. 参考文献
 • WebGPU: Unlocking modern GPU access in the browser - Chrome Developers
 • cohost! - "I want to talk about WebGPU"
 • WebGPU — All of the cores, none of the canvas — surma.dev
 • WebGPU - コアの全てを canvas 抜きで (翻訳) (inzkyk.xyz)
 • Learn WebGPU for C++ documentation (eliemichel.github.io)
 • WebGPU: the cross-platform graphics API of tomorrow
 • WebGPUに入門する (zenn.dev)
 • WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA
 • WebGPU Shading Language (gpuweb.github.io)
 • compute.toys
 dawn logo by Google - licensed under CC-4.0-BY (ref: https://dawn.googlesource.com/dawn/+/HEAD/docs/imgs/ )
 wgpu logo by gfx-rs developers - licensed under MIT (ref: https://github.com/gfx-rs/wgpu/blob/master/logo.png )