Share via


逐步解說:偵錯因著色而產生的顯示錯誤

本逐步解說示範如何使用 Visual Studio 圖形診斷檢查因為著色器錯誤而著色錯誤的物件。

這個逐步解說會示範如何:

  • 檢查圖形記錄檔識別顯示問題的像素。

  • 使用 [圖形像素記錄] 視窗仔細檢查像素狀態。

  • 使用 [HLSL 偵錯工具] 檢查像素和頂點著色器。

情節

當端點著色器傳遞不正確或不完整訊息給像素著色器時,物件上通常會出現不正確的著色。

在這個情節中,您最近連同新的端點及像素著色器將物件一併加入至您的應用程式,以轉換該物件並賦予獨特外觀。 在測試期間執行應用程式時,會以全黑色產生物件。 使用圖形診斷,就可以將問題擷取至圖形記錄檔,讓您可以偵錯應用程式。 這個問題在應用程式中如下所示:

此物件是以不正確的色彩來呈現。

調查

使用圖形診斷工具,您可以載入圖形記錄檔檢查在測試期間,所擷取的框架。

檢查圖形記錄中的框架

  1. 在 Visual Studio 中,載入包含顯現遺漏模型之框架的圖形記錄。 新的圖形記錄文件視窗隨即出現在 Visual Studio。 在這個視窗的頂端有所選取框架的轉譯目標輸出。 下半部是 [框架清單],顯示每個擷取的框架為縮圖影像。

  2. 在 [框架清單] 中,選取物件沒有正確的外觀的框架。 更新呈現目標反映選取的框架。 在這個案例中,圖形記錄文件視窗如下所示:

    Visual Studio 中的圖形記錄文件。

在選取示範問題的框架後,您可以使用 [圖形像素歷史記錄] 視窗進行診斷。 [圖形像素歷史記錄] 視窗依時間先後順序排列顯示可能會對特定像素及其著色器效果的基本型別,以及他們對呈現目標的效果。

檢查像素

  1. 開啟 [圖形像素歷史記錄] 視窗。 在 [圖形診斷] 工具列上,選擇 [像素歷史記錄]。

  2. 選取要檢查的像素。 在圖形中記錄文件視窗中,選取其中一個不正確的色彩物件的像素:

    選取像素時會顯示關於其歷史記錄的資訊。

    更新 [圖形像素歷史記錄] 視窗,以反映選取的像素。 在這個情節中,[圖形像素歷史記錄] 視窗如下所示:

    像素歷史記錄顯示一個 DrawIndexed 事件。

    請注意,像素著色器的結果是完全不透明的黑色 (0, 0, 0, 1),而 [輸出合併] 已將此結果與像素的 [上一個] 色彩合併,使得 [結果] 也是完全不透明的黑色。

在您檢查著色不正確的像素而發現像素著色器輸出不是所需的色彩之後,您可以使用 HLSL 偵錯工具檢查像素著色器 (Pixel Shader),查明物件的色彩發生什麼狀況。 您可以使用 HLSL 偵錯工具在執行時檢查 HLSL 變數狀態、逐步執行 HLSL 程式碼,以及設定能協助您診斷問題的中斷點。

檢查像素著色器

  1. 開始偵錯像素著色器。 在 [圖形像素歷史記錄] 視窗中,於物件基本圖形下方 [像素著色器] 的旁邊,選擇 [開始偵錯] 按鈕。

  2. 在這個情節中,由於像素著色器才從端點著色器傳遞色彩,因此很容易觀測到像素著色器 (Pixel Shader) 不是問題的來源。

  3. 重設指標到 input.color。 請注意它的值是完全不透明的黑色 (0, 0, 0, 1)。

    "input" 的 "color" 成員未定義。

    在這個情節中,檢查顯示無效色彩可能是像素著色器不提供正確的色彩資訊在端點著色器的結果。

在您判定頂點著色器可能無法提供正確的資訊給像素著色器,下一步是檢查頂點著色器。

檢查端點著色器

  1. 開始偵錯端點著色器。 在 [圖形像素歷史記錄] 視窗中,於物件基本圖形下方 [端點著色器] 的旁邊,選擇 [開始偵錯] 按鈕。

  2. 找出端點著色器的輸出結構,這是像素著色器的輸入。 在此情節中,這個結構的名稱是 output。 檢查頂點著色器程式碼並注意 output 結構的 color 成員明確設為完全不透明的黑色,可能是因為您的偵錯工作。

  3. 確認色彩成員從輸入架構不會複製。 由於 output.color 的值設為完全不透明的黑色,在 output 結構中傳回之前,先確定, output 的值在上一行未正確初始化。 逐步執行頂點著色器程式碼,直到您到達設定 output.color 黑色的行,當您檢視 output.color時的值。 請注意 output.color 的值尚未初始化,直到它設定為黑色。 這會確認設定 output.color 黑色的程式碼應該修改,而不是刪除。

    "output.color" 的值從未初始化。

在您判斷轉譯問題的原因是頂點著色器不提供正確的色彩值給像素著色器 (Pixel Shader),您可以使用這項資訊來解決這個問題。 在這個案例中,您可以變更在端點著色器的下列程式碼修正

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

設為

output.color = input.color;

這個程式碼會從物件的端點傳遞未修改的端點色彩,更複雜的端點著色器可以在傳遞前修改色彩。 已更正的端點著色器程式碼應該會與以下相似:

修正過的端點著色器程式碼。

修正程式碼之後,重建並再次執行應用程式來確認轉譯問題已解決。

此物件是以正確的色彩來呈現。