本日はRenderDocを使用してブラウザ上でのグラフィックのデバッグを行っていきます。
〇RenderDocとは？
RenderDocはMITライセンスで開発、提供されているスタンドアローンなグラフィックスデバッガーです。
通常レンダリング回りの処理はGPU上で動いているためログの出力などが難しく、デバッグやプロファイルが困難です。
RenderDocを使用するとグラフィックスパイプライン上での処理に関して一つ一つイベントを見ることができます。
〇WebXRのデバッグを行う
今回はこちらの記事を参考にWebXRのデバッグを行っていきます。
①参考記事によるとGoogle ChromeでRenderDocを使用するためにはバッチを使用する必要があるようです。
バッチファイルはWindows環境で動くコマンドを記述したテキストファイルです。
デスクトップなどで新規のテキストファイルを作成します。
ファイル名をRenderDocChrome.batへ変更します。
内容は次のようになります。オリジナルのコードはQiitaの記事を見てください。
set RENDERDOC_HOOK_EGL=0 "C:\Program Files\Google\Chrome\Application" --disable-gpu-sandbox --gpu-startup-dialog
ここではRenderDocでGLESのデバッグを無視するために指定しているものです。
次にChromeの起動ですが、これはそれぞれの環境のchrome.exeのパスを指定します。
②Batファイルを選択すると実行され、Chromeが開きます。 ダイアログが開くのでこの状態で次の作業へ進みます。
③RenderDocを開き、File→Inject into Processを選択します。
Inject into Processが表示されない場合があります。
こういった場合はTools→Settingsを開きます。
Enable process injection(restart required)にチェックを入れ有効化します。
再起動することで表示されるようになります。
④Inject into Processのタブが開きます。
検索欄でGoogleを検索します。
⑤Chrome上に出ているダイアログのpidと同じPIDを選択します。
⑥Injectを選択します。
以上でRenderDocをGoogleChromeで使用する準備が整いました。
〇デバッグ
今回はThree.jsのサンプルシーンをデバッグしていきます。
デバッグしたい画面でRenderDocのCapture Frame(s) Immediatelyを選択します。
キャプチャが作成されます。
以上でWebXRのデバッグができました。
Unity同様GPUの処理のイベントを一つ一つ見ることができるようになりました。
また、こちらでもメッシュなど確認できるので実装上やモデリング時の参考にできそうです。
本日は以上です。
