11 常见陷阱与调试

常用运算一览

一条灰度渐变作为输入。切换运算，看它怎样改变。

运算

运算参数2.00

0.15

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

void main() {
  float x = vUv.x;
  float result = pow(x, 2.000);
  float curve = 1.0 - smoothstep(0.0, 0.012, abs(vUv.y - result));
  vec3 color = mix(vec3(result), vec3(0.96, 0.43, 0.30), curve);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float x = vUv.x;
  float result = pow(x, 2.000);
  float curve = 1.0 - smoothstep(0.0, 0.012, abs(vUv.y - result));
  vec3 color = mix(vec3(result), vec3(0.96, 0.43, 0.30), curve);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

abs、clamp、pow、floor、min、max：把一条 0～1 的直线弯成你要的形状。

试一试

逐个切换运算
打开像素调试，读出 x 和 result