01 Fragmentos y datos

Una regla pinta toda la imagen

Arrastra el radio. Cada posición ejecuta el mismo programa y obtiene su propio color.

Radio del círculo0.30

0.050.48

Suavidad del borde0.040

0.0010.2

EjercicioEditar código0%

Convierte el círculo en un cuadrado editando el código, sin mover los deslizadores

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 d = length(p);
  float circle = 1.0 - smoothstep(0.300, 0.300 + 0.040, d);
  vec3 gradient = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), vUv.y);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), gradient, circle);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p);
  float circle = 1.0 - smoothstep(0.300, 0.300 + 0.040, d);
  vec3 gradient = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), vUv.y);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), gradient, circle);
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

Los vértices fijan forma y posición → los fragmentos calculan el color → aparece la imagen. Mismo código, distinta posición, distinto resultado.

Pruébalo

Haz que el borde del círculo sea muy difuso
Abre «Depurador de píxeles», pon el puntero en el borde del círculo y lee d y circle