Unity 有 Shader Graph，Three.js 也有了——TSL 可视化节点编辑器

Three.js 从 r167 开始推出了 TSL（Three.js Shading Language），它是官方提供的一套着色器抽象层，可以用 JavaScript 的方式描述着色器逻辑，底层自动编译成 GLSL 或 WGSL，同时兼容 WebGL 和 WebGPU。

但即便如此，直接写 TSL 代码对很多开发者来说门槛依然不低——需要理解节点函数的组合方式，清楚几何数据从哪里来，数学运算怎么串联。

TSL Graph 是一个在线可视化工具，专门用来解决这个问题。它提供一套节点编辑器：你在画布上放节点、连线，描述着色器的计算过程，完成后导出对应的 TSL 代码，直接用在 Three.js 项目里。

节点编辑器长什么样

界面分两部分：左侧是节点分类面板，右侧是画布区域。把节点拖到画布上，通过连接输入输出端口来组合逻辑，最终连接到输出节点，就描述完了一个着色器。

节点按功能分成几个大类：

常量（Constants）

提供颜色、浮点数、整数、向量（Vec2/3/4）和 Uniform 节点，用来定义着色器的基础输入值。Uniform 节点对应 Three.js 里可以从 JavaScript 动态传入的参数。

几何数据（Geometry）

提供对场景数据的访问，包括相机信息、顶点位置（本地 / 视图 / 世界空间）、法线、UV 坐标、时间、屏幕坐标等。这些是着色器里最常用的输入来源。

数学运算（Math）

加减乘除、取绝对值、sin/cos、clamp、mix 等常用数学和三角函数节点，是构建着色器逻辑的基础积木。

逻辑（Logic）

布尔运算（AND、OR、NOT、XOR）、大小比较（GreaterThan、LessThan）和条件选择节点，处理分支逻辑，比如根据距离决定颜色或透明度。

缓动（Easing）

封装了一套常用缓动曲线节点（线性、三次方、弹性、回弹等），底层来自 tsl-easings 库，用于控制动画或过渡效果的节奏感。

循环（Loop）

提供迭代控制节点，包括计数器、索引、累加器和条件退出，可以在着色器里实现循环计算，比如光线步进或多层采样。

高级（Advanced）

包含 frontFacing（判断面朝向）、hashBlur（基于哈希的模糊）、linearDepth（线性深度值）等功能节点，适合实现更复杂的着色器效果。

局部变量（Locals & Globals）

类似"传送门"的变量节点，把某个节点的输出定义为命名变量，在图的其他位置直接引用，避免连线交叉、保持图的可读性。

节点连好之后，对应的 TSL 代码就生成了，可以直接粘贴进 Three.js 项目使用。

TSL Graph 是纯在线工具，打开网站即可使用，不需要安装任何东西。注册登录后可以保存和管理多个着色器项目。

基本流程是：

TSL Graph 的定位和 Unity 的 Shader Graph、Blender 的节点材质编辑器类似，把着色器的构建从写代码变成了可视化的节点组合。对于不熟悉着色器语法但想在 Three.js 项目里实现自定义材质效果的开发者，它提供了一条门槛更低的路径。

需要注意的是，TSL 本身依赖 Three.js r167 及以上版本，且完整的 WebGPU 支持需要对应的运行环境。导出的代码是 TSL 语法，不是原生 GLSL，使用时需要通过 Three.js 的 TSL 管线运行。