02 Dibujar formas con matemáticas

fwidth: bordes nítidos a cualquier escala

La mitad izquierda usa una anchura fija; la derecha, fwidth. Amplía las coordenadas y compara.

Anchura fijafwidth

Zoom de coordenadas6.00

160

Anchura fija (izquierda)0.010

0.0010.1

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);
  p *= 6.000;                        // ampliar las coordenadas -> patrón más denso
  float d = length(fract(p) - 0.5) - 0.3;     // SDF de un círculo por celda
  float fixedMask = 1.0 - smoothstep(0.0, 0.010, d);
  float w = fwidth(d);                    // cuánto cambia d entre píxeles vecinos
  float smartMask = 1.0 - smoothstep(-w, w, d);
  float mask = vUv.x < 0.5 ? fixedMask : smartMask;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  if (abs(vUv.x - 0.5) < 0.002) color = vec3(1.0);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  p *= 6.000;                        // ampliar las coordenadas -> patrón más denso
  float d = length(fract(p) - 0.5) - 0.3;     // SDF de un círculo por celda
  float fixedMask = 1.0 - smoothstep(0.0, 0.010, d);
  float w = fwidth(d);                    // cuánto cambia d entre píxeles vecinos
  float smartMask = 1.0 - smoothstep(-w, w, d);
  float mask = vUv.x < 0.5 ? fixedMask : smartMask;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  if (abs(vUv.x - 0.5) < 0.002) color = vec3(1.0);
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

fwidth(d) mide cuánto cambia d entre píxeles vecinos; como anchura de smoothstep, mantiene un suavizado de un píxel a cualquier escala.

Pruébalo

Lleva el zoom a 40 y compara las mitades
Amplía la anchura fija de la izquierda: de lejos se difumina; redúcela: de cerca aparecen dientes de sierra