Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

使用視覺化著色器

VisualShaders 是建立著色器的視覺化替代方案。

由於著色器本質上與視覺效果有聯繫, 與純粹基於腳本的著色器相比, 基於圖的方式, 有紋理, 材質等的預覽, 提供了很多額外的便利. 另一方面,VisualShaders並沒有暴露出著色器腳本的所有功能, 對於特定的效果, 並行使用兩者可能是必要的.

備註

如果你對著色器不熟悉,可以從閱讀 匯出簡介 開始。

建立內容

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

../../_images/shader_material_create_mesh.png

然後將一個 VisualShader 資源配置給 Shader 屬性。

../../_images/visual_shader_create.webp

點擊新的 VisualShader 資源,Visual Shader 編輯器就會自動打開。Visual Shader 編輯器的佈局包括兩部分:上層工具列和圖表本身。

../../_images/visual_shader_create2.webp

點擊新的 VisualShader 資源,Visual Shader 編輯器就會自動打開。Visual Shader 編輯器的佈局包括兩部分:上層工具列和圖表本身。

../../_images/visual_shader_editor2.png

在工具列中從左到右:

  • 新增節點 按鈕會顯示一個彈出式功能表,讓你為著色器圖新增節點。

  • 下拉式功能表是著色器型別. 頂點, 碎片和光線和腳本著色器一樣, 它定義了哪些內建節點將是可用的.

  • 下面的按鈕和數位輸入控制縮放級別, 網格捕捉和格線之間的距離(單位為像素).

  • 最後一個圖示顯示了與你的圖形對應生成的著色器程式碼.

備註

雖然 VisualShader 不需要編碼,但它們與腳本著色器有著相同的邏輯。建議學習這兩者的基礎知識,以便對著色管道有一個很好的理解。

視覺化的著色器圖形在場景後臺轉換為腳本著色器, 按下工具列上的最後一個按鈕就可以看到程式碼. 這可以方便理解特定節點的作用, 以及如何在腳本中呈現.

使用 Visual Shader 編輯器

預設情況下, 每個新的 VisualShader 都會有一個輸出節點. 每個節點的連接都在輸出節點的一個套接處結束. 節點是建立著色器的基本單元. 要新增一個新的節點, 點擊左上角的 新增節點 按鈕, 或者在圖形中的任何一個空的位置上右擊, 就會彈出一個功能表.

../../_images/vs_popup.png

此快顯視窗具有以下屬性:

  • 如果你在圖形上按一下右鍵, 這個功能表將在游標位置被調出, 建立的節點, 在這種情況下, 也將被放在該位置, 否則, 將在圖形的中心位置建立.

  • 它可以在水平和垂直方向上調整大小, 以允許顯示更多的內容. 尺寸變換和樹的內容位置在呼叫當中被保存, 所以如果突然關閉了快顯視窗, 可以很容易地恢復它以前的狀態.

  • 下拉選項功能表中的 展開全部折疊全部 選項可用於輕鬆列出可用節點.

  • 你也可以從彈出式功能表中拖放節點到圖形上.

雖然彈出的節點是按類別分類的, 但一開始會不知所以. 試著新增一些節點, 將它們插入輸出套接處, 觀察會發生什麼.

當把任何 scalar 輸出連接到 vector 輸入時, 向量的所有分量將取標量的值.

當把任何 vector 輸出連接到 scalar 輸入時, 標量的值將是向量分量的平均值.

Visual Shader node interface

Visual shader nodes have input and output ports. The input ports are located on the left side of the node, and output ports are located on the right side of the node.

../../_images/vs_node.webp

These ports are colored to differentiate type of port:

Port types

型別

顏色

說明

範例

Scalar

Cyan

Scalar is a single value.

scalar

向量 Vector

Purple

Vector is a set of values.

vector

Boolean

Blue

On or off, true or false.

boolean

變換

Orange

A matrix, usually used to transform vertices.

transform

Sampler

Yellow

A texture sampler. It can be used to sample textures.

sampler

All of the types are used in the calculations of vertices, fragments, and lights in the shader. For example: matrix multiplication, vector addition, or scalar division.

There are other types but these are the main ones.

可視化著色器節點

以下是一些值得瞭解的特殊節點. 該列表並非詳盡無遺, 可能會增加更多的節點和範例.

Expression 節點

Expression 節點允許你在視覺著色器中編寫 Godot 著色語言(GLSL-like)運算式. 該節點具有新增任意數量的所需輸入和輸出埠的按鈕, 並且可以調整其大小. 你還可以設定每個埠的名稱和型別. 輸入的運算式將立即應用於材質(焦點離開運算式文字方塊後). 任何解析或編譯錯誤都將列印到 "輸出" 分頁. 預設情況下, 輸出初始化為零值. 該節點位於 "特殊" 分頁下, 可用於所有著色器模式.

../../_images/vs_expression.gif

這個節點的可能性幾乎無窮無盡 —— 你可以編寫複雜的過程, 並使用基於文字的著色器的全部力量, 例如迴圈, 關鍵字 discard , 擴充型別, 等等. 例如:

../../_images/vs_expression2.png

Fresnel 結點

Fresnel 節點用於接受法線向量和視圖向量, 並生成一個標量, 即它們之間的飽和點積. 此外, 你可以設定反轉和方程的冪. Fresnel 節點非常適合為對象新增類似邊緣的照明效果.

../../_images/vs_fresnel.png

Boolean 節點

Boolean 節點可以轉換為或 ScalarVector , 分別表示 01(0, 0, 0)(1, 1, 1) . 該屬性可用於一鍵啟用或禁用某些效果元件.

../../_images/vs_boolean.gif

If 節點

If 節點允許你設定一個向量, 它將返回 ab 之間的比較結果. 有三個向量可以返回: a == b (在這種情況下, 容差參數是作為比較閾值提供的--預設情況下它等於最小值, 即 0.00001 ), a > ba < b .

../../_images/vs_if.png

Switch 節點

如果布林條件是 truefalse , Switch 節點返回一個向量. Boolean 在上面介紹過. 如果你把一個向量轉換為真布林值, 那麼向量的所有分量都應該高於零.

../../_images/vs_switch.png