%20(1).png)
ComfyUI GLSL 节点插件 - 保姆级图文教程
1. 插件简介
插件地址： https://github.com/patriciogonzalezvivo/comfyui_glslnodes
这个插件就像是给 ComfyUI 装了一个超级强大的"特效滤镜工厂"！它能让你用 GLSL 着色器代码来制作各种炫酷的视觉效果。
能给我们带来什么效果？
- 制作各种炫酷的视觉特效（比如光影、扭曲、粒子效果）
- 对图片和视频进行高级处理（边缘检测、景深效果、像素化等）
- 创建动态的艺术效果和动画
- 实现类似 Shadertoy 网站上的那些酷炫效果
简单来说，就是把专业的图形编程能力带到了 ComfyUI 里，让你能做出电影级别的视觉效果！
2. 如何安装
方法一：通过 ComfyUI Manager 安装（推荐）
- 打开 ComfyUI Manager
- 搜索 "GLSL Nodes"
- 点击安装即可
方法二：手动安装
- 打开终端/命令行
- 进入你的 ComfyUI 安装目录下的
custom_nodes文件夹 - 运行命令：
git clone https://github.com/patriciogonzalezvivo/comfyui_glslnodes.git - 重启 ComfyUI
3. 节点详细解析
本插件总共包含 13 个节点，本次全部输出完成。
3.1 int 节点 - 整数输入器
这个节点就像一个"数字输入框"，专门用来输入整数（比如 1、2、3 这样的数字）。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| value | value | INT | 0 | 就是你想输入的整数，比如用来控制循环次数、选择模式等 | 整数类型的数值输入 | 比如输入 5 表示重复某个效果 5 次 |
3.2 float 节点 - 小数输入器
这个节点就像一个"精密调节器"，可以输入带小数点的数字，用来做精细调节。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| value | value | FLOAT | 0.0 | 输入小数，比如透明度、速度、强度等需要精确控制的数值 | 浮点数类型的数值输入，支持小数点后三位精度 | 比如输入 0.5 表示 50% 的透明度 |
3.3 vec2 节点 - 二维坐标输入器
这个节点就像一个"平面定位器"，用来输入 X 和 Y 两个坐标值，比如屏幕上的位置。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| x | x | FLOAT | 0.0 | 水平方向的位置，左右移动 | X轴坐标值 | 输入 100 表示向右移动 100 个单位 |
| y | y | FLOAT | 0.0 | 垂直方向的位置，上下移动 | Y轴坐标值 | 输入 -50 表示向下移动 50 个单位 |
3.4 vec2 (pos) 节点 - 可视化二维位置选择器
这个节点就像一个"可视化地图"，你可以直接在一个方格里点击来选择位置，比用数字输入更直观。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| pos | pos | VEC2POS | (0.0, 0.0) | 在可视化界面上点击选择位置，就像在地图上标记地点 | 通过图形界面选择二维坐标位置 | 在方格中心点击表示 (0,0)，右上角表示 (1,1) |
3.5 vec3 节点 - 三维坐标输入器
这个节点就像一个"3D空间定位器"，可以输入 X、Y、Z 三个坐标，用来在三维空间中定位。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| x | x | FLOAT | 0.0 | 水平方向位置，左右移动 | X轴坐标值 | 输入 1.0 表示向右移动 |
| y | y | FLOAT | 0.0 | 垂直方向位置，上下移动 | Y轴坐标值 | 输入 -1.0 表示向下移动 |
| z | z | FLOAT | 0.0 | 深度方向位置，前后移动 | Z轴坐标值 | 输入 2.0 表示向前移动 |
3.6 vec3 (pos) 节点 - 可视化三维位置选择器
这个节点就像一个"3D操作台"，你可以通过拖拽来在三维空间中选择位置，比输入数字更直观。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| pos | pos | VEC3POS | (0.0, 0.0, 0.0) | 在3D可视化界面中拖拽选择空间位置，就像操作3D建模软件 | 通过三维图形界面选择空间坐标 | 拖拽白点到不同位置来设置3D坐标 |
3.7 vec4 节点 - 四维数据输入器
这个节点就像一个"四合一调节器"，通常用来输入颜色的 RGBA 值（红、绿、蓝、透明度）。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| x | x | FLOAT | 0.0 | 通常代表红色分量，0-1之间 | X轴分量或红色通道值 | 输入 1.0 表示最大红色 |
| y | y | FLOAT | 0.0 | 通常代表绿色分量，0-1之间 | Y轴分量或绿色通道值 | 输入 0.5 表示中等绿色 |
| z | z | FLOAT | 0.0 | 通常代表蓝色分量，0-1之间 | Z轴分量或蓝色通道值 | 输入 0.0 表示无蓝色 |
| w | w | FLOAT | 0.0 | 通常代表透明度，0-1之间 | W轴分量或Alpha透明度值 | 输入 1.0 表示完全不透明 |
3.8 vec4 (color) 节点 - 可视化颜色选择器
这个节点就像一个"调色盘"，你可以直接在色轮上选择颜色，比输入数字方便多了。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| color | color | VEC4COLOR | (1.0, 0.0, 0.0, 1.0) | 在色轮界面上直接选择颜色，就像用画图软件的调色板 | 通过图形界面选择RGBA颜色值 | 在色轮上点击红色区域选择红色 |
3.9 glslUniforms 节点 - 统一参数管理器
这个节点就像一个"中央控制台"，用来收集和管理所有的输入参数，让着色器能够使用这些数据。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| (动态输入) | kwargs | 各种类型 | 无 | 这个节点会自动接收连接到它的所有输入，像个万能插座 | 动态接收并缓存所有uniform参数 | 把图片、数值等都连到这里统一管理 |
3.10 glslEditor 节点 - 简单代码编辑器
这个节点就像一个"代码记事本"，让你可以写 GLSL 着色器代码来创建特效。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| version | version | GLSL_VERSIONS | "140" | 选择GLSL语言版本，就像选择软件版本 | GLSL着色器语言版本号 | 选择 "140" 适合大多数情况 |
| code | code | STRING | 默认代码 | 在这里写你的特效代码，就像写配方 | GLSL着色器源代码 | 写代码来创建渐变、动画等效果 |
| type | type | SHADER_TYPES | "fragment" | 选择着色器类型，目前主要用片段着色器 | 着色器程序类型 | 选择 "fragment" 用于图像处理 |
3.11 glslEditorPro 节点 - 专业代码编辑器
这个节点就像一个"专业代码工作台"，比简单编辑器功能更强，有语法高亮和更好的编辑体验。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| version | version | GLSL_VERSIONS | "140" | 选择GLSL语言版本，就像选择编程语言版本 | GLSL着色器语言版本号 | 选择 "140" 兼容性最好 |
| type | type | SHADER_TYPES | "fragment" | 选择着色器类型，主要用于图像处理 | 着色器程序类型 | 选择 "fragment" 处理像素 |
| code | code | GLSL_STRING | 默认代码 | 在专业编辑器中写代码，有语法提示和高亮 | 带语法高亮的GLSL代码编辑器 | 享受更好的代码编写体验 |
3.12 glslViewer 节点 - 着色器渲染器
这个节点就像一个"特效渲染机"，把你写的代码变成实际的图像或动画效果。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| fragment_code | fragment_code | GLSL_CODE | 必需 | 连接编辑器节点，提供要执行的特效代码 | 片段着色器代码对象 | 连接 glslEditor 的输出 |
| width | width | INT | 512 | 输出图像的宽度，像素数量 | 渲染目标宽度 | 输入 1024 得到更高清的图像 |
| height | height | INT | 512 | 输出图像的高度，像素数量 | 渲染目标高度 | 输入 1024 得到更高清的图像 |
| frames | frames | INT | 1 | 要生成多少帧，1帧就是静态图，多帧就是动画 | 渲染帧数 | 输入 30 生成30帧的动画 |
| fps | fps | INT | 30 | 动画播放速度，每秒多少帧 | 帧率设置 | 30fps 是常见的流畅动画速度 |
| uniforms | uniforms | GLSL_CONTEXT | 可选 | 连接 glslUniforms 节点来提供参数 | 统一变量上下文 | 连接参数管理器来传递数据 |
3.13 glslBuffers 节点 - 缓冲区提取器
这个节点就像一个"中间结果提取器"，可以把渲染过程中的中间步骤结果拿出来单独使用。
参数详解
| 参数名 (UI显示) | 参数名 (代码里) | 参数值 | 建议值 | 通俗解释 (能干嘛的) | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| buffers | buffers | GLSL_BUFFERS | 必需 | 连接 glslViewer 的缓冲区输出 | 着色器缓冲区数据 | 连接渲染器的第三个输出 |
| type | type | 选择列表 | "BUFFER" | 选择要提取的缓冲区类型 | 缓冲区类型选择 | "BUFFER" 用于普通缓冲区 |
| index | index | INT | 0 | 选择第几个缓冲区，从0开始计数 | 缓冲区索引号 | 输入 0 提取第一个缓冲区 |
4. 使用技巧和建议
4.1 新手入门建议
- 从简单开始：先用默认的代码模板，修改几个数值看看效果
- 多看例子：插件自带了很多示例文件，在 examples 文件夹里
- 逐步学习：不要一开始就写复杂代码，先理解基本概念
4.2 性能优化技巧
- 合理设置分辨率：不要一开始就用很高的分辨率，512x512 足够测试
- 使用 glslUniforms：如果有多个参数，用这个节点统一管理更高效
- 避免过多帧数：测试时用少量帧数，确认效果后再增加
4.3 常用代码模式
- 时间动画：使用
u_time变量创建随时间变化的效果 - 位置相关：使用
gl_FragCoord和u_resolution处理像素位置 - 纹理采样：使用
texture()函数读取输入图像
5. 常见问题解答
Q1: 为什么我的代码不工作？
A: 检查以下几点：
- GLSL 版本是否选择正确（推荐 140）
- 代码语法是否正确（注意分号和大括号）
- 是否正确连接了所有必需的输入
Q2: 如何让效果动起来？
A: 在代码中使用时间变量：
u_time- 当前时间（秒）u_frame- 当前帧数- 设置 frames 参数大于 1
Q3: 怎么处理输入的图片？
A:
- 把图片连接到 glslUniforms 节点
- 在代码中用
u_tex0、u_tex1等访问 - 使用
texture(u_tex0, uv)采样像素
Q4: 为什么在 macOS 上某些版本不工作？
A: macOS 不支持某些 GLSL 版本（如 130, 420, 430, 440），建议使用 140 或 330。
Q5: 如何学习 GLSL 编程？
A: 推荐资源：
- Shadertoy.com - 在线 GLSL 编辑器和社区
- LYGIA 着色器库 - 提供很多实用函数
- 插件自带的示例文件
6. 进阶应用
6.1 多缓冲区技术
使用 #ifdef BUFFER_0 等指令可以创建多个渲染通道，实现复杂的后处理效果。
6.2 ShaderToy 兼容
选择 "fragment (shadertoy)" 类型可以直接使用 ShaderToy 网站上的代码。
6.3 自定义 Uniform
通过命名规则（如 u_tex0、u_val0）可以自动识别和使用输入参数。
7. 总结
这个 GLSL 节点插件为 ComfyUI 带来了强大的图形编程能力，让你能够：
- 创建各种视觉特效
- 处理图像和视频
- 制作动态动画
- 实现专业级的后处理效果
虽然需要一些编程基础，但通过学习和实践，你可以创造出令人惊叹的视觉作品！
记住：从简单开始，多看示例，勤加练习，你也能成为 GLSL 特效大师！