02 用数学画形状

step：硬阈值

小于阈值是 0，否则是 1。

阈值 edge0.50

习题调参数0%

把分界线放到 30% 的位置

每个像素运行一次拖动数字，或直接改代码

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

JS 这一侧

step(edge, x)：x < edge 输出 0，否则输出 1。它是 shader 里最便宜的 if。

试一试

把阈值调到 0.3
把 vUv.x 改成 vUv.y，分界线横过来