Shader 容器

什么是 Shader 容器

Shader 容器是一种特殊的画布图层类型，目前支持嵌入基于 GLSL Shader 的动态视觉特效，你可以通过预置特效库快速应用效果，也可以粘贴自定义 GLSL 代码来加载专属特效，为设计稿带来更丰富的动态表现力。

创建 Shader 容器

在顶部工具栏找到 Shader 容器图标： 20260513-090854.jpeg

直接点击图标：

在画布上创建一个空白的 Shader 容器，等待你填入内容。

悬停图标：

唤出下拉菜单，浏览并选择内置的预置特效，一键应用到画布中。

容器状态

  • 不同于其他图层，Shader 容器有两种状态：播放态、静止态。
  • 选中 Shader 容器时，容器上方会显示播放 / 暂停按钮，用于控制容器内动态特效的播放状态。默认情况下，容器保持静止，需手动点击播放按钮后才会开始播放。

Shader 特效

  • Shader 容器支持基于 GLSL 的 Shader 特效，适合用于实现光效、流体、粒子、动画等视觉效果。你可以从预置特效库中选择效果，也可以粘贴自定义的 GLSL 代码来加载自己的特效。

  • 选中 Shader 容器后，点击编辑按钮，右侧将展示 Shader 设置面板，可对特效的各项参数进行调整。将GLSL 代码粘贴进来后，设置面板将自动解析代码中的参数并映射到属性面板，你可以通过属性面板可视化地调整特效参数，也可以直接在源码输入框中编辑代码。

  • 你可以使用任意 AI 工具生成 GLSL 代码，也可以通过描述想要的效果，使用我们的 AI 设计助手在画布上直接创作特效。

让 AI 写 GLSL

复制下方提示词，粘贴到任意 AI 工具中，将生成的 GLSL 代码复制后粘贴进 Shader 容器的源码输入框，点击确认后，效果即可在容器内渲染出来。（描述想要的效果替换进提示词中）

生成一个glsl的shader，效果：流动的渐变色
设置2个参数：
uniform float u_time;
uniform sampler2D u_texture;
u_time是时间戳：毫秒
1.只要片段着色器，不要从顶点着色器输入坐标
2.计算uv坐标时候使用textureSize(u_texture, 0)获取纹理大小
其它参数都改为const，并初始化默认值，范围写到注释中，写在变量上面，格式为：// 变量功能: [min, max];
如：
// 单个波纹生命周期（秒）：[1, 20]
const float WAVE_LIFETIME = 8.0;

GLSL 格式要求说明

使用上方提供的提示词向任意 AI 工具发起请求，生成的代码通常已符合 Shader 容器的格式要求，可直接粘贴使用。如果渲染效果异常，可尝试重新生成，或按照以下规则排查：

Shader 容器对 GLSL 代码有以下格式要求：

1. 仅需片段着色器

只需提供片段着色器（Fragment Shader）代码，不需要顶点着色器，也不从顶点着色器传入坐标。

2. 必须声明的 uniform 参数

代码中必须声明以下两个 uniform 变量，名称固定不可更改：

uniform float u_time;       // 时间戳，单位：毫秒
uniform sampler2D u_texture; // 画布纹理

3. UV 坐标的获取方式

计算 UV 坐标时，必须通过 textureSize 获取纹理尺寸，不可硬编码分辨率：

vec2 uv = gl_FragCoord.xy / vec2(textureSize(u_texture, 0));

4. 自定义参数须声明为 const

除上述两个 uniform 外，其他可调参数一律声明为 const，并附上默认值。每个参数上方需添加注释，说明其功能和取值范围，格式如下：

// 单个波纹生命周期（秒）：[1, 20]
const float WAVE_LIFETIME = 8.0;

这个注释格式是设置面板自动解析参数的依据——面板会读取注释中的范围信息，将其映射为可拖拽调整的滑块。

复制粘贴 容器与组