02 用数学画形状

smoothstep：平滑过渡

把硬边界，变成柔和的过渡。

过渡中心0.50

0.20.8

过渡宽度0.30

0.010.4

习题调参数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);
}

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);
}

JS 这一侧

smoothstep(a, b, x)：从 a 到 b，平滑地由 0 过渡到 1。要求 a < b。

试一试

把宽度调到最小，接近 step
把宽度调到最大，过渡铺满