Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebGPUに触れてみた

kugi
September 03, 2023

 WebGPUに触れてみた

Seminar slide for RayTracingCamp9

kugi

September 03, 2023
Tweet

More Decks by kugi

Other Decks in Programming

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?その1

    ● Google Chrome v113 が

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

    ● グラフィックAPIの歴史

    WebGLが生まれた歴史的背景

    ● WebGPUを使うには

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

    WebAppだけでなく、

    Native C++ でも動かせる

    cohost! - "I want to talk about WebGPU"

    View Slide

  5. なぜWebGPU?その2

    ドライバや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