<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>UnityのShaderLabをデバッグしたく調査したときの備忘録。<br>
ほとんど<a href="https://www.natsuneko.blog/entry/2020/05/24/use-visual-studio-debugger-in-shader-development" target="_blank" rel="nofollow noopener noreferrer">こちらのサイト</a>の内容。<br>
ステップ実行について触れていなかったのでそこについて方法記載。</p>
<h1 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h1>
<table>
<thead>
<tr>
<th>ツール</th>
</tr>
</thead>
<tbody>
<tr>
<td>Microsoft Visual Studio Community 2022</td>
</tr>
<tr>
<td>Unity 2019.4.31f1</td>
</tr>
</tbody>
</table>
<h1 id="%E6%BA%96%E5%82%99(unity%E5%81%B4)">
<a class="header-anchor-link" href="#%E6%BA%96%E5%82%99(unity%E5%81%B4)" aria-hidden="true"></a> 準備(Unity側)</h1>
<ol>
<li>デバッグするシェーダは検索しやすい名前にする</li>
</ol>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">名前</span></div>
<pre><code>Shader "PandaTest/PandaUnlit"
{
	...
}
</code></pre>
</div><ol start="2">
<li>デバッグするシェーダーにデバッグ用コードを入れる</li>
</ol>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">デバッグ用コード</span></div>
<pre><code>Pass{
	CGPROGRAM
	#pragma enable_d3d11_debug_symbols
	...
	ENDCG
}
</code></pre>
</div><ol start="3">
<li>Unityアプリのビルド<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--2l5Cxuv6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/e75c6ccadbcbdd1d9c8ed74f.png%3Fsha%3D8ef4d4c3c217cdbb77cd2efef4e67b6badb2d3c0" alt width="600" loading="lazy" class="md-img">
</li>
</ol>
<h1 id="%E6%BA%96%E5%82%99(visualstudio%E5%81%B4)">
<a class="header-anchor-link" href="#%E6%BA%96%E5%82%99(visualstudio%E5%81%B4)" aria-hidden="true"></a> 準備(VisualStudio側)</h1>
<ol>
<li>プロジェクト作成とデバッグ設定<br>
以下に従う<br>
<a href="https://docs.unity3d.com/2019.3/Documentation/Manual/SL-DebuggingD3D11ShadersWithVS.html" target="_blank" rel="nofollow noopener noreferrer">https://docs.unity3d.com/2019.3/Documentation/Manual/SL-DebuggingD3D11ShadersWithVS.html</a>
</li>
</ol>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>自環境ではUnity.exe指定だとデバッグできなかった</p>
</div></aside>
<h1 id="%E3%83%87%E3%83%90%E3%83%83%E3%82%B0">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0" aria-hidden="true"></a> デバッグ</h1>
<ol>
<li>
<p>開始<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--XJcRN3Ba--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8d6b93f86afff45eab90340c.png%3Fsha%3De1b99970b1c7a2833f3edd934f38d0014713ed92" alt width="300" loading="lazy" class="md-img"></p>
</li>
<li>
<p>フレームキャプチャ<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--qpMvlsqb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/901bc215848cb69676c3a639.png%3Fsha%3D4b98d3a34becde2eee6b72fcae2b78665405b689" alt width="300" loading="lazy" class="md-img"></p>
</li>
<li>
<p>フレーム選択<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--y1A-hiFr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fd77a83f8af8c66411d6901d.png%3Fsha%3D92e5e0804675906e4ddaa07a2a0d88fd23331927" alt width="300" loading="lazy" class="md-img"><br>
新規ウィンドウが表示される<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--vCGKHypz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/43705df3be9788a2e8a57a3a.png%3Fsha%3D02061ebf79354164cf31b318950a88f4e994b265" alt width="300" loading="lazy" class="md-img"></p>
</li>
<li>
<p>各種画面表示<br>
<code>イベント一覧</code>、<code>ピクセル履歴</code>、<code>パイプラインステージ</code>画面を表示する<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Nn5_E-SF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/bd81b74457d36a2091f7c5f8.png%3Fsha%3D7906c6dbf8fb625eec16531424a0e3ad097d71d1" alt width="300" loading="lazy" class="md-img"></p>
</li>
<li>
<p>シェーダー特定<br>
<code>イベント一覧</code>で指定したシェーダー名で検索<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--gYRdiTC5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/02580a7d4aeaff5b77f2647a.png%3Fsha%3D009d2927aa8856d13809ea3470677532c4617768" alt width="300" loading="lazy" class="md-img"></p>
</li>
<li>
<p>イベント指定<br>
オブジェクト:x-&gt;DrawIndexedをクリック</p>
</li>
</ol>
<h2 id="%E9%A0%82%E7%82%B9%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC(vertex%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">
<a class="header-anchor-link" href="#%E9%A0%82%E7%82%B9%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC(vertex%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" aria-hidden="true"></a> 頂点シェーダー(vertexシェーダー)デバッグ</h2>
<p><code>パイプラインステージ</code>の頂点シェーダーに各IDXに対する再生ボタンが出るのでクリックしたらシェーダーコードが表示され、ステップ実行デバッグできる。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--jtNxHVCO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/5f3ca0d2e2808d68bcf7b15a.png%3Fsha%3D856433e5ebc742167dc95e16cd64ae91bb78d1bb" alt width="600" loading="lazy" class="md-img"></p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--3auNZvH7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8ecc8b406b696c9746944942.png%3Fsha%3D19a51d620a952974c97b431df4dc9023b3b53fe7" alt width="600" loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>ピクセル履歴からも再生(デバッグ)できる<br>
全頂点一覧から選択したい場合と、特定のピクセルに関与する頂点から選択したい場合で使い分け</p>
</div></aside>
<h2 id="%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC(fragment%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">
<a class="header-anchor-link" href="#%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC(fragment%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" aria-hidden="true"></a> ピクセルシェーダー(fragmentシェーダー)デバッグ</h2>
<ol>
<li>ピクセル選択<br>
レンダーターゲットから描画したいピクセルをクリック<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--50S9RF9U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/74f9c73e8be46fac7dd74e91.png%3Fsha%3Dd9b49255a9244f7af01ff88ad839ce937867b0b5" alt width="600" loading="lazy" class="md-img">
</li>
</ol>
<p><code>ピクセル履歴</code>に情報が表示される<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--LU247DbY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/618f75f6f3c48871722df194.png%3Fsha%3D360963fa79995e3d0ef2cd35d7a546480673d362" alt width="300" loading="lazy" class="md-img"></p>
<ol start="2">
<li>シェーダー選択<br>
DrawIndexed =&gt; 三角形[x] -&gt; ピクセルシェーダ―の再生をクリック<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--9LVMUY1E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b30817c4fae0e8e38adc7f5c.png%3Fsha%3D949725109985a19873350538bcd035a9a984b9df" alt width="300" loading="lazy" class="md-img">
</li>
</ol>
<p>シェーダーコードが表示され、ステップ実行でデバッグできる。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--csNGiHQ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/e24f17d84b366393d74f824b.png%3Fsha%3Db694d316465f057212adc99f1a93d2d90bb2f377" alt width="600" loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>パイプラインステージのピクセルシェーダーからも再生(デバッグ)できる。(こっちはピクセル選択してなくてもデバッグされる。どこのピクセルがデバッグされてるんだろ。)</p>
</div></aside>
<h2 id="%E3%82%B8%E3%82%AA%E3%83%A1%E3%83%88%E3%83%AA%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">
<a class="header-anchor-link" href="#%E3%82%B8%E3%82%AA%E3%83%A1%E3%83%88%E3%83%AA%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" aria-hidden="true"></a> ジオメトリシェーダーデバッグ</h2>
<p>ジオメトリシェーダー有のシェーダーであれば<code>イベント一覧</code>、<code>パイプラインステージ</code>、<code>ピクセル履歴</code>にジオメトリシェーダーの項目増えているのでそこから同様にデバッグできる<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--9xBvXUAL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/69adea69ed3a7a8deef3e90a.png%3Fsha%3D91ed371eb8421f3008efa6532a93f136de5b2efc" alt loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>同じ三角形に属するVTXであればどれを再生(デバッグ)しても同じ</p>
</div></aside>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--4-vLg6Qo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/f151c3c2094cb79f794d1baf.png%3Fsha%3D31cd2ff42a016723f625cf191bc1f8b26b14678c" alt loading="lazy" class="md-img"></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>input[1]/input[2]のウォッチができなかったりinput[0]の値が途中で変わったりするのでくせはありそう</p>
</div></aside>
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__765ae854577bb" src="https://embed.zenn.studio/card#zenn-embedded__765ae854577bb" data-content="https%3A%2F%2Fwww.natsuneko.blog%2Fentry%2F2020%2F05%2F24%2Fuse-visual-studio-debugger-in-shader-development" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.natsuneko.blog/entry/2020/05/24/use-visual-studio-debugger-in-shader-development" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.natsuneko.blog/entry/2020/05/24/use-visual-studio-debugger-in-shader-development</a></p>


Unity ShaderLabのVisualStudioデバッグ

頂点シェーダー(vertexシェーダー)デバッグ

ピクセルシェーダー(fragmentシェーダー)デバッグ

ジオメトリシェーダーデバッグ

Discussion