[UE4]RenderDocでシェーダーデバッグしてみよう

皆様、こんなスライドをご存知でしょうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/543c8c6f-ef27-e841-a93e-6ea8a4bf2c50.png)
https://www.slideshare.net/EpicGamesJapan/renderdoc

こちら、とあるRenderDoc好きのテクニカルアーティストが、
「アーティストの人にもRenderDocをぜひ触って欲しい！」と溢れんばかりの愛を振り撒いた珠玉の迷スライドなのですが、
その中で以下のようなページがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/415e55ec-b81d-6727-7e8d-fc4ec41af2a3.png)

そう、どうやらRenderDocは**「シェーダーデバッグ」**とやらができるらしいのですが、
時間の都合なのか、スライドの中では細かな説明がされてないのですね。

#####今回はその「RenderDocにおけるUE4シェーダーデバッグ」のやり方に関してご説明します。


ちなみにこちらの記事は、
「RenderDocにも結構慣れてきたし、もっと細かな機能を知れるなら知りたいなー」
という人のニーズに答える柔らかな記事となっております。

プロファイリング三度の飯より好きです的な方は以下のページへどうぞ。
https://renderdoc.org/docs/how/how_debug_shader.html


##どうやったらUE4でシェーダーデバッグできるの？
RenderDocでシェーダーデバッグを行う方法に関しては、
以下の神スライドでも紹介されています。
https://www.slideshare.net/EpicGamesJapan/cedec2017-ue4
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/66d8c44a-8539-6c08-4323-f0f23028c6d8.png)

はい、実はRenderDocでシェーダーデバッグを行うためにやらないといけないことは、
上のスライドでも書かれている通りたった2つだけです。
**・「ConsoleVariables.ini」の変更**
**・「-d3ddebug」つけての起動**

なんかこれだけ見ると簡単そうですね！
ではそれぞれどうすればいいのか柔らかく具体的にご説明させて頂きます。


##「ConsoleVariables.ini」を変更しよう
さてではまずは最初の一歩。
**・「ConsoleVariables.ini」の変更**
を行いましょう。

**「ConsoleVariables.ini」**は、
Engineフォルダ以下のConfigフォルダにいらっしゃいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/a6a8ae30-56c9-ec65-36d2-f7cd494906f8.png)

**「いや、まずEngineフォルダがわかんないんだけど…」**という方は、
「ViewOptions」から「Engine Content」を表示して頂いて、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/ba971c0c-b08d-c226-2e3f-370316a8f364.png)
「Show in Exploer」で「Engine Content」の場所を探して頂いたら、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/fc0589e2-96a5-a59e-9621-a9a5c6ff7e8f.png)
いま自分が起動しているEngineフォルダがどこにあるかわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/7dcf78db-ef7c-0192-851e-ade59fa41fd4.png)

場所さえわかればあとは簡単、
**「ConsoleVariables.ini」**はiniとかついてますけど所詮中身はテキストです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/541a22c3-127d-f275-b8a3-d9a2a6cce471.png)
メモ帳などで開いてやって、
**r.Shaders.Optimize=0**
**r.Shaders.KeepDebugInfo=1**
の文字列を探してあげて下さい。

そして無事見つかったら、
恐らく文字列の前についている**「;」**を消してあげて下さい。
**「;」はこの行を無効にする**、という印です。

そもそも文字列自体が見当たらないんだけど……、という方は、
なんとなく上の画像と同じようなとこに、
**r.Shaders.Optimize=0**
**r.Shaders.KeepDebugInfo=1**
を追加してあげて下さい。

そうすれば、
**・「ConsoleVariables.ini」の変更**
は完了です！簡単ですね！

ちなみに
**[[UE4]ConsoleVariables.iniの特殊性](https://qiita.com/EGJ-Takashi_Suzuki/items/07ef02bf6eb08cdc1664)**
こんな素晴らしい記事もありますので、
「ConsoleVariables.ini」が気になる方は是非読んでみて下さい。


##「-d3ddebug」の引数をつけてプロジェクトを起動しよう
さて、「ConsoleVariables.ini」の変更が終われば、
次は**「-d3ddebug」つけての起動**です。


引数をつけてのプロジェクト起動は色々な方法があるかとは思うのですが、
今回は**「batファイル」**を作成して起動してみましょう。

**「batファイル…？またなんか小難しそうなことを……」**と思われた方、ご安心下さい。
「batファイル」は所詮テキストです。そして今回書く文字列は以下の1行だけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/94f19cd5-44b4-2097-a684-344e2e23332f.png)

