03 Tiempo, interacción y repetición

uniform: pasar el tiempo al shader

JavaScript pasa los segundos en cada fotograma. Pausa y arrastra el tiempo: la imagen salta.

Velocidad1.00

-44

Densidad de ondas5.00

112

Saltar al tiempo · s0.00

010

Se ejecuta una vez por píxelArrastra los números o edita el código

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);
}

Lado JS

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

// cada fotograma (requestAnimationFrame)
const seconds = elapsed + jump
gl.uniform1f(uTimeLocation, seconds)
gl.drawElements(...)

Un shader no puede medir el tiempo ni recordar el fotograma anterior. JS pasa un nuevo uTime en cada fotograma; el mismo tiempo siempre da la misma imagen.

Pruébalo

Pausa y cambia «Saltar al tiempo»: la imagen cambia con él
Haz negativa la velocidad: las ondas retroceden