02 Dibujar formas con matemáticas

step: un interruptor

Por debajo del umbral obtienes 0; en caso contrario, 1.

Umbral edge0.50

EjercicioAjustar valores0%

Sitúa el límite al 30 %

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

void main() {
  float mask = step(0.500, 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 = step(0.500, 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

step(edge, x) devuelve 0 si x < edge; en caso contrario, 1. Es el «if» más barato de un shader.

Pruébalo

Pon el umbral en 0.3
Cambia vUv.x por vUv.y: el límite se vuelve horizontal