共用方式為

著色器設計工具

  • 發行項

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

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

支援的格式

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

Format 名稱

副檔名

支援的作業 (檢視、編輯、匯出)

有向圖形著色器語言

.dgsl

檢視, 編輯

HLSL 著色器 (原始程式碼)

.hlsl

匯出

HLSL 著色器 (Bytecode)

.cso

匯出

C++ 標頭 (HLSL Bytecode 陣列)

.h

匯出

使用者入門

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

將 DGSL 著色器到您的專案

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

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

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

  4. 選擇 [加入] 按鈕。

Hh315733.collapse_all(zh-tw,VS.110).gif預設著色器

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

使用著色器設計工具

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

Hh315733.collapse_all(zh-tw,VS.110).gif著色器設計工具的工具列

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

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

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

[著色器設計工具] 強制回應工具列。

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

工具列項目

描述

選取

在圖形中啟用節點與邊緣的互動。 在此模式中，您可以選取節點並將其移動或刪除，而且可以建立邊緣或將其中斷。

平移

啟用著色器圖形相對於視窗框架的移動。 若要平移，請選取設計介面中的點並四處移動它。

在 [選取] 模式中，您可以按住 CTRL 暫時啟動 [全景] 模式。

縮放

啟用相對於視窗框架顯示或多或少的著色器圖形細節。 在 [縮放] 模式中，選取設計介面上的一點，然後左右移動以放大，或上下移動以縮小。

在 [選取] 模式中，您可以按住 CTRL 並使用滑鼠滾輪來縮放。

縮放至適當比例

在視窗框架中顯示完整的著色器圖形。

即時轉譯模式

啟用即時呈現時，Visual Studio 會重新繪製設計介面，即使沒有執行任何使用者動作也一樣。 當您處理隨著時間變更的著色器時，這個模式相當有用。

以圓球預覽

啟用時，會使用球體模型預覽著色器。 一次只能啟用一個預覽圖形。

以立方體預覽

啟用時，會使用立方體模型預覽著色器。 一次只能啟用一個預覽圖形。

以圓柱圖預覽

啟用時，會使用圓柱體模型預覽著色器。 一次只能啟用一個預覽圖形。

以圓錐圖預覽

啟用時，會使用圓錐模型預覽著色器。 一次只能啟用一個預覽圖形。

以茶壺預覽

啟用時，會使用茶壺模型預覽著色器。 一次只能啟用一個預覽圖形。

以平面預覽

啟用時，會使用平面模型預覽著色器。 一次只能啟用一個預覽圖形。

工具箱

或者，顯示或隱藏 [工具箱]。

屬性

或者，顯示或隱藏 [屬性] 視窗。

進階

包含進階命令和選項。

匯出

啟用以數種格式匯出著色器。

匯出成

將著色器匯出成 HLSL 原始程式碼或已編譯的著色器 Bytecode。 如需如何匯出著色器的詳細資訊，請參閱 HOW TO：匯出著色器。

圖形引擎

啟用選取用於顯示設計介面的轉譯器。

以 D3D11 呈現

使用 Direct3D 11 呈現著色器設計工具的設計介面。

以 D3D11WARP 呈現

使用 Direct3D 11 Windows Advanced Rasterization Platform (WARP) 呈現 [著色器編輯器] 設計介面。

檢視

啟用選取著色器設計工具的其他資訊。

Frame Rate

啟用時，會在設計介面的右上角顯示目前的播放速率。 畫面播放速率是每秒繪製的畫面數目。

當您啟用 [即時呈現模式] 選項時，這個選項就很有用。

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

Hh315733.collapse_all(zh-tw,VS.110).gif與節點和連結一起使用

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

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

  • 這個方式：

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

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

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

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

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

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

Hh315733.collapse_all(zh-tw,VS.110).gif預覽著色器

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

Hh315733.collapse_all(zh-tw,VS.110).gif圖形

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

選擇預覽圖形

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

Hh315733.collapse_all(zh-tw,VS.110).gif紋理和材質參數

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

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

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

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

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

參數

屬性

[紋理 1] – [紋理 8]
存取權

[公用] 屬性使其可從模型編輯器進行設定，否則為 [私用]。

檔名

與這個材質暫存器產生關聯之材質檔案的完整路徑。

材質環境
存取權

[公用] 屬性使其可從模型編輯器進行設定，否則為 [私用]。

值

目前像素材質的擴散色彩比重，歸因於非直接光源或環境光源。

材質擴散
存取權

[公用] 屬性使其可從模型編輯器進行設定，否則為 [私用]。

值

色彩，描述目前像素的材質如何使直接光源擴散。

材質放射
存取權

[公用] 屬性使其可從模型編輯器進行設定，否則為 [私用]。

值

目前像素材質的色彩比重，依據自行提供的光源。

材質反射
存取權

[公用] 屬性使其可從模型編輯器進行設定，否則為 [私用]。

值

色彩，描述目前像素的材質如何反射直接光源。

材質光澤度
存取權

[公用] 屬性使其可從模型編輯器進行設定，否則為 [私用]。

值

在目前像素上，定義反射反白顯示項目之濃度的指數。

Hh315733.collapse_all(zh-tw,VS.110).gif以時間為基礎的效果

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

啟用即時呈現

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

Hh315733.collapse_all(zh-tw,VS.110).gif檢查效果

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

若要旋轉圖形

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

Hh315733.collapse_all(zh-tw,VS.110).gif匯出著色器

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

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

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

鍵盤快速鍵

Command

鍵盤快速鍵

切換至 [選取] 模式。

Ctrl+G、Ctrl+Q

S

切換到 [縮放] 模式

Ctrl+G、Ctrl+Z

Z

切換到 [全景] 模式

Ctrl+G、Ctrl+P

K

全選

Ctrl+A

刪除目前選取範圍

刪除

取消目前的選取範圍

逸出字元

放大

Ctrl+滑鼠滾輪向前轉

加號 (+)

縮小

Ctrl-滑鼠滾輪向後轉

減號 (-)

將設計介面向上平移

滑鼠滾輪往後捲動

PageDown

向下平移設計介面

滑鼠滾輪往前捲動

PageUp

向左平移設計介面

SHIFT + 滑鼠滾輪往後捲動

滑鼠滾輪向左捲動

Shift+PageDown

向右平移設計介面

SHIFT + 滑鼠滾輪往前捲動

滑鼠滾輪向右捲動

Shift+PageUp

將鍵盤焦點移至另一個節點

方向鍵

選取具有鍵盤焦點的節點 (將節點加入至選取群組)

SHIFT+ 空格鍵

切換具有鍵盤焦點之節點的選取範圍

Ctrl+空格鍵

請切換目前選取範圍 (如果沒有選取節點，則選取具有鍵盤焦點的節點)

空白鍵

移動目前的選取範圍

SHIFT+向上鍵

下移目前選取範圍

SHIFT + 向下鍵

左移目前選取範圍

SHIFT + 向左鍵

右移目前選取範圍

SHIFT+向右鍵

相關主題

標題

描述

使用 3D 資產來打造遊戲和應用程式

提供可用來處理材質及影像、立體模型和著色器效果 Visual Studio 工具的概觀。

影像編輯器

描述如何使用 Visual Studio 影像編輯器來處理材質和影像。

模型編輯器

說明如何使用 Visual Studio 模型編輯器來處理立體模型。