WGSLのシェーダコードをデバッグする方法

下記記事にあるやり方で、Babylon.jsのWebGPUのシェーダもデバック可能です。

※ WGSL のシェーダコードそのものではなくWGSL→HLSL変換されたシェーダとしてデバックが行えるようになります。

■ PIXでWebGLやWebGPUをデバッグする

1. PIX for Windowsをダウンロード

2. 実行するプログラムにChromeを指定

3. Chrome実行時の引数に下記を設定

--no-sandbox --disable-gpu-watchdog --disable-features=RendererCodeIntegrity --enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming

4. PIX からChromeを起動

5. 対象のWebGPUのページを表示

6. GPU Captureを実行

例）Babylon.jsでキューブを表示するサンプルをPIXを用いてシェーダ部のデバッグを実施する例

https://scrapbox.io/files/6676c83481128c001cd6189d.png

https://scrapbox.io/files/6676c8412bf825001d10c1b5.png

上記のBabylon.jsが生成したWGSLのシェーダコードは下記の手順で確認可能です。