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

VisualShaders 是创建着色器的可视化替代方案。

由于着色器本质上与视觉效果有联系, 与纯粹基于脚本的着色器相比, 基于图的方式, 有纹理, 材质等的预览, 提供了很多额外的便利. 另一方面,VisualShaders并没有暴露出着色器脚本的所有功能, 对于特定的效果, 并行使用两者可能是必要的.

备注

如果你对着色器不熟悉,可以从阅读 着色器简介 开始。

创建 VisualShader

VisualShader 可以在任何 ShaderMaterial 中创建。要开始使用 VisualShader,请在你选择的对象中创建一个新的 ShaderMaterial

../../_images/shader_material_create_mesh.webp

然后,给 Shader 属性指定(或分配)一个 Shader 资源。

../../_images/visual_shader_create.webp

点击新建的‘ Shader (着色器)’资源,‘创建着色器’对话框就会自动弹出。在下拉菜单中,将类型(Type)选项更改为 VisualShader ,然后给它起个名字。

../../_images/visual_shader_create2.webp

点击你刚创建的可视化着色器,即可打开着色器编辑器。着色器编辑器的布局包括四个部分:左侧的文件列表,上层的工具栏,图表本身以及右侧的可关闭的材质预览

../../_images/visual_shader_editor2.webp

在工具栏中从左到右:

  • 点击这个小箭头,可以控制文件面板的显示或隐藏。

  • 点击‘文件( File )’按钮会打开一个下拉菜单,可以用来保存、加载和创建文件。

  • 添加节点 按钮会显示一个弹出式菜单,让你为着色器图添加节点。

  • 下拉菜单是着色器类型. 顶点, 碎片和光线和脚本着色器一样, 它定义了哪些内置节点将是可用的.

  • 下面的按钮和数字输入控制缩放级别, 网格捕捉和网格线之间的距离(单位为像素).

  • 这个开关用来控制编辑器右下角的图表小地图(Minimap)是否显示。

  • 点击‘自动排列所选节点’按钮,系统会尝试将你选中的所有节点,以最整洁、高效的方式重新组织排列。

  • 点击‘管理 Varyings’按钮,会打开一个下拉菜单,让你能够添加或移除 varying。

  • 点击‘显示生成代码’按钮,可以查看与你当前节点图对应的着色器代码。

  • 这个开关用来开启或关闭材质预览。

  • 点击‘在线文档( Online Docs )’按钮,就可以在网页浏览器中打开这个文档页面。

  • 最后一个按钮可以让你把着色器编辑器单独放到一个新窗口里,让它和编辑器的其他部分分离开。

备注

虽然 VisualShader 不需要编码,但它们与脚本着色器有着相同的逻辑。建议学习这两者的基础知识,以便对着色管道有一个很好的理解。

可视化的着色器图形在场景后台转换为脚本着色器, 按下工具栏上的最后一个按钮就可以看到代码. 这可以方便理解特定节点的作用, 以及如何在脚本中呈现.

使用 Visual Shader 编辑器

默认情况下, 每个新的 VisualShader 都会有一个输出节点. 每个节点的连接都在输出节点的一个套接处结束. 节点是创建着色器的基本单元. 要添加一个新的节点, 点击左上角的 添加节点 按钮, 或者在图形中的任何一个空的位置上右击, 就会弹出一个菜单.

../../_images/vs_popup.webp

此弹出窗口具有以下属性:

  • 如果你在图形上单击右键, 这个菜单将在光标位置被调出, 创建的节点, 在这种情况下, 也将被放在该位置, 否则, 将在图形的中心位置创建.

  • 它可以在水平和垂直方向上调整大小, 以允许显示更多的内容. 尺寸变换和树的内容位置在调用当中被保存, 所以如果突然关闭了弹出窗口, 可以很容易地恢复它以前的状态.

  • 下拉选项菜单中的 展开全部折叠全部 选项可用于轻松列出可用节点.

  • 你也可以从弹出式菜单中拖放节点到图形上.

