03 Tiempo, interacción y repetición

uniform: una imagen que te sigue

Mueve el puntero sobre el lienzo o tócalo para pasar su posición a la GPU.

uPointer0.50, 0.50

Tamaño de la mancha0.15

0.030.4

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

void main() {
  vec2 p = (gl_FragCoord.xy - uPointer * uResolution) / min(uResolution.x, uResolution.y);
  float glow = exp(-dot(p, p) / (0.150 * 0.150));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), glow);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - uPointer * uResolution) / min(uResolution.x, uResolution.y);
  float glow = exp(-dot(p, p) / (0.150 * 0.150));
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.96, 0.43, 0.30), glow);
  gl_FragColor = vec4(color, 1.0);
}

Lado JS

gl.uniform2f(uResolution, …, …)
gl.uniform2f(uPointer, 0.50, 0.50)

canvas.addEventListener('pointermove', (e) => {
  pointer = [e.offsetX / width, 1 - e.offsetY / height]
})
gl.uniform2f(uPointerLocation, ...pointer)

uPointer es solo un vec2; JS gestiona los eventos y entrega la coordenada a la GPU.

Pruébalo

Mueve el puntero sobre el lienzo
Cambia exp por 1.0 - smoothstep(...) para obtener una mancha de borde duro