Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

使用視覺化著色器

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

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

備註

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

建立視覺化著色器

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

../../_images/shader_material_create_mesh.webp

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

../../_images/visual_shader_create.webp

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

../../_images/visual_shader_create2.webp

點擊你剛建立的 VisualShader 來開啟著色器編輯器。著色器編輯器的版面包含四個部分:左側檔案清單、上方工具列、圖形編輯區本體,以及可開關的右側材質預覽

../../_images/visual_shader_editor2.webp

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

  • 可使用箭頭切換檔案面板的顯示。

  • File 按鈕會開啟下拉選單, 用於儲存、載入與建立檔案。

  • 「新增節點」按鈕會顯示一個彈出選單,讓你在著色器圖中加入節點。

  • 下拉選單用來選擇著色器型態:頂點、片段、光源。就像腳本著色器一樣,這會決定可用哪些內建節點。

  • 接下來的按鈕和數值輸入欄用於調整縮放比例、網格對齊,以及格線間距(像素)。

  • 此切換開關可控制右下角小地圖的顯示或隱藏。

  • 自動排列已選節點按鈕會嘗試將你選取的節點自動排整齊,讓圖表更易閱讀。

  • 「管理 varying」按鈕會開啟下拉選單,讓你新增或移除 varying 變數。

  • 「顯示產生程式碼」按鈕會顯示與圖形對應的著色器程式碼。

  • 此開關可開啟或關閉材質預覽。

  • Online Docs 按鈕會在你的瀏覽器中開啟本文件頁面。

  • 最後一個按鈕可將著色器編輯器分離至獨立視窗。

備註

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

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

使用視覺化著色器編輯器

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

../../_images/vs_popup.webp

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

  • 如果你在圖上右鍵點擊,選單會在游標位置彈出,新增的節點也會放在那個位置;否則節點會放在圖形中央。

  • 這個快顯視窗可以水平或垂直調整大小,方便顯示更多內容。尺寸與樹狀內容位置會被記住,下次開啟時可以恢復到之前狀態。

  • 下拉選單中的「全部展開」和「全部收合」可快速檢視所有可用節點。

  • 你也可以將快顯視窗的節點直接拖曳到圖形上。

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

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

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

視覺化著色器節點介面

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

../../_images/vs_node.webp

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

端口型態

型別

顏色

說明

範例

純量

灰色

純量代表單一數值。

純量

向量

紫色

向量為一組數值。

向量

布林

綠色

開或關,真或假。

布林值

變換

粉紅色

矩陣,通常用於變換頂點座標。

矩陣

取樣器

橘色

材質取樣器,可用來取樣紋理。

取樣器

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

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

視覺化著色器節點

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

Expression 節點

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

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

../../_images/vs_expression2.png

Reroute 節點

「Reroute」節點主要用於整理線路。當著色器圖變得複雜時,節點間的連線可能會讓版面難以閱讀。Reroute 節點可協助你調整連線路徑,使圖形更清楚。你也可以在單一路徑上插入多個 Reroute 節點,方便做直角轉折等。

../../_images/vs_reroute.webp

將滑鼠游標移到 Reroute 節點上,點按出現的把手即可移動節點。

../../_images/vs_reroute_handle.webp

Fresnel 節點

Fresnel 節點用於接收法線向量與視角向量,並產生它們的飽和點積(純量)。你也可以設定反相與冪次。Fresnel 節點常用來為物件加上邊緣光效果。

../../_images/vs_fresnel.webp

Boolean 節點

Boolean 節點可轉換為純量(0 或 1)或向量((0,0,0) 或 (1,1,1))。這特性可用來一鍵啟用或關閉某些效果區塊。

../../_images/vs_boolean.gif

If 節點

If 節點讓你設定根據比較結果回傳的向量。可回傳三種情況:a == b`(此時容差參數為比較門檻,預設值為最小值 0.00001)、`a > ba < b

../../_images/vs_if.png

Switch 節點

Switch 節點會根據布林條件(真或假)回傳不同的向量。前述已說明 Boolean 節點。若欲將向量轉換為真正的布林值,則向量所有分量都需非零。

../../_images/vs_switch.webp

網格發射器

Mesh Emitter 節點用於從網格頂點發射粒子。此節點僅適用於「粒子」模式下的著色器。

請注意,並非所有 3D 物件都是網格檔案。glTF 檔無法直接拖曳到圖形中。你可以從 glTF 建立繼承場景,將該場景中的網格另存為獨立檔案後再使用。

../../_images/vs_meshemitter.webp

你也可以將 obj 檔案直接拖曳進圖形編輯器,這樣會自動加入該網格的節點,但其他類型網格檔案則不支援此功能。