A Apéndice

Zona de pruebas: pega cualquier shader

Pega un shader de fragmentos escrito por un agente, encontrado en internet o escrito por ti. Funcionan void main de WebGL 1 y mainImage de Shadertoy (sin texturas iChannel); iTime, iResolution, iMouse y u_time, u_resolution, u_mouse ya están conectados.

Código real de la GPUArrastra los números o edita el código

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

void main() {
  // sustituye todo: funcionan tanto void main como mainImage de Shadertoy
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = atan(p.y, p.x) + uTime * 0.3;   // ① ⑤ espacio y tiempo: el ángulo polar, girando con el tiempo
  float d = length(p) - (0.25 + 0.08 * cos(5.0 * a));   // ② forma: distancia a una flor de cinco pétalos
  float fill = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ borde: relleno suavizado
  float glow = 0.01 / abs(d);   // ③ borde: resplandor
  vec3 color = mix(vec3(0.1, 0.2, 0.5), vec3(1.0, 0.6, 0.3), fill) + glow;   // ④ color: mezclar dos colores y añadir el resplandor
  gl_FragColor = vec4(color, 1.0);
}

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

void main() {
  // sustituye todo: funcionan tanto void main como mainImage de Shadertoy
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = atan(p.y, p.x) + uTime * 0.3;   // ① ⑤ espacio y tiempo: el ángulo polar, girando con el tiempo
  float d = length(p) - (0.25 + 0.08 * cos(5.0 * a));   // ② forma: distancia a una flor de cinco pétalos
  float fill = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ borde: relleno suavizado
  float glow = 0.01 / abs(d);   // ③ borde: resplandor
  vec3 color = mix(vec3(0.1, 0.2, 0.5), vec3(1.0, 0.6, 0.3), fill) + glow;   // ④ color: mezclar dos colores y añadir el resplandor
  gl_FragColor = vec4(color, 1.0);
}

Lado JS

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

Para leer código desconocido, sepáralo primero en las cinco capas (espacio, forma, borde, color, tiempo), abre el depurador de píxeles y muestra cada variable en el lienzo. Antes de cambiar un número, predice qué pasará: donde te equivoques está lo que aún no has entendido.

Pruébalo

Selecciona todo el código y pega un shader de Shadertoy (de los que usan mainImage)
Pide a un agente un shader con comentarios en cada línea por capa: espacio → forma → borde → color → tiempo; pégalo y léelo
Abre el depurador de píxeles y muestra d en el lienzo: el mapa de distancias de la capa de forma
Antes de cambiar un número, di qué hará la imagen y luego cámbialo para comprobarlo