虽然弹出的节点是按类别分类的, 但一开始会不知所以. 试着添加一些节点, 将它们插入输出套接处, 观察会发生什么.

当把任何 scalar 输出连接到 vector 输入时, 向量的所有分量将取标量的值.

当把任何 vector 输出连接到 scalar 输入时, 标量的值将是向量分量的平均值.

可视化着色器节点界面

视觉着色器节点拥有输入端口和输出端口。输入端口位于节点的左侧,而输出端口位于节点的右侧。

../../_images/vs_node.webp

这些端口被标上了不同的颜色,用来区分它们的类型:

端口类型

类型

Color

描述

示例

Scalar

灰色

标量是单个值。

标量

Vector

紫色

向量是一组值。

向量

Boolean

绿色

开关、真假。

boolean

Transform

粉红色

矩阵,常用于顶点的变换。

变换

Sampler

橙色

纹理采样器。可用于对纹理进行采样。

采样器

所有这些类型都会被用在着色器中关于顶点、片元和光照的计算里。比如:矩阵乘法、向量加法,或者标量除法。

虽然还有其他类型,但这些是最主要的。

可视化着色器节点

以下是一些值得了解的特殊节点. 该清单并非详尽无遗, 可能会增加更多的节点和示例.

Expression 节点

Expression 节点允许你在视觉着色器中编写 Godot 着色语言(GLSL-like)表达式. 该节点具有添加任意数量的所需输入和输出端口的按钮, 并且可以调整其大小. 你还可以设置每个端口的名称和类型. 输入的表达式将立即应用于材质(焦点离开表达式文本框后). 任何解析或编译错误都将打印到 "输出" 选项卡. 默认情况下, 输出初始化为零值. 该节点位于 "特殊" 选项卡下, 可用于所有着色器模式.

这个节点的可能性几乎无穷无尽 —— 你可以编写复杂的过程, 并使用基于文本的着色器的全部力量, 例如循环, 关键字 discard , 扩展类型, 等等. 例如:

../../_images/vs_expression2.png

重定向节点

Reroute (重定向)节点纯粹是为了方便整理布局而设计的。在一个包含大量节点的复杂着色器中,你可能会发现节点之间的连线会让整个画面变得难以阅读。顾名思义,Reroute 允许你调整节点之间的连线路径,从而让整体布局看起来更清晰。你甚至可以在单条连线上使用多个重定向节点,利用它们来把连线拐成直角。

../../_images/vs_reroute.webp

想要移动重定向节点(reroute node)的话,只需要把鼠标悬停在它上面,然后拖动出现的控制手柄就可以了。

../../_images/vs_reroute_handle.webp

Fresnel 结点

Fresnel 节点用于接受法线向量和视图向量, 并生成一个标量, 即它们之间的饱和点积. 此外, 你可以设置反转和方程的幂. Fresnel 节点非常适合为对象添加类似边缘的照明效果.

../../_images/vs_fresnel.webp

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 节点

Switch (切换)节点会根据布尔(boolean)条件是真( true )还是假( false ),来返回对应的向量(vector)。上面我们已经介绍过 Boolean (布尔值)了。如果你想把一个向量转换成一个真正的布尔值,那么该向量的所有分量都必须是非零的。

../../_images/vs_switch.webp

网格发射器

Mesh Emitter (网格发射器)节点用于从网格的顶点处发射粒子。不过要注意,它仅适用于处于 Particles (粒子)模式下的着色器。

需要注意的是,并不是所有的 3D 对象都是单纯的网格文件。比如 .glTF 文件就没法直接拖拽到图形编辑器里。不过,你可以通过它创建一个继承场景(inherited scene),然后把该场景里的网格单独保存成一个文件,接着就能用那个文件啦。

../../_images/vs_meshemitter.webp

另外,你也可以直接把 .obj 文件拖拽到图形编辑器里,这样就能快速添加该网格对应的节点了。不过要注意,其他格式的网格文件可没法这么操作哦。