[UE4]RenderDoc（PIXも！）でシェーダーのアセンブラを読む方法

- 本記事に関して
    - 確認バージョン: UE4.24.0
    - この記事は[Unreal Engine 4 (UE4) Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ue4)の記事です。
        - AdventCalendarとして本日同時に下記もアップしております
            - [UE4]自分のマテリアル組術
                - https://qiita.com/com04/items/b4c54b9e52a8a8aff43b
            - [UE4]BPを作る時に留意している設定
                - https://qiita.com/com04/items/e10f697c2adf32175488
            - [UE4]利便性を上げるちょっとしたエンジン改造
                - https://qiita.com/com04/items/3fe5e66cc3c1548011ce


描画結果がおかしくなった時、最適化してみた結果を見る時、酒の肴に読みたい時等々、シェーダーアセンブラを読む機会は偶に出てくると思います。
UE4+RenderDocでは簡単に今描画しているシェーダーのアセンブラを読むことが出来ます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">巷で話題になってるpow。powに2を定数で与える。<br>HLSLは普通にPow。アセンブラ化するとBase*Baseの掛け算に最適化される <a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> <a href="https://t.co/fmpx7bpzBz">pic.twitter.com/fmpx7bpzBz</a></p>&mdash; com04 (@com04) <a href="https://twitter.com/com04/status/1100024823462281217?ref_src=twsrc%5Etfw">February 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ターゲットによって変わるのでRenderDoc上のアセンブラを過信し過ぎるのも駄目だけど
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">怖い繋ぎ方。HLSLコードは機械的な展開だけどアセンブラレベルでは最適化で消えてる。 <a href="https://t.co/4UYmfuexsh">pic.twitter.com/4UYmfuexsh</a></p>&mdash; com04 (@com04) <a href="https://twitter.com/com04/status/1094065890037878784?ref_src=twsrc%5Etfw">February 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
UE4+RenderDocに関してはEpic Games Japanの[Saito](https://qiita.com/EGJ-Osamu_Saito)さんが素晴らしい記事を書いてくれています
（若干のネタ被り）

- [UE4]RenderDocでシェーダーデバッグしてみよう
    - https://qiita.com/EGJ-Osamu_Saito/items/17c367cee4dbc3824987

# RenderDocキャプチャーまで
各所で解説されていますのでざっくり書きます

1. プラグインブラウザ
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/2f38b9c7-74b6-3b16-7809-c6b7af8ad0a8.png)
2.  「RenderDoc」で検索、「Enabled」にチェック、「Restart Now」でエディター再起動
    -  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/02d2c80f-0442-4df3-944a-3c93657e43a1.png)
3. Viewport右上のボタンクリック
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/28c81842-b76a-4db7-a52a-c2b6322fb6a5.png)
4. RenderDocが立ち上がる

# RenderDocキャプチャーからシェーダーアセンブラを開くまで
1. 左側の「EventBrowser」で確認したい描画パスを選択します
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/c53d7f5d-a5c0-bb9c-9ab2-44f394a5ecea.png)
        - よく見るのはBasePassやPostProcessingの中でしょうか 
2. 選択したら、「Pipeline State」タブ→「VS」(VertexShader)か「PS」(PixelShader)→その下の「→View」ボタン
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/c1328f49-6d20-0a68-102e-7461ef9c0901.png)
3. そのシェーダーのアセンブラコード！
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/1fdf73f7-5d19-f26d-c0f2-b552776bbece.png)
4. 差分とかを見たい時はテキストエディタ等に貼り付けてDiffを取ったりしています。
5. ピクセルデバッグを行いたい場合は、下記と同様で「Debug」ボタンを押せば行えます
    - [[UE4]RenderDocでシェーダーデバッグしてみよう - シェーダーデバッグをやってみよう](https://qiita.com/EGJ-Osamu_Saito/items/17c367cee4dbc3824987#%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/044712a4-269f-a6ef-927e-4e2cb1fb588a.png)



ちなみに、マテリアルのInstructionsは、このシェーダーの行数になります。命令数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/935a092b-c5b3-d9ab-0383-ca27fcca982e.png)


# PIXキャプチャーまで
（なんで[PIX](https://devblogs.microsoft.com/pix/tag/release/)？）
（個人的に見やすさではRenderDocより好きです。パッケージ化した後前提で手軽さ無いですけど……）
（あとちょっと使う機会があったのでメモ代わりに）

1. プロジェクトでパッケージを作ります。PC版はWin64で作ります
2. 「Select Target Process」で「Launch Win32」でパス設定、コマンド引数に「-windowed -dx12」
3. 「Launch For GPU Capture」がONになっているのを確認して「Launch」ボタン
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/2ffe742f-3762-6ebe-bb47-5bcdf61c59bf.png)
4. パッケージ化したプロジェクトが立ち上がりますので、GPUキャプチャーしたいタイミングで先程の下部にある「GPU Capture」ボタン
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/cfc7bbe8-709b-c03f-0331-24ae2317b7d1.png)
5. キャプチャーした絵が出てくるのでダブルクリック
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/4fe239bd-02dc-e32b-b736-2aa970f2a5d5.png)

# PIXでアセンブラを開くまで
1. 「Pipeline」タブを開いて「Click here to start analysis」 をクリックします
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/bd30c58c-1500-38ca-2d0a-cd4d1c16ce00.png)
2. 起動していたプロジェクトが終了して、解析モードに入ります
3. 「Events」タブから調べたいパスを選択すると下部の「Pipeline」タブに情報が出ます。Shaderをクリックして
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/bc174091-c6fc-38d2-bc0e-e847b4f0ac52.png)
4. 右にある「DXBC」をクリックするとアセンブラコード！
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58518/e0966b42-2e07-9755-bfde-cae357e5dedc.png)

# 取った後どうするの？
デバッグでしたらそのままピクセルデバッガで追いかけたりします。
特に 0 で div するのとか注意して見てます。
最適化でしたら、何か負荷高いけど一杯テクスチャをsampleしていないかとか、[branch] の確認とかします。
後はシェーダーコンパイラの挙動確認とかを見たりします。
  　
  　
  　
  　
（とはいえ僕は流石にデバッグ以外では普段ここまで調べて書かないです……ここ気にする前に全体をプロファイルしましょう）

- → Winter Crown WORKS様、ソレイユ様の素晴らしいスライド
    - 60fpsアクションを実現する秘訣を伝授 解析編
        - https://www.slideshare.net/EpicGamesJapan/ue4-festeast2019-60fpsanalysis

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">酒の肴にアセンブラ眺めてただけで最適化フェイズじゃ滅多にやらないです</p>&mdash; com04 (@com04) <a href="https://twitter.com/com04/status/1100180203555278848?ref_src=twsrc%5Etfw">February 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>