WebGPUに触れてみた

by kugi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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