WebGLデバッグに最強な「RenderDoc」

#はじめに
WebGLだいすきクラブの皆さんこんにちは。ukonpowerです。
さて、WebGLやThree.jsで開発をしているとき、みなさんデバッグはどうしているでしょうか。

僕の最近のおすすめは**RenderDoc**です。

# RenderDocとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/05c54977-bb45-a77f-4c0a-4620cea26a38.png)
https://renderdoc.org/
https://github.com/baldurk/renderdoc

RenderDocはオープンソースのGPUデバッガーで、VulkanやOpenGL(ES)、D3D11、D3D12などに対応しているようです。（[対応表](https://github.com/baldurk/renderdoc#api-support))
**Metalは対応しておらず、**そもそもソフト自体**Windowsとlinuxのみ**対応しているようです。

UnityやUnreal Engine4には統合されているらしく（？）エディターから直接使えるようです。スゴイ。
今回はこれをWebGLでも使っちゃおうぜというわけです。

#環境
今回試した環境は以下です。

windows10 バージョン 1909
Chrome バージョン 81.0
RenderDoc v1.7

#インストール

https://renderdoc.org/
からダウンロードしましょう。

#WebGLをデバッグ
##1.Chromeの起動
Chromeが使ってるGPUにアクセスするためにはChromeの起動オプショを指定するのと、RenderDocの環境変数を設定しないといけないようです。

ので、Chromeの起動はbatで行ないます。
以下のbatファイルを作成します。Chromeのパスはそれぞれ設定してください。

```:RenderDocChrome.bat
set RENDERDOC_HOOK_EGL=0
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-gpu-sandbox --gpu-startup-dialog
```
 
`RENDERDOC_HOOK_EGL=0`はChromeのWebGLが、DirectXでOpenGL ESをシミュレートするANGLEで動いているためで、OpenGLESの呼び出しを無視するために設定するようです。
[詳細](https://renderdoc.org/docs/getting_started/faq.html#i-m-debugging-a-program-using-an-opengl-es-emulator-how-can-i-capture-the-underlying-api)

`--disable-gpu-sandbox`はGPUのサンドボックス化を無効化します
`--gpu-startup-dialog`はChromeの起動時に、GPUのプロセスIDを表示してくれます。

バッチファイルをクリックしてChromeを起動すると以下のようなウィンドウが表示されます。
**表示させたままで次のステップへ進みます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/36e36ab0-be26-e0d9-e260-712445c21647.png)

##2.RenderDoc

RenderDocを起動します。
WebGLのGPUプロセスを開くため、`File>Inject into Process`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/3518ed02-8408-aca8-d3f6-0d5543f0b830.png)

`Inject into Process`ウィンドウで"chrome"などと検索し、先程Chromeを立ち上げたときに出たPIDのプロセスを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/e782600d-664b-8682-2f9b-d343ca36c65a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/bd1917ec-83f0-0205-10e4-09c83958082c.png)

ChromeのGPUプロセスのウィンドウが開かれたら先程のChromeのGPUのダイアログウィンドウをOKを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/da07254b-f9ff-dbcb-00b7-8af6b5611565.png)

するとキャプチャするボタンがアクティブになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/2913642b-db65-81f8-2ea2-e0cca53a07f1.png)

##3.フレームをキャプチャしてみよう

今回は試しに、かの有名な[OreGL](https://oregl.ukon.dev/)というサイトにある[Complex](https://oregl.ukon.dev/gl/Complex/)というものをキャプチャしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/c77dc604-f6f2-d645-8acc-4ea4ad710a0e.png)

Chromeでサイトを開いた状態で`Capture Frames(s) Immediately`をクリックしますと、Capture collectedのなかにキャプチャ結果が表示されました。それをクリックすると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/1c74d8bd-83ee-5405-828e-80bec8493e41.png)

**ドドーーン!!**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/3ac8a0fb-037a-83db-5ade-f98af1a89b3a.png)
キャプチャされたフレームの詳細が見れます。
`Event Browser`では呼ばれたドローコールが一覧になっております。

### ■Texture Viewer
`Texture Viewer`タブではドローコール時のインプットテクスチャとアウトプットフレームバッファを見ることができます。
スゴイ...オブジェクトが描画されていく過程が見える...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/b6d1e65e-634e-5ffe-630b-58a304ed33a6.png)

ポストプロセスでブルームがかかっていく過程もこの通り!!見れちゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/8d238b83-adb3-ab95-0cf9-5ed4ee457372.png)

`Texture Viewer`のInputsタブでは入力テクスチャが見れます。
ちゃんとTextureがアタッチされているか確認するのにとても便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/26e2aa3f-5725-132b-c824-4620899c85e5.png)

`Texture Viewer`、**値マッピングもできる**みたいで、GPGPUで使うために作ったFloatTextureなんかも値が小さかろうがしっかり確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/59d48723-2aab-936b-73fb-f8cbaaf3810b.png)

### ■Mesh Viewer

RenderDocのSGP(スゴイポイント）としてもう一つ、`Mesh Viewer`なるものがあります。
入力ジオメトリとバーテックスシェーダーを通したあとのジオメトリをグリグリ見ることができます...最強かよ..

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/e9e1dd20-b5b2-3d14-244e-f49d504f6569.png)


#### インスタンス使ったメッシュ
インスタンシングを使って描画するオブジェクトもご覧の通り確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280075/353c062f-06b3-601a-af23-02cd0efc45f8.png)

#おわりに

RenderDoc、ポストプロセスとかをデバッグするのにすごく便利です。
ぜひWindowsユーザの方は使ってみてはいかがでしょうか！？