共用方式為


著色器設計工具

本文件說明如何使用 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 模型編輯器],然後選取 [修改]

    Image and 3D model editors component

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

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

    注意

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

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

  5. 選擇 [ 加入 ] 按鈕。

預設著色器

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

使用著色器設計工具

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

著色器設計工具的工具列

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

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

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

The Shader Designer modal toolbar.

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

工具列項目 描述
選取 可以和圖形中的節點和邊緣互動。 在此模式中,您可以選取節點並加以移動或刪除,您也可以建立邊緣或予以中斷。
移動瀏覽 可讓著色器圖形相對於視窗框架移動。 若要移動瀏覽,請選取設計介面上的一點並予以四處移動。

在 [選取] 模式中,您可以長按 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+GCtrl+Q

S
切換到 [縮放] 模式 Ctrl+GCtrl+Z

Z
切換到 [移動瀏覽] 模式 Ctrl+GCtrl+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 模型。