03 时间、交互与重复

uniform：把时间传进来

JavaScript 每帧传入秒数。暂停后拖动时间，画面跟着跳。

速度1.00

-44

波纹密度5.00

112

跳到时间 · 秒0.00

010

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float wave = sin(length(p) * 5.000 * 6.283185 - uTime * 1.000);
  float t = wave * 0.5 + 0.5;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), t);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float wave = sin(length(p) * 5.000 * 6.283185 - uTime * 1.000);
  float t = wave * 0.5 + 0.5;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), t);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

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

// 每一帧（requestAnimationFrame）
const seconds = elapsed + jump
gl.uniform1f(uTimeLocation, seconds)
gl.drawElements(...)

Shader 不会计时，也不记得上一帧。JS 每帧传入新的 uTime，同一个时间永远算出同一画面。

试一试

暂停，再调「跳到时间」，画面随时间跳转
把速度调成负数，波纹往回走