LoginSignup
16
10

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-22

皆様、こんなスライドをご存知でしょうか?
image.png
https://www.slideshare.net/EpicGamesJapan/renderdoc

こちら、とあるRenderDoc好きのテクニカルアーティストが、
「アーティストの人にもRenderDocをぜひ触って欲しい!」と溢れんばかりの愛を振り撒いた珠玉の迷スライドなのですが、
その中で以下のようなページがあります。
image.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

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

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

「ConsoleVariables.ini」を変更しよう

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

「ConsoleVariables.ini」は、
Engineフォルダ以下のConfigフォルダにいらっしゃいます。
image.png

「いや、まずEngineフォルダがわかんないんだけど…」という方は、
「ViewOptions」から「Engine Content」を表示して頂いて、
image.png
「Show in Exploer」で「Engine Content」の場所を探して頂いたら、
image.png
いま自分が起動しているEngineフォルダがどこにあるかわかります。
image.png

場所さえわかればあとは簡単、
「ConsoleVariables.ini」はiniとかついてますけど所詮中身はテキストです。
image.png
メモ帳などで開いてやって、
r.Shaders.Optimize=0
r.Shaders.KeepDebugInfo=1
の文字列を探してあげて下さい。

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

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

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

ちなみに
[UE4]ConsoleVariables.iniの特殊性
こんな素晴らしい記事もありますので、
「ConsoleVariables.ini」が気になる方は是非読んでみて下さい。

「-d3ddebug」の引数をつけてプロジェクトを起動しよう

さて、「ConsoleVariables.ini」の変更が終われば、
次は「-d3ddebug」つけての起動です。

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

「batファイル…?またなんか小難しそうなことを……」と思われた方、ご安心下さい。
「batファイル」は所詮テキストです。そして今回書く文字列は以下の1行だけです。
image.png

それぞれの意味はこんな感じです。
image.png

「エディタの場所」は、Engineフォルダ以下、
「Engine\Binaries\Win64\UE4Editor.exe」にあります。
先程Engineフォルダがどこにあるかは調べましたよね。
image.png

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

image.png

あとは「batファイル」をダブルクリックして起動すれば
シェーダーデバッグが可能な状態でプロジェクトが起動します!
簡単ですね!
bat.gif

シェーダーデバッグをやってみよう

プロジェクトが起動したら、あとは簡単です。

皆様、「RenderDoc本体のインストール」「RenderDocプラグインの有効化」はもちろんお済みですね?
「なにそれ?」と思われた方は、今一度下のスライドを読み返してみて下さい。
https://www.slideshare.net/EpicGamesJapan/renderdoc
image.png
「RenderDoc本体のインストール」と「RenderDocプラグインの有効化」が問題なくされていれば、
以下のように画面の右上にRenderDocのボタンが現れているはずです。
image.png
シェーダーデバッグしたい画面にして、望んだタイミングでRenderDocでキャプチャを行ってみて下さい。
rend.gif
立ち上がるRenderDocはいつもと変わらないように見えますが……、

シェーダーデバッグしたいピクセルを右クリックで指定して、
「debug」ボタンをポチッ!
rend2.gif
なんと!普段は出てこないシェーダーを見ることができます!
やったー!
image.png

ステップ実行と変数デバッグ

表示されているシェーダーは、なんとステップ実行が可能です。
それどころか、行ったり来たりさえできちゃいます。
rend3.gif
そして、そのタイミングでのローカル変数やレジスタの状態を見ることも可能です。
image.png
最終的なアウトプットの値に至るまでに、どんな計算が行われているか一目瞭然です。
なんて便利なんでしょう!

また、どのusfファイルが使われているかもわかりますので、
image.png
元のusfファイルを辿って確認すれば、if分岐や、すでにシェーダーには残っていないコメント確認なども可能です。
なんて便利なんでしょう!
image.png
ちなみにusfファイルは「Engine\Shaders\Private」以下にあります。
image.png

例えばこんなシェーダーデバッグ

image.png
なぜか真っ赤なVelocity……。
image.png
最終的に上書きされている……。
image.png
なるほどー。

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

おしまい。

16
10
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
10