それぞれの意味はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/0b94013a-370e-c3af-7346-da5de0bf71d6.png)

**「エディタの場所」**は、Engineフォルダ以下、
**「Engine\Binaries\Win64\UE4Editor.exe」**にあります。
先程Engineフォルダがどこにあるかは調べましたよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/439110ca-7c8b-3f68-1659-1c6807aa115e.png)

**「シフト+右クリック」で「パスのコピー」**ができますので、こちらでコピペすると楽です。
https://www.ask-mswin.com/win10-right-click/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/1b221771-55c6-e5e3-b2ee-d4da19caead3.png)
同様に、シェーダーデバッグしたい**「プロジェクトのパス」**もコピペして、
**"あなたのエンジン置き場\Engine\Binaries\Win64\UE4Editor.exe" "あなたのプロジェクト置き場\プロジェクト名.uproject" -d3ddebug**
このようなテキストを作成し、拡張子をbatに変更すれば**「batファイル」**の完成です。
batファイルの置き場所はどこでも大丈夫です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/7b878e21-72ba-a2f8-9f4b-31827a8e95e1.png)

あとは**「batファイル」をダブルクリックして起動**すれば
シェーダーデバッグが可能な状態でプロジェクトが起動します！
簡単ですね！
![bat.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/b1aff910-d11c-002c-64bc-8c0882147a88.gif)

##シェーダーデバッグをやってみよう
プロジェクトが起動したら、あとは簡単です。

皆様、**「RenderDoc本体のインストール」**と**「RenderDocプラグインの有効化」**はもちろんお済みですね？
「なにそれ？」と思われた方は、今一度下のスライドを読み返してみて下さい。
https://www.slideshare.net/EpicGamesJapan/renderdoc
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/419c30a2-ad5f-5978-87c8-8c94db4b0404.png)
「RenderDoc本体のインストール」と「RenderDocプラグインの有効化」が問題なくされていれば、
以下のように画面の右上にRenderDocのボタンが現れているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/a70d4445-f738-c0b0-bc78-1445d7775014.png)
シェーダーデバッグしたい画面にして、望んだタイミングでRenderDocでキャプチャを行ってみて下さい。
![rend.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/caacf412-01d3-4b0f-1ea0-ce2e2499b302.gif)
立ち上がるRenderDocはいつもと変わらないように見えますが……、


シェーダーデバッグしたいピクセルを右クリックで指定して、
**「debug」**ボタンをポチッ！
![rend2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/e69873f6-be95-f035-fc82-55f5ff6819a2.gif)
なんと！普段は出てこないシェーダーを見ることができます！
やったー！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/7c22eb30-1481-e931-8d6c-311f7b2ddf2a.png)

##ステップ実行と変数デバッグ
表示されているシェーダーは、なんとステップ実行が可能です。
それどころか、行ったり来たりさえできちゃいます。
![rend3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/cfebb8bc-9286-6e12-3577-3b6dd2595a1a.gif)
そして、そのタイミングでのローカル変数やレジスタの状態を見ることも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/30d2915c-386d-aee0-4bd1-8ff8b2a5d61c.png)
最終的なアウトプットの値に至るまでに、どんな計算が行われているか一目瞭然です。
なんて便利なんでしょう！


また、どのusfファイルが使われているかもわかりますので、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/e77f9f75-05ce-8a53-5710-b389078a93e1.png)
元のusfファイルを辿って確認すれば、if分岐や、すでにシェーダーには残っていないコメント確認なども可能です。
なんて便利なんでしょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/4eebd0e1-8445-3897-83e1-4061bdfaac22.png)
ちなみにusfファイルは**「Engine\Shaders\Private」**以下にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/fb7a357d-6f3d-9387-f8d6-52313ef8180a.png)

##例えばこんなシェーダーデバッグ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/0c1a21e7-d96d-7812-209d-dfb2e26b30aa.png)
なぜか真っ赤なVelocity……。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/d2e660b4-3dd0-5062-1883-8ccffc76f6c0.png)
最終的に上書きされている……。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463796/33f4b0eb-6372-682a-8976-dc4a1363a619.png)
なるほどー。




RenderDocでUE4シェーダーデバッグを行う方法は以上です。
「なんかおかしいなー」という描画がされていれば、是非シェーダーデバッグをして原因を確認してみて下さい。
腹の立つコメントを見つけ出すことができるかもしれません。




おしまい。