12 De la imagen a la receta

Cinco capas: de la imagen al código

Casi todo shader 2D se divide en cinco capas: espacio, forma, borde, color y tiempo. Cambia una capa cada vez y observa el resultado.

① Espacio

② Forma

③ Borde

④ Color

⑤ Tiempo · giroNo

EjercicioAjustar valores0%

Lee el objetivo capa a capa: ¿cómo cambia el espacio? ¿qué forma hay? ¿rellena o con contorno? ¿qué determina el color?

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);   // ① espacio: origen en el centro de la imagen
  vec2 q = p;   // conservar las coordenadas originales para colorear
  float d = length(p) - 0.15;   // ② forma: distancia a la forma
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ borde: distancia → luz
  vec3 tint = vec3(0.48, 0.83, 0.69);   // ④ color: de dónde viene el color
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);   // ① espacio: origen en el centro de la imagen
  vec2 q = p;   // conservar las coordenadas originales para colorear
  float d = length(p) - 0.15;   // ② forma: distancia a la forma
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // ③ borde: distancia → luz
  vec3 tint = vec3(0.48, 0.83, 0.69);   // ④ color: de dónde viene el color
  vec3 color = vec3(0.06, 0.10, 0.14) + tint * ink;
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

Mira una imagen y hazte cinco preguntas: ① ¿cómo se transforma el espacio? ② ¿cuál es la distancia a la forma? ③ ¿cómo se convierte la distancia en luz y oscuridad? ④ ¿de dónde viene el color? ⑤ ¿qué se mueve? Cada respuesta ocupa una o dos líneas de código.

Pruébalo

Cambia una capa cada vez y explica qué cambió en la imagen
Abre el depurador de píxeles y muestra d en el lienzo: la capa de forma solo calcula un mapa de distancias
Cambia el espacio a repetición y luego cambia la forma: las dos capas son independientes