著色器設計工具

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

即使您不懂高階著色器語言 (HLSL) 程式設計，您也可以使用 [著色器設計工具] 來為您的遊戲或應用程式建立自訂的視覺效果。 若要在 [著色器設計工具] 中建立著色器，您要將它配置成圖形。 也就是說，您要加入代表資料和作業的設計介面「節點」，然後彼此連接以定義作業如何處理資料。 在每個作業節點，提供到該點為止的效果預覽，讓您將結果視覺化。 朝最後節點流經各節點的資料，代表著色器的輸出。

支援的格式

[著色器設計工具] 支援下列著色器格式︰

格式名稱	副檔名	支援的作業 (檢視、編輯、匯出)
有向圖著色器語言	.dgsl	檢視、編輯
HLSL 著色器 (原始程式碼)	.hlsl	匯出
HLSL 著色器 (位元組程式碼)	.cso	匯出
C++ 標頭 (HLSL 位元組程式碼陣列)	.h	匯出

開始使用

本節說明如何將 DGSL 著色器加入 Visual Studio C++ 專案，並提供開始使用所需的基本資訊。

注意

只有 C++ 專案才支援自動建立著色器圖形 (.dgsl 檔案) 等圖形項目的整合。

將 DGSL 著色器加入專案

1. 請確定您已經安裝處理圖形所需的 Visual Studio 元件。 該元件稱為影像與 3D 模型編輯器。

   若要安裝它，請開啟 [Visual Studio 安裝程式] 並選取功能表列上的 [工具]>[取得工具與功能]，然後選取 [個別元件] 索引標籤。選取 [遊戲與圖形] 底下的 [影像與 3D 模型編輯器]，然後選取 [修改]。

   

2. 在 [方案總管] 中，開啟您想要在其中新增著色器之 C++ 專案的捷徑功能表，然後選擇 [新增]>[新增項目]。

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

   注意

   如果您沒有在 [新增項目] 對話方塊中看到 [圖形] 類別，但是您已經安裝 [影像與 3D 模型編輯器] 元件，則您的專案類型不支援圖形項目。

4. 指定著色器檔案的 [名稱]，以及您要將其建立的 [位置]。

5. 選擇 [ 加入 ] 按鈕。

預設著色器

您每次建立的 DGSL 著色器，一開始都是最精簡的著色器，只將「點色彩」節點連接到「完稿色彩」節點。 雖然這是完整且可正常運作的著色器，但能做的事不多。 因此，建立實用著色器的第一個步驟通常是刪除「點色彩」節點，或和「完稿色彩」中斷連接，以騰出空間給其他節點使用。

使用著色器設計工具

下列各節說明如何使用著色器設計工具來使用自訂著色器。

著色器設計工具的工具列

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

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

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

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

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

提示

您可以選擇 [進階] 按鈕，再次執行上一個命令。

使用節點與連線

使用 [選取]模式來新增、移除、重新置放、連接和設定節點。 以下為執行這些基本作業的方式︰

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

• 方法如下：

  • 若要將節點加入圖形，請在 [工具箱] 中選取節點，然後將其移至設計介面。

  • 若要移除圖形中的節點，請選取該節點，然後按 Delete 鍵。

  • 若要重新置放節點，請選取該節點，然後移至新位置。

  • 若要將兩個節點連接，請將節點的輸出端點移至另一節點的輸入端點。 只能和有相容類型的端點連接。 端點之間會以線條表示連接。

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

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

預覽著色器

為了幫助您了解著色器會如何顯示在應用程式中，您可以設定效果的預覽方式。 若要模擬應用程式，您可以從數種圖形中擇一轉譯、設定紋理和其他材質參數、啟用以時間為基礎的效果動畫，並從不同角度檢查預覽。

圖形

著色器設計工具包含圓球、立方體、圓柱體、圓錐體、茶壺及平面等六個圖形，您可以用來預覽著色器。 根據著色器而定，特定圖形可提供您更好的預覽。

若要選擇預覽圖形，請在 [著色器設計工具模式] 工具列上，選擇您要的圖形。

紋理和材質參數

許多著色器依賴紋理和材質屬性，產生應用程式中每一種物件的特有外觀。 若要查看著色器在應用程式中的外觀，您可以將用來轉譯預覽的紋理和材質屬性，設定為符合您可能會在應用程式中使用的紋理和參數。

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

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

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

