著色器設計工具

本文件說明如何使用 Visual Studio 著色器設計工具建立、修改和匯出稱為 著色器的自訂視覺效果。

即使您不懂 HLSL 程式設計，也可以使用著色器設計工具製作遊戲或應用程式的視覺效果。 若要在著色器設計工具中建立著色器，只要將它當成圖形一樣設計；也就是說，您可以加入至代表資料和作業的設計介面 節點，然後連接彼此以定義作業處理資料的方式。 在每個作業節點，提供截至該點的效果預覽，讓您以視覺化方式檢視其結果。 經過各節點流向最終節點 (表示著色器輸出) 的資料流程。

支援的格式

著色器設計工具支援這些著色器格式：

使用者入門

本節說明如何將 DGSL 著色器到您的 Visual Studio 專案並提供基本資訊可協助您開始使用。

將 DGSL 著色器到您的專案

1. 在 [方案總管] 中，開啟專案的捷徑功能表要將著色器至，然後選取 [加入]]，則 [新的項目。]。

2. 在 [加入新項目。] 對話方塊，請在 [安裝] 下方，選取 [圖形]，然後選取 [視覺化著色器圖形 (.dgsl)]。

3. 指定著色器檔案的 [名稱] 和您要建立它的 [位置] 。

4. 選擇 [加入] 按鈕。

預設著色器

每當您建立 DGSL 著色器，啟動為具有 [點的色彩。] 節點連接至 [最後的色彩] 節點的較小的著色器。 雖然這個著色器完成和工作，它不會執行。 因此，在建立運作的著色器的第一個步驟通常會刪除 [點的色彩。] 節點或 [最後的色彩] 節點不同它騰出空間給其他節點。

使用著色器設計工具

下列章節說明如何使用著色器設計工具與自訂著色器一起使用。

著色器設計工具的工具列

著色器設計工具列包含的命令能協助您使用 DGSL 著色器圖形。

影響 [著色器設計工具] 狀態的命令位於主要 Visual Studio 視窗的 [著色器設計工具編輯器模式] 工具列。 設計工具和命令位於著色器設計工具設計介面上的 [著色器設計工具] 工具列。

以下是 [著色器設計工具模式] 工具列：

此表描述 [著色器設計工具模式] 工具列上的項目，這些項目會依照出現順序左到右列出：

工具列項目	描述
選取	在圖形中啟用節點與邊緣的互動。 在此模式中，您可以選取節點並將其移動或刪除，而且可以建立邊緣或將其中斷。
平移	啟用著色器圖形相對於視窗框架的移動。 若要平移，請選取設計介面中的點並四處移動它。 在 [選取] 模式中，您可以按住 CTRL 暫時啟動 [全景] 模式。
縮放	啟用相對於視窗框架顯示或多或少的著色器圖形細節。 在 [縮放] 模式中，選取設計介面上的一點，然後左右移動以放大，或上下移動以縮小。 在 [選取] 模式中，您可以按住 CTRL 並使用滑鼠滾輪來縮放。
縮放至適當比例	在視窗框架中顯示完整的著色器圖形。
即時轉譯模式	啟用即時呈現時，Visual Studio 會重新繪製設計介面，即使沒有執行任何使用者動作也一樣。 當您處理隨著時間變更的著色器時，這個模式相當有用。
以圓球預覽	啟用時，會使用球體模型預覽著色器。 一次只能啟用一個預覽圖形。
以立方體預覽	啟用時，會使用立方體模型預覽著色器。 一次只能啟用一個預覽圖形。
以圓柱圖預覽	啟用時，會使用圓柱體模型預覽著色器。 一次只能啟用一個預覽圖形。
以圓錐圖預覽	啟用時，會使用圓錐模型預覽著色器。 一次只能啟用一個預覽圖形。
以茶壺預覽	啟用時，會使用茶壺模型預覽著色器。 一次只能啟用一個預覽圖形。
以平面預覽	啟用時，會使用平面模型預覽著色器。 一次只能啟用一個預覽圖形。
工具箱	或者，顯示或隱藏 [工具箱]。
屬性	或者，顯示或隱藏 [屬性] 視窗。
進階	包含進階命令和選項。 匯出 啟用以數種格式匯出著色器。 匯出成 將著色器匯出成 HLSL 原始程式碼或已編譯的著色器 Bytecode。 如需如何匯出著色器的詳細資訊，請參閱 HOW TO：匯出著色器。 圖形引擎 啟用選取用於顯示設計介面的轉譯器。 以 D3D11 呈現 使用 Direct3D 11 呈現著色器設計工具的設計介面。 以 D3D11WARP 呈現 使用 Direct3D 11 Windows Advanced Rasterization Platform (WARP) 呈現 [著色器編輯器] 設計介面。 檢視 啟用選取著色器設計工具的其他資訊。 Frame Rate 啟用時，會在設計介面的右上角顯示目前的播放速率。 畫面播放速率是每秒繪製的畫面數目。 當您啟用 [即時呈現模式] 選項時，這個選項就很有用。 提示 您可以選擇 [進階] 按鈕再次執行上一個命令。

