著色器設計工具
本文件說明如何使用 Visual Studio [著色器設計工具] 來建立、修改和匯出稱為「著色器」的自訂視覺效果。
即使您不懂高階著色器語言 (HLSL) 程式設計,您也可以使用 [著色器設計工具] 來為您的遊戲或應用程式建立自訂的視覺效果。 若要在 [著色器設計工具] 中建立著色器,您要將它配置成圖形。 也就是說,您要加入代表資料和作業的設計介面「節點」,然後彼此連接以定義作業如何處理資料。 在每個作業節點,提供到該點為止的效果預覽,讓您將結果視覺化。 朝最後節點流經各節點的資料,代表著色器的輸出。
支援的格式
[著色器設計工具] 支援下列著色器格式︰
格式名稱 | 副檔名 | 支援的作業 (檢視、編輯、匯出) |
---|---|---|
有向圖著色器語言 | .dgsl | 檢視、編輯 |
HLSL 著色器 (原始程式碼) | .hlsl | 匯出 |
HLSL 著色器 (位元組程式碼) | .cso | 匯出 |
C++ 標頭 (HLSL 位元組程式碼陣列) | .h | 匯出 |
開始使用
本節說明如何將 DGSL 著色器加入 Visual Studio C++ 專案,並提供開始使用所需的基本資訊。
注意
只有 C++ 專案才支援自動建立著色器圖形 (.dgsl 檔案) 等圖形項目的整合。
將 DGSL 著色器加入專案
請確定您已經安裝處理圖形所需的 Visual Studio 元件。 該元件稱為影像與 3D 模型編輯器。
若要安裝它,請開啟 [Visual Studio 安裝程式] 並選取功能表列上的 [工具]>[取得工具與功能],然後選取 [個別元件] 索引標籤。選取 [遊戲與圖形] 底下的 [影像與 3D 模型編輯器],然後選取 [修改]。
在 [方案總管] 中,開啟您想要在其中新增著色器之 C++ 專案的捷徑功能表,然後選擇 [新增]>[新增項目]。
在 [加入新項目] 對話方塊中,選取 [已安裝] 下方的 [圖形],然後選取 [視覺著色器圖形 (.dgsl)]。
注意
如果您沒有在 [新增項目] 對話方塊中看到 [圖形] 類別,但是您已經安裝 [影像與 3D 模型編輯器] 元件,則您的專案類型不支援圖形項目。
指定著色器檔案的 [名稱],以及您要將其建立的 [位置]。
選擇 [ 加入 ] 按鈕。
預設著色器
您每次建立的 DGSL 著色器,一開始都是最精簡的著色器,只將「點色彩」節點連接到「完稿色彩」節點。 雖然這是完整且可正常運作的著色器,但能做的事不多。 因此,建立實用著色器的第一個步驟通常是刪除「點色彩」節點,或和「完稿色彩」中斷連接,以騰出空間給其他節點使用。
使用著色器設計工具
下列各節說明如何使用著色器設計工具來使用自訂著色器。
著色器設計工具的工具列
著色器設計工具的工具列包含有助於您使用 DGSL 著色器圖形的命令。
影響著色器設計工具狀態的命令位於主要 Visual Studio 視窗的 [著色器設計工具模式] 工具列。 設計工具和命令都位於著色器設計工具設計介面上的 [著色器設計工具] 工具列。
[著色器設計工具模式] 工具列如下:
此表描述 [著色器設計工具模式] 工具列上的項目,這些項目會依照出現順序從左到右列出:
工具列項目 | 描述 |
---|---|
選取 | 可以和圖形中的節點和邊緣互動。 在此模式中,您可以選取節點並加以移動或刪除,您也可以建立邊緣或予以中斷。 |
移動瀏覽 | 可讓著色器圖形相對於視窗框架移動。 若要移動瀏覽,請選取設計介面上的一點並予以四處移動。 在 [選取] 模式中,您可以長按 Ctrl 暫時啟用 [移動瀏覽] 模式。 |
Zoom | 可讓著色器圖形相對於視窗框架顯示更多或更少的細節。 在 [縮放] 模式中,選取設計介面上的一點,然後往右或往下移動以放大,或是往左或往下移動以縮小。 在 [選取] 模式中,您可以按住 Ctrl,使用滑鼠滾輪來縮小或放大。 |
縮放至適當比例 | 在視窗框架中顯示完整的著色器圖形。 |
即時轉譯模式 | 啟用即時轉換時,Visual Studio 會重新繪製設計介面,即使沒有執行任何使用者動作也一樣。 當您處理隨著時間變更的著色器時,這個模式相當有用。 |
以圓球預覽 | 啟用時,使用圓球模型來預覽著色器。 一次只能啟用一個預覽圖形。 |
以立方體預覽 | 啟用時,使用立方體模型來預覽著色器。 一次只能啟用一個預覽圖形。 |
以圓柱圖預覽 | 啟用時,使用圓柱圖模型來預覽著色器。 一次只能啟用一個預覽圖形。 |
以圓錐圖預覽 | 啟用時,使用圓錐圖模型來預覽著色器。 一次只能啟用一個預覽圖形。 |
以茶壺預覽 | 啟用時,使用茶壺模型來預覽著色器。 一次只能啟用一個預覽圖形。 |
以平面預覽 | 啟用時,使用平面模型來預覽著色器。 一次只能啟用一個預覽圖形。 |
工具箱 | 交替顯示或隱藏 [工具箱]。 |
屬性 | 交替顯示或隱藏 [屬性] 視窗。 |
進階者 | 包含進階命令和選項。 匯出︰能以數種格式匯出著色器。 匯出成︰將著色器匯出為 HLSL 原始程式碼或編譯過的著色器位元組程式碼。 如需如何匯出著色器的詳細資訊,請參閱如何:匯出著色器。 圖形引擎︰可讓您選擇的轉譯器,用於顯示設計介面。 以 D3D11 顯示︰使用 Direct3D 11 轉譯著色器設計工具設計介面。 以 D3D11WARP 顯示:使用 Direct3D 11 Windows Advanced Rasterization Platform (WARP) 轉譯著色器設計工具設計介面。 檢視︰可讓您選擇著色器設計工具的其他資訊。 畫面播放速率:啟用時,會在設計介面的右上角顯示目前的畫面播放速率。 畫面播放速率是每秒繪製的畫面數目。 當您啟用 [即時轉譯模式] 選項時,這個選項很有用。 |
提示
您可以選擇 [進階] 按鈕,再次執行上一個命令。
使用節點與連線
使用 [選取]模式來新增、移除、重新置放、連接和設定節點。 以下為執行這些基本作業的方式︰
在 [選取] 模式中執行基本作業
方法如下:
若要將節點加入圖形,請在 [工具箱] 中選取節點,然後將其移至設計介面。
若要移除圖形中的節點,請選取該節點,然後按 Delete 鍵。
若要重新置放節點,請選取該節點,然後移至新位置。
若要將兩個節點連接,請將節點的輸出端點移至另一節點的輸入端點。 只能和有相容類型的端點連接。 端點之間會以線條表示連接。
若要移除連接,在任一連線的端點捷徑功能表上,選擇 [中斷連結]。
若要設定節點的屬性,請選取節點,然後在[屬性] 視窗中,指定屬性的新值。
預覽著色器
為了幫助您了解著色器會如何顯示在應用程式中,您可以設定效果的預覽方式。 若要模擬應用程式,您可以從數種圖形中擇一轉譯、設定紋理和其他材質參數、啟用以時間為基礎的效果動畫,並從不同角度檢查預覽。
圖形
著色器設計工具包含圓球、立方體、圓柱體、圓錐體、茶壺及平面等六個圖形,您可以用來預覽著色器。 根據著色器而定,特定圖形可提供您更好的預覽。
若要選擇預覽圖形,請在 [著色器設計工具模式] 工具列上,選擇您要的圖形。
紋理和材質參數
許多著色器依賴紋理和材質屬性,產生應用程式中每一種物件的特有外觀。 若要查看著色器在應用程式中的外觀,您可以將用來轉譯預覽的紋理和材質屬性,設定為符合您可能會在應用程式中使用的紋理和參數。
將不同的紋理繫結至材質暫存器,或修改其他材質參數:
在 [選取] 模式中,選取設計介面的空白區域。 這會導致 [屬性] 視窗顯示全域著色器屬性。
在[屬性] 視窗中,對您想要變更的材質和參數屬性指定新值。
下表顯示您可以修改的著色器參數:
參數 | 屬性 |
---|---|
紋理 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 模型。 |