下表顯示您可以修改的著色器參數：

參數	屬性
紋理 1 - 紋理 8	存取權：[公用] 允許從模型編輯器設定此屬性，否則為 [私用]。 檔名：與這個材質暫存器相關聯的材質檔案完整路徑。
材質環境	存取權：[公用] 允許從模型編輯器設定此屬性，否則為 [私用]。 值︰目前像素的擴散色彩，由間接或環境光源造成。
材質擴散	存取權：[公用] 允許從模型編輯器設定此屬性，否則為 [私用]。 值：色彩，描述目前像素如何使直接光源擴散。
材質放射	存取權：[公用] 允許從模型編輯器設定此屬性，否則為 [私用]。 值：目前像素的色彩比重，由自行提供的光源造成。
材質反射	存取權：[公用] 允許從模型編輯器設定此屬性，否則為 [私用]。 值：色彩，描述目前像素如何使直接光源反射。
材質光澤度	存取權：[公用] 允許從模型編輯器設定此屬性，否則為 [私用]。 值：指數，定義目前像素上反射亮部的濃度。

以時間為基礎的效果

某些著色器有以時間為基礎的元件會以動畫顯示效果。 為了讓效果看起來在動，必須每秒鐘更新預覽數次。 根據預設，只有在變更著色器時，才會更新預覽。若要變更此行為，以便檢視以時間為基礎的效果，您必須啟用即時轉譯。

若要啟用即時轉譯，請在 [著色器設計工具] 工具列上，選擇 [即時轉譯]。

檢查效果

許多著色器都會受變數影響，例如檢視角度或定向光源。 若要查看效果在這些變數變更時如何回應，您可以隨意地旋轉預覽圖形，並觀察著色器的行為變化。

若要旋轉圖形，請按住 Alt 鍵，然後選取設計介面上的任意點後移動。

匯出著色器

您必須先以 DirectX 了解的格式匯出著色器，然後才能用於您的應用程式。

您可以將著色器匯出為 HLSL 原始程式碼或編譯過的位元組程式碼。 HLSL 原始程式碼會匯出成副檔名為 .hlsl 文字檔。 著色器位元組程式碼可以匯出成副檔名為 .cso 的未經處理二進位檔案，或匯出成可將著色器位元組程式碼編碼成陣列的 C++ 標頭 (.h) 檔。

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

鍵盤快速鍵

Command	鍵盤快速鍵
切換至 [選取] 模式	Ctrl+G、Ctrl+Q S
切換到 [縮放] 模式	Ctrl+G、Ctrl+Z Z
切換到 [移動瀏覽] 模式	Ctrl+G、Ctrl+P K
全選	Ctrl+A
刪除目前選取範圍	刪除
取消目前的選取範圍	逸出 (Esc)
放大	Ctrl+滑鼠滾輪向前捲動 加號 (+)
縮小	Ctrl+滑鼠滾輪往後捲動 減號 (-)
向上移動瀏覽設計介面	滑鼠滾輪往後捲動 PageDown
向下移動瀏覽設計介面	滑鼠滾輪往前捲動 PageUp
向左移動瀏覽設計介面	Shift+滑鼠滾輪往後捲動 滑鼠滾輪向左捲動 Shift+PageDown
向右移動瀏覽設計介面	Shift+滑鼠滾輪往前捲動 滑鼠滾輪向右捲動 Shift+PageUp
將鍵盤焦點移至另一個節點	方向鍵
選取具有鍵盤焦點的節點 (將節點加入選取群組)	Shift+空格鍵
切換選擇具有鍵盤焦點的節點	Ctrl+Spacebar
切換目前的選取範圍 (如果不選取任何節點，選取具有鍵盤焦點的節點)	空格鍵
向上移動目前的選取範圍	Shift+向上鍵
向下移動目前的選取範圍	Shift+向下鍵
向左移動目前的選取範圍	Shift+向左鍵
向右移動目前的選取範圍	Shift+向右鍵。

相關主題

標題	描述
使用 3D 資產來打造遊戲和應用程式	提供 Visual Studio 工具的概觀，您可用來處理紋理及影像、3D 模型和著色器效果。
影像編輯器	描述如何使用 Visual Studio 影像編輯器來處理紋理和影像。
模型編輯器	描述如何使用 Visual Studio 模型編輯器來處理 3D 模型。