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

このチュートリアルでは、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. color メンバーが入力構造体はコピーされないことを確認します。 output 構造体は戻る直前に output.color の値は完全に不透明な黒に設定されるため、output の値が前の行に正しく初期化されなかったことをお勧めします。 output.colorの値に見えますが、黒に output.color を設定する行に到達するまで頂点シェーダー コードをステップ実行します。 Black されるまで output.color の値が初期化されないことに注意してください。 これは、黒に output.color を設定するコード行を削除した場合、変更されることを確認します。

   

描画の問題の原因が、頂点シェーダーによってピクセル シェーダーの正しいカラー値が指定されないことを確認したら、問題を修復するには、この情報を使用できます。 このシナリオでは、頂点シェーダーに次のコードを変更することで修正できます。

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

から

output.color = input.color;

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

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