做动画用的着色器效果，放在时间轴上
现成的效果做不出你要的东西时，就把它写成代码：逐像素上色的着色器 （外部网站，在新标签页打开）、元素逐帧接着上一帧运动的模拟，或用 WebGPU （外部网站，在新标签页打开） 画出整个图层的程序。它的设置是普通属性，在时间轴上打关键帧；预览什么样，导出就什么样。
一个画面程序，实时画出
下面的水面是此刻在你浏览器里运行的画面程序，所在的沙箱和编辑器的画面程序效果用的是同一个。它和作品集里的其他几件一样，是为本站手写的。
三种程序
- 着色器：WGSL （外部网站，在新标签页打开） 程序，对图层这一帧的每个像素各运行一次，用来做图案、调色、扭曲和形状。它能读取图层画面、设置、时间和帧号。
- 模拟：WGSL 程序，处理一组由显卡逐帧记住状态的元素（例如位置和速度），用来做粒子、布料、波纹和拖尾。你写元素怎样开始、怎样前进、怎样画出，其余由编辑器负责。
- 画面程序：用 WebGPU 画出整个图层的 JavaScript （外部网站，在新标签页打开） 模块，需要时可以分多趟，用来做前两种做不出的东西。它在另一个源上的沙箱里运行，碰不到编辑器、你的项目和网络。
设置和任何属性一样打关键帧
程序声明的每个设置——带滑块范围的数值、角度、颜色、图层上的点、开关或选项——都会成为效果在效果控件里的属性。可以拖动它，打关键帧 （在新标签页打开）并在图表编辑器 （在新标签页打开）里调曲线，或用表达式 （在新标签页打开）驱动。程序每一帧都读取它的值。
- 程序有几行、几个设置。
- 重新打开程序。
- 程序声明的一个设置。
- 给这个设置打关键帧，和别的属性一样。
编写或粘贴程序
选中图层，添加效果：在效果和预设里。
打开程序：在效果控件里点编辑程序。
编写或粘贴源码到源码（WGSL），并在参数（JSON）里列出它读取的设置。
应用。程序先在你的电脑上检查、编译并试跑；只有通过的程序才会写进项目，算一步，可以撤销。被拒时，对话框会说明原因，能定位时给出你自己源码里的行号。
- 程序的源码。
- 它读取的设置，一行一个。
- 检查并试跑程序，然后应用。
预览什么样，导出就什么样
- 查看器和导出运行同一段程序，在同一台电脑上得到相同的帧；直接跳到某一帧和播放到那一帧结果一样。
- 程序没有时钟，也不用随机数：时间来自帧号，随机来自标准库的噪声，所以循环可以正好结束在开始的地方。
- 效果可以和关键帧、蒙版、表达式及其他效果叠用，并像任何合成一样导出 （在新标签页打开）为视频、GIF 或图像序列。
- 渲染时出错的程序会在问题里报告。
或者说给 Agent 听
把效果描述给 Agent （在新标签页打开），三种程序它都能写。它在你的电脑上试跑每一版、看画出来的帧并修改程序，然后作为草稿 （在新标签页打开）交给你审核。由 Agent 写程序属于 Agent 订阅，订阅即将开放；自己写是免费的。
常见问题
- 免费吗？
- 免费。编写、粘贴程序，给设置打关键帧并导出，都在浏览器里免费完成，无需账户。只有让 Agent 写程序才用到 Agent 订阅，订阅即将开放。
- 用什么语言写？
- 着色器与模拟效果用 WebGPU 的着色语言 WGSL；画面程序是用 WebGPU 绘图的 JavaScript 模块。GLSL 着色器需要先改写成 WGSL。
- 哪些浏览器能运行？
- 支持 WebGPU 的浏览器，例如电脑上较新的 Chrome 或 Edge。没有 WebGPU 的地方，程序画不出来。
- 能做循环播放的生成式艺术吗？
- 能。程序只被告知帧号和时间，没有自己的时钟或随机种子，所以可以正好结束在开始的地方，作品集里的每一件都是这样。