12 De la imagen a la receta

Bordes: una distancia, cinco maneras de dibujarla

La misma forma; solo cambia la línea «distancia → luz»: borde duro, suavizado, contorno, resplandor o líneas de nivel.

Borde

Anchura w (contorno, resplandor, nivel)0.010

0.0020.04

EjercicioAjustar valores0%

Crea este contorno luminoso de neón

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 a = length(p - vec2(-0.1, 0.0)) - 0.2;
  float b = length(p - vec2(0.17, 0.08)) - 0.12;
  float d = min(a, b);   // distancia a los dos círculos unidos
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // distancia → luz: solo cambia esta línea
  vec3 color = vec3(0.06, 0.10, 0.14) + vec3(0.48, 0.83, 0.69) * ink;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.1, 0.0)) - 0.2;
  float b = length(p - vec2(0.17, 0.08)) - 0.12;
  float d = min(a, b);   // distancia a los dos círculos unidos
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // distancia → luz: solo cambia esta línea
  vec3 color = vec3(0.06, 0.10, 0.14) + vec3(0.48, 0.83, 0.69) * ink;
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

d es la distancia al borde. step y smoothstep rellenan la forma; abs(d) hace positivos ambos lados del borde, y restar w crea un contorno; w / abs(d) brilla cerca del borde y crea resplandor; cos(d / w) dibuja líneas de nivel.

Pruébalo

Alterna entre step y suavizado y compara los bordes
Elige resplandor y aumenta w
Elige líneas de nivel: las líneas siguen la forma combinada de los dos círculos