使用視覺化著色器

VisualShader 是建立著色器的視覺化替代方式。

由於著色器本質上與視覺效果密切相關，圖形化方式（可預覽紋理、材質等）比純腳本著色器提供了許多額外便利。但另一方面，VisualShader 並未涵蓋著色器腳本的所有功能，某些特殊效果可能需要兩者並用。

備註

如果你對著色器還不熟悉，建議先閱讀著色器簡介。

建立視覺化著色器

VisualShader 可以在任何 ShaderMaterial 中建立。要開始使用 VisualShader，請在你選擇的物件上建立一個新的 ShaderMaterial。

../../_images/shader_material_create_mesh.webp

然後將一個 Shader 資源指派給 Shader 屬性。

點擊新的 Shader 資源，將會自動開啟建立著色器的對話框。請在下拉選單中將類型改為 VisualShader，然後為它命名。

../../_images/visual_shader_create2.webp

點擊你剛建立的 VisualShader 資源，會開啟著色器編輯器。編輯器介面包含四個部分：右側檔案清單、上方工具列、圖形視窗本體，以及可開關的右側材質預覽

../../_images/visual_shader_editor2.webp

工具列由左至右功能如下：

「新增節點」按鈕會顯示一個彈出選單，讓你在著色器圖中加入節點。
下拉選單用來選擇著色器型態：頂點、片段、光源。就像腳本著色器一樣，這會決定可用哪些內建節點。
接下來的按鈕和數值輸入欄用於調整縮放比例、網格對齊，以及格線間距（像素）。
此切換開關可控制右下角小地圖的顯示或隱藏。
自動排列已選節點按鈕會嘗試將你選取的節點自動排整齊，讓圖表更易閱讀。
「管理 varying」按鈕會開啟下拉選單，讓你新增或移除 varying 變數。
「顯示產生程式碼」按鈕會顯示與圖形對應的著色器程式碼。
最後一個圖示為材質預覽的顯示開關。

備註

VisualShader 雖然不需要寫程式碼，但其運作邏輯和腳本著色器是一致的。建議兩者都學習基本概念，才能深入理解著色流程。

視覺化著色器圖會在後台轉換為腳本著色器，你可以按下工具列最後一個按鈕來查看這段程式碼。這有助於了解節點實際做了什麼，以及如何用腳本重現。

使用視覺化著色器編輯器

預設情況下，每個新的 VisualShader 都會有一個輸出節點。所有節點連接最終都會接到輸出節點的端口上。節點是建立著色器的基本單元。要新增節點，可以點左上角「新增節點」按鈕，或在圖上空白處按右鍵，都會彈出選單。

這個快顯視窗有以下特性：

如果你在圖上右鍵點擊，選單會在游標位置彈出，新增的節點也會放在那個位置；否則節點會放在圖形中央。
這個快顯視窗可以水平或垂直調整大小，方便顯示更多內容。尺寸與樹狀內容位置會被記住，下次開啟時可以恢復到之前狀態。
下拉選單中的「全部展開」和「全部收合」可快速檢視所有可用節點。
你也可以將快顯視窗的節點直接拖曳到圖形上。

快顯視窗內的節點以類別分類，一開始可能會覺得種類繁多。可以先嘗試新增幾個節點，接到輸出端口，看看會發生什麼變化。

將「純量」輸出連接到「向量」輸入時，向量所有分量都會取這個純量值。

將「向量」輸出連接到「純量」輸入時，純量值會是向量各分量的平均值。

視覺化著色器節點介面

視覺化著色器節點擁有輸入與輸出端口。輸入端口在節點左側，輸出端口在右側。

端口有不同顏色以區分資料型態：

端口型態
型別	顏色	說明
純量	灰色	純量代表單一數值。
向量	紫色	向量為一組數值。
布林	綠色	開或關，真或假。
變換	粉紅色	矩陣，通常用於變換頂點座標。
取樣器	橘色	材質取樣器，可用來取樣紋理。

這些型態都會用於著色器中頂點、片段和光照的計算，例如矩陣乘法、向量加法或純量除法。

還有其他型態，但以上是主要常用的。

視覺化著色器節點

以下介紹一些值得認識的特殊節點。此列表非全列，未來會增加更多節點與範例。

Expression 節點

「Expression」節點允許你在視覺化著色器中直接撰寫 Godot 著色語言（類 GLSL）運算式。你可以新增任意數量的輸入和輸出端口，並可自行調整節點大小，也能設定每個端口的名稱與型別。輸入的運算式會在你離開文字框後立即套用到材質上。如有語法或編譯錯誤，會顯示在「輸出」分頁。所有輸出預設會初始化為零值。此節點在「特殊」分頁下，所有著色器模式皆可使用。

這個節點的功能幾乎沒有限制——你可以撰寫複雜的運算流程，並善用文字著色器支援的所有功能，例如迴圈、discard 關鍵字、進階型別等。舉例：