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

はじめに

以前、RenderDocでWebGLをデバッグするための記事を書きました。

しかし、RenderDocはWebGLのデバッグは本来サポートしておらず、多数の問い合わせに辟易した（？）RenderDoc公式により、現在はChromeへのデバッグ機能自体が塞がれてしまっている状態です。

そこで、今回はPIXでWebGLとWebGPUをデバッグする方法を共有したいと思います。PIXを使いますので、環境としてはWindows限定です。

PIXは以下からダウンロードできます。

WebGLのデバッグ

1.PIXからChromeを立ち上げる

まず、PIXを立ち上げ、Launch Win32タブを選択します。

次に、Path to excecutable欄にChrome(私の場合はChrome Canaryを使っています)実行バイナリへのパスを設定します。

次にCommand line argumentsに以下の引数を設定します。

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

そして、Force D3D11On12オプションにチェックをいれます。

そこまでできたら、Launchボタンを押して、Chromeを起動します。

2. ChromeでデバッグしたいWebGLコンテンツを表示する

立ち上がったChromeでデバッグしたいWebGLコンテンツを表示します。

PIXでフレームキャプチャを行う

PIXの画面でカメラのアイコンを押します。

この状態でPIXがキャプチャをしようとするのですが、キャプチャするにはChromeの描画処理を捉えなければならないので、そのため一旦Chromeのウィンドウを最前面に出してください。

その後、PIXに戻ると、キャプチャされたスクリーンショットが表示されます。このスクリーンショットのボタンを押してください。

すると、フレームデバッガウィンドウが新たに表示されます。

3.フレームデバッグを行う

画面左上を見ると、解析されたフレーム中に実行されたDirect3Dコマンドのリストが表示されています（WebGLは水面下ではANGLEという中間層によってDirect3Dコマンドに変換されて実行されます）。もし、こういう表示になっていない場合は、Overviewタブの画面になっているかもしれません。画面上部のPipelineタブを押すとこの表示になります。

さて、この画面左上のリストのうち、どれでもいいので適当なコマンド行を選択してください。

すると、画面右下にclick here to start analysis.という文章があるので、click hereとリンクになっている部分をクリックします。ダイアログが出てくるので、Yesを選択します。

すると、すべてのコマンドの解析処理が始まるので、画面が落ち着くまで一旦待ちましょう。処理中にあれこれUIをいじるとエラーが起きる可能性があるので、じっと待ちましょう。

画面が落ち着いたら、画面左上からどれかドローコール系のコマンドを選択してみましょう。
すると画面左下にパイプライン中の各工程のリストが出てくるので、このリストの一番下のOMの配下にあるRTV0をクリックします。すると、この描画時点でのフレームバッファの画像を確認することができます。

こんな感じで、フレームデバッグすることができます。色々試して遊んでみてください。

WebGPUの場合

WebGLの時と手順は同じです。ただし、一点だけ違う点があります。ChromeをLaunchする際に、Force D3D11On12オプションは外してください。

PIXの様々な機能

頂点デバッグ

画面左下のパイプライン工程リストで、VS->Outputを選択します。すると画面右下に頂点シェーダーを通った後のポリゴンをビジュアルに確認することができます。

さらに、各ポリゴンを選択することができ、右クリックから各頂点のデバッグに移行することができます。

頂点シェーダーデバッグ画面が表示されたら、画面左上の緑色の実行ボタンを押します。

すると、シェーダーが実行され、main関数の冒頭で一旦止まるので、ステップ実行したり、ブレイクポイントを仕掛けてそこまで移動したりしてみましょう。
画面下には変数リストが表示され、各ステップにおける各変数の値を確認することができます。

ピクセルデバッグ

画面左下のパイプライン工程リストで、OM->RTV0を選択します。そして、画面右下のフレームバッファ画像のどこでもいいので、どこかのピクセルを左クリックして選択します。次に、画面右下端にあるDebug Pixelボタンをクリックします。

すると、ピクセルシェーダーデバッグ画面が出てくるので、頂点シェーダーデバッグ画面の時と同様の操作感でデバッグできます。

Chromeに渡すオプションについて

私よりも前にPIXによるWebGLデバッグを検証している方がいて、Chromeに渡すオプションを検証してくれています。以下のGistの内容も参考にして色々試すとさらに良いデバッグ体験ができるかもしれません。

https://gist.github.com/Popov72/41f71cbf8d55f2cb8cae93f439eee347

最後に

PIXによるWebGL/WebGPUのデバッグのやり方を見てきました。
PIXではOpenGLのデバッグができないので、WebGLをデバッグするときは内部的なDirect3Dコマンドとの脳内での対応付けが必要になり、あまり直感的ではないかもしれません。

しかし、WebGL命令レベルのデバッグはSpector.jsでできますし、おそらくPIXに手を出す方はSpector.jsではできない、各頂点やピクセルの具体的な値を見たり、各種バッファの値を確認したい、というよりディープな部分を確認したいのだと思います。なので、APIの違いはあまり問題にはならないでしょう。

PIXを活用して、WebGL/WebGPUのデバッグを大いにはかどらせましょう！