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


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 よりデフォルトで使用可能に • コンピュートシェーダーが使用できる

Render Hardware Interface
 Hello WebGPU - Learn WebGPU for C++ documentation (eliemichel.github.io)
 Unreal Engine のグラフィック プログラミングの概要 | Unreal Engine 5.2 ドキュメント 
 Unreal EngineでもRHIの設定をカスタマイズすることができる 
 デバイスに要求される機能レベルに応じた描画を行う 
 各グラフィックスAPIを薄くラッピングしたインターフェースで 
 レンダラーとグラフィックスAPIの中間層 


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


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


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


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


WebGPUでレイトレーシング
 ガイドの方でRaytracingとあるが...
 🥺

WebGPUでレイトレーシング
 ● 現時点では公式にはDXRやVulkan Ray Tracingには非対応
 ● Dawn RT
 ○ 有志によるDXR、Vulkan Ray Tracingへの拡張
 ○ https://github.com/maierfelix/dawn-ray-tracing
 ● WebRTX
 ○ https://github.com/codedhead/webrtx


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


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


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


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


参考文献
 • 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 )