A 附录

游乐场：粘贴任何 shader

把 agent 写的、网上找到的、自己写的片元 shader 粘贴进来。支持 WebGL 1 的 void main，也支持 Shadertoy 的 mainImage（不含 iChannel 纹理）；iTime、iResolution、iMouse 和 u_time、u_resolution、u_mouse 会自动接上。

GPU 实际源码拖动数字，或直接改代码

#extension GL_OES_standard_derivatives : enable
precision mediump float;
uniform vec2 uResolution;
uniform highp float uTime;

void main() {
  // 可以整段替换：void main 或 Shadertoy 的 mainImage 都行
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = atan(p.y, p.x) + uTime * 0.3;   // ① ⑤ 坐标与时间：极坐标的角度，随时间旋转
  float d = length(p) - (0.25 + 0.08 * cos(5.0 * a));   // ② 形状：五瓣花的距离
  float fill = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ 边缘：抗锯齿的实心
  float glow = 0.01 / abs(d);   // ③ 边缘：发光
  vec3 color = mix(vec3(0.1, 0.2, 0.5), vec3(1.0, 0.6, 0.3), fill) + glow;   // ④ 着色：两种颜色混合，再加上光晕
  gl_FragColor = vec4(color, 1.0);
}

#extension GL_OES_standard_derivatives : enable
precision mediump float;
uniform vec2 uResolution;
uniform highp float uTime;

void main() {
  // 可以整段替换：void main 或 Shadertoy 的 mainImage 都行
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = atan(p.y, p.x) + uTime * 0.3;   // ① ⑤ 坐标与时间：极坐标的角度，随时间旋转
  float d = length(p) - (0.25 + 0.08 * cos(5.0 * a));   // ② 形状：五瓣花的距离
  float fill = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ 边缘：抗锯齿的实心
  float glow = 0.01 / abs(d);   // ③ 边缘：发光
  vec3 color = mix(vec3(0.1, 0.2, 0.5), vec3(1.0, 0.6, 0.3), fill) + glow;   // ④ 着色：两种颜色混合，再加上光晕
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

gl.uniform2f(uResolution, …, …)
gl.uniform1f(uTime, 0.00)

读一段陌生代码：先按五层（坐标、形状、边缘、着色、时间）给它分层，再打开像素调试，把每个变量显示在画面上看一看。改一个数之前先预测画面会怎样变，猜错的地方，就是还没懂的地方。

试一试

全选代码，粘贴一段 Shadertoy 上的 shader（mainImage 写法）
让 agent 写一个 shader，并要求它按“坐标 → 形状 → 边缘 → 着色 → 时间”逐行注释，粘贴进来对照着读
打开像素调试，在“画面显示”里选 d：看形状层算出的距离图
改一个数之前，先说出画面会怎样变，再改它验证