02 Dibujar formas con matemáticas

SDF: distancias con signo

Añade un signo a las distancias para unir, intersectar y restar formas.

Radio0.22

0.080.35

Separación entre círculos0.30

0.050.7

Combinar

EjercicioAjustar valores0%

Crea una luna creciente

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.300 / 2.0, 0.0)) - 0.220;
  float b = length(p - vec2( 0.300 / 2.0, 0.0)) - 0.220;
  float d = min(a, b);
  float inside = 1.0 - step(0.0, d);
  float contour = 0.5 + 0.5 * cos(d * 100.0);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), inside) * (0.6 + 0.4 * contour);
  color += vec3(1.0 - smoothstep(0.0, 0.006, abs(d)));
  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.300 / 2.0, 0.0)) - 0.220;
  float b = length(p - vec2( 0.300 / 2.0, 0.0)) - 0.220;
  float d = min(a, b);
  float inside = 1.0 - step(0.0, d);
  float contour = 0.5 + 0.5 * cos(d * 100.0);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), inside) * (0.6 + 0.4 * contour);
  color += vec3(1.0 - smoothstep(0.0, 0.006, abs(d)));
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

Distancia con signo: por debajo de 0 estás dentro; 0 es el borde. min une, max intersecta y max(a, −b) resta.

Pruébalo

Prueba las tres combinaciones
Abre el depurador de píxeles y comprueba que d es negativo dentro del círculo