智能容器

什么是智能容器

智能容器是一种特殊的画布图层类型，目前支持两类内容：

Shader 特效：

嵌入基于 GLSL Shader 的动态视觉特效，适合制作流光、噪声、粒子、液态、渐变动画等效果。可以通过预置特效库快速应用效果，也可以粘贴自定义 GLSL 代码来加载专属特效，为设计稿带来更丰富的动态表现力。

3D 模型：

支持上传 .glb 文件，在容器内加载 3D 内容，适合展示产品模型、空间物体、品牌物料等带立体表现的设计内容。

一个智能容器在同一时刻只能使用一种内容类型。也就是说，一个容器要么承载 Shader 特效，要么承载 3D 模型，不能同时叠加显示两者。

创建智能容器

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

直接点击图标：

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

悬停图标：

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

容器状态

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

使用 3D 模型

导入 3D 模型

支持通过上传按钮，上传 GLB 格式的模型文件。

调整模型视角与旋转

加载模型后，你可以在右侧属性面板中调整模型旋转角度、速度、切换视角，默认开启自动旋转。

鼠标交互

3D 模型支持直接用鼠标拖动调整视角，注意只有当智能容器处于播放态时，按住鼠标左右/上下拖动模型，会改变模型的左右朝向/俯仰角度；当智能容易处于静止态时，拖拽模型等同于在画布上平移同层。

调整模型灯光

3D 模型支持在属性面板中调整基础灯光效果，包括主光强度和颜色、主光高度角、主光方位角、环境光强度和颜色。可以通过这些参数快速调整模型的明暗关系和整体氛围，让模型更贴合当前设计稿的视觉风格。

使用建议

  • 容器尺寸会直接影响模型在画布中的展示范围，建议先确定容器大小，再微调模型角度。
  • 同时播放多个 3D 模型会明显影响画布性能表现，建议按需使用。

使用 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;

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

复制粘贴 容器与组