02 Dibujar formas con matemáticas

smoothstep: un interruptor suave

Convierte un borde duro en una transición suave.

Centro0.50

0.20.8

Anchura0.30

0.010.4

EjercicioAjustar valores0%

Crea esta transición estrecha a la derecha

Se ejecuta una vez por píxelArrastra los números o edita el código

void main() {
  float mask = smoothstep(0.500 - 0.300 / 2.0,
                          0.500 + 0.300 / 2.0, vUv.x);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float mask = smoothstep(0.500 - 0.300 / 2.0,
                          0.500 + 0.300 / 2.0, vUv.x);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  gl_FragColor = vec4(color, 1.0);
}

Lado JS

smoothstep(a, b, x) pasa suavemente de 0 a 1 entre a y b. Requiere a < b.

Pruébalo

Reduce la anchura al mínimo: casi un step
Aumenta la anchura al máximo: la transición llena el lienzo