WebGPUに触れてみた

Seminar slide for RayTracingCamp9

Transcript

1. WebGPUに触れてみた

   kugi(@kugi_masa)

   RayTracingCamp9

   

   View Slide

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

   View Slide

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の中間層 

   

   View Slide

4. なぜWebGPU?その１

   ● Google Chrome v113 が

   リリースされた日に公開されたブログ
   

   ● グラフィックAPIの歴史

   WebGLが生まれた歴史的背景

   ● WebGPUを使うには

   TypeScript/Rust/C++での導入について
   

   WebAppだけでなく、

   Native C++ でも動かせる

   cohost! - "I want to talk about WebGPU"
   

   

   View Slide

5. なぜWebGPU?その２

   ドライバやOSに依存しない実装

   ● 初参加の昨年はCPUでのスペクトラルランダリング
   

   ● 今年の目標はGPUレンダリング

   ● 開発環境はMacOS

   RayTracingCamp8より

   

   View Slide

6. Web以外でWebGPUを使う方法

   • wgpu-native

   • Firefoxのバックエンド

   • Rust実装

   • 軽量

   • Dawn

   • Chromeのバックエンド

   • C++実装

   • エラーが親切

   

   View Slide

7. WebGPU for C++

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

   

   View Slide

8. WebGPUでレイトレーシング

   ガイドの方でRaytracingとあるが...

   🥺
   

   View Slide

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

   

   View Slide

10. 描画までの流れ

    Adapter

    GPUハードウェアの情報を持つ

    グラフィックスAPIへのエントリーポイント

    Device

    Adapterの持つハードウェアの情報を元に

    サポートする機能要求などを設定する

    cohost! - "I want to talk about WebGPU" 

    

    View Slide

11. WGSL(WebGPU Shading Language)

    WebGPU Shading Language (gpuweb.github.io) 

    型に厳しい印象

    (コンパイラ次第...?)

    󰢃var foo : f32 = 1;

    󰢏var foo : f32 = 1.0;

    

    View Slide

12. compute.toys

    compute.toys

    https://compute.toys/view/145 
 https://compute.toys/view/ 69

    パストレーシング
 スペクトラルコーネルボックス
    

    

    View Slide

13. まとめ

    ● 「ドライバやOSに依存しない実装ができる!!」と意気込んだが

    ○ 結局かなり苦労した...

    ● よかったこと

    ○ ComputeShader入門ができた

    ○ Dawnとwgpu-nativeの両方に対応できた

    ○ Windows、Macでも動くGPUレンダラー

    ■ 一部環境によるバグはある...

    ● 今後

    ○ もう少しWebGPUと仲良くなりたい

    ○ 実際にWebでも動かしてみたい

    https://github.com/gfx-rs/wgpu/issues/2529
    

    

    View Slide

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 )

    

    View Slide