與節點和連結一起使用

使用 [選取] 模式新增、移除、調整位置及設定節點。 以下說明如何執行這些基本作業：

在選取模式中執行基本作業

• 這個方式：

  • 若要將節點加入至圖表，請在 [工具箱] 中選取該節點，再將它移至設計介面。

  • 若要移除圖形中的節點，請選取該節點然後按下 [刪除]。

  • 若要重新定位節點，請選取它並將其移至新的位置。

  • 若要連接兩個節點，請將其中一個節點的輸出終端移至另一個節點的輸入終端。 只能連接具有相容型別的終端。 終端機之間的線條顯示連接。

  • 若要移除連接，請在其中一個連接端的捷徑功能表上選擇 [中斷連結]。

  • 若要設定節點的屬性，請選取該節點，然後在 [內容] 視窗中指定屬性的新值。

預覽著色器

為協助您了解著色器出現在應用程式中的方式，您可以設定效果預覽方式。 若要大致估計您的應用程式，您可以從數個要呈現的圖形中選擇一個、設定材質和其他材質參數、啟用以時間為基礎的效果動畫，並且從不同的角度檢查預覽。

圖形

著色器設計工具包含六個圖形：球體、立方體、圓柱體、圓錐體、茶壺和平面，您可以用於預覽您的著色器。 視著色器而定，某些圖形可能會提供更好的預覽。

選擇預覽圖形

• 在 [著色器設計模式] 工具列上，選擇您想要的圖形。

紋理和材質參數

許多著色器依賴材質 (Texture) 和材質 (Material) 屬性，為應用程式中的各種物件產生獨特外觀。 若要查看您的著色器在應用程式中看起來的樣子，您可以設定用於產生預覽的材質和材質屬性，使其符合您可能會在應用程式中使用的材質和參數。

將材質繫結至不同的材質暫存器，或是修改其他材質參數

1. 在 [選取] 模式中，選取設計介面上的空白區域。 這會導致 [內容] 視窗顯示全域著色器屬性。

2. 在 [屬性] 視窗中，為您要變更的材質和參數屬性指定新的值。

以下是您可以修改的著色器參數：

以時間為基礎的效果

某些著色器具有時間為主的元件以達成動畫的效果。 若要顯示實際效果，必須每秒鐘更新預覽數次。 根據預設，只有在著色器已變更時才會更新預覽。若要變更這個行為讓您檢查以時間為基礎的效果，您必須啟用即時轉譯。

啟用即時呈現

• 在 [著色器設計工具] 工具列上，選擇 [即時轉譯]。

檢查效果

許多著色器會受變數 (例如檢視角度或定向光源) 的影響。 要檢查效果如何隨著這些變數改變，您可以自由旋轉預覽圖形，並且觀察著色器的行為。

若要旋轉圖形

• 請按住 Alt，然後選取設計介面上的任何點並將之移動。

匯出著色器

在應用程式中使用著色器之前，您必須先將它匯出為 DirectX 了解的格式。

您可以將著色器匯出成 HLSL 原始程式碼或編譯的著色器 Bytecode。 HLSL 原始程式碼已匯出至具有 .hlsl 副檔名的文字檔。 著色器 Bytecode 可以被匯出為副檔名為 .cso 的未經處理的二進位檔案，或匯出為用來將著色器 Bytecode 載入至陣列 的C++ 標頭檔 (.h)。

如需如何匯出著色器的詳細資訊，請參閱 HOW TO：匯出著色器。

鍵盤快速鍵

相關主題