11 常见陷阱与调试

没有 printf：用颜色调试

把一个中间值输出成颜色。注意：负数、大于 1 的数和 NaN 显示出来都会误导你。

要看的值

显示方式

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

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p) - 0.3;       // 圆内为负
  float value = d;
  vec3 color = vec3(value);                  // 负数被截成 0（黑）
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p) - 0.3;       // 圆内为负
  float value = d;
  vec3 color = vec3(value);                  // 负数被截成 0（黑）
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧gl.uniform2f(uResolution, …, …)

shader 没有 printf：把值输出成颜色。注意负数和大于 1 的值会被截断，NaN 的样子取决于设备。

试一试

用「直接输出」看 d：圆内为什么全黑？
切到「超范围标记」，蓝色是负数
选 log(d)，看 NaN 出现在哪里