チュートリアル: 網かけによるレンダリング エラーのデバッグ

このチュートリアルでは、Visual Studio のグラフィックス診断を使用して、シェーダーのバグが原因で正しくない色が指定されたオブジェクトを調べる方法を示します。

このチュートリアルでは、次の方法を示します。

• 問題を示すピクセルを識別するには、グラフィックスのログのドキュメントを参照してください。

• [グラフィックス ピクセル履歴] ウィンドウを使用して、ピクセルの状態をより詳しく調査します。

• HLSL デバッガーを使用して、ピクセルと頂点シェーダーを調査します。

シナリオ

オブジェクトに正しくない色が指定される問題は、一般的に、頂点シェーダーからピクセル シェーダーに渡される情報が正しくないまたは不完全な場合に発生します。

このシナリオでは、アプリケーションにオブジェクトとそれを変換する新しい頂点シェーダーとピクセル シェーダーを新しく追加して、オブジェクトに独自の外観を設定しています。テスト中にアプリケーションを実行すると、オブジェクトは黒一色で表示されます。グラフィックス診断を使用すると、グラフィックス ログに問題をキャプチャして、アプリケーションのデバッグを実行できます。問題は、アプリケーションでは次のように見えます。

調査

グラフィックスの診断ツールを使用して、テスト中にキャプチャ フレームを検査するグラフィックスのログのドキュメントを読み込むことができます。

グラフィックス ログのフレームを調査するには

1. Visual Studio で、モデルの欠落を表すフレームを含むグラフィックス ログを読み込みます。新しいグラフィックのログのドキュメント ウィンドウは Visual Studioに表示されます。このウィンドウの上部で選択したフレームのレンダー ターゲットの出力はになります。下部の [フレーム一覧] には、キャプチャされた各フレームがサムネイル イメージとして表示されます。

2. [フレーム一覧] で、オブジェクトが正しく表示されていないフレームを選択します。レンダー ターゲットが更新され、選択したフレームが反映されます。このシナリオでは、グラフィックのログのドキュメント ウィンドウは次のようになります。:

   

問題を示しているフレームを選択したら、[グラフィックス ピクセル履歴] を使用してそのフレームを診断できます。[グラフィックス ピクセル履歴] ウィンドウに、特定のピクセルに影響を与えていた可能性があるプリミティブとそのシェーダー、およびそれらがレンダー ターゲットにどのような影響を与えていたかが、時系列順に表示されます。

ピクセルを調査するには

1. [グラフィックス ピクセル履歴] ウィンドウを開きます。[グラフィックス診断] ツール バーで、[ピクセル履歴] を選択します。

2. 調査するピクセルを選択します。グラフィックスのドキュメント ウィンドウを選択します。不適切なピクセルの色指定されたオブジェクトの 1 つがを記録する:

   

   [グラフィックス ピクセル履歴] ウィンドウが更新され、選択したピクセルが反映されます。このシナリオでは、[グラフィックス ピクセル履歴] ウィンドウは次のように表示されます。

   

   ピクセル シェーダーの結果は完全に不透明な黒 (0, 0, 0, 1) で表示されます。また、[出力マージャー] によってこれと [前] のピクセルの色が結合されるため、[結果] も完全に不透明な黒で表示されます。

正しくない色が指定されたピクセルを調べて、ピクセル シェーダーの出力が予期していた色ではなかった場合は、HLSL デバッガーを使用してピクセル シェーダーを調べて、オブジェクトの色に何が起こったのかを確認できます。HLSL デバッガーを使用して、実行中の HLSL 変数の状態を調べ、HLSL コードを順を追って確認し、ブレークポイントを設定することによって、問題の診断に役立てることができます。

ピクセル シェーダーを調査するには

1. ピクセル シェーダーのデバッグを開始します。[グラフィックス ピクセル履歴] ウィンドウで、オブジェクトのプリミティブの下、[ピクセル シェーダー] の横にある [デバッグ開始] をクリックします。

2. このシナリオでは、ピクセル シェーダーは頂点シェーダーの色を渡すのみであるため、ピクセル シェーダーが問題の原因ではないことが容易に確認できます。

3. input.color にポインターを置きます。値が完全に不透明な黒 (0、0、0、1) であることに注意してください。

   

   このシナリオでは、チェックが不適切な色が、ピクセル シェーダーが操作できるように、右側の色の情報を提供する頂点シェーダーの結果であることを明確にします。

頂点シェーダーは、ピクセル シェーダーに、右の情報を提供していないことを確認したら、次の手順では、頂点シェーダーをチェックすることです。

頂点シェーダーを調査するには

1. 頂点シェーダーのデバッグを開始します。[グラフィックス ピクセル履歴] ウィンドウで、オブジェクトのプリミティブの下、[頂点シェーダー] の横にある [デバッグ開始] をクリックします。

2. 頂点シェーダーの出力構造体 (ピクセル シェーダーに入力される部分) を探します。このシナリオでは、この構造体の名前は output です。頂点シェーダー コードを調べて、のユーザーまたはの結果、デバッグの工数に output の構造体の color のメンバーが完全に不透明な黒に明示的に設定されたことを確認します。

3. 色のメンバーが入力構造からコピーしないことを確認します。output の構造から制御が戻る直前に output.color の値は完全に不透明な黒に設定されているため、output の値が前の行に正しく初期化することをお勧めします。output.colorの値に見えますが、黒にその行セット output.color に到達するまで頂点シェーダー コードをステップ実行します。黒設定します output.color までの値が初期化ことに注意してください。この黒に output.color 設定を変更する必要があるコード行が削除されるのではなく、確認します。

   

レンダリングの問題の原因は、頂点シェーダーは、ピクセル シェーダーに適切な色の値を指定することを確認したら、問題を解決するには、この情報を使用できます。このシナリオでは、頂点シェーダーの次のコードを変更して、その修正できます。

output.color = float3(0.0f, 0.0f, 0.0f);

これを次のように書き換えます。

output.color = input.color;

このコードは、オブジェクトの頂点から頂点色を修正なしで渡します。より複雑な頂点シェーダーでは、渡す前に色が修正される場合があります。修正された頂点シェーダー コードは次のようになります。

コードを修正したら、それを再度ビルドし、再度アプリケーションを実行してレンダリングの問題が解決されたことを確認します。