为何基于片段坐标的片段着色器输出饱和纯色而非渐变色彩？

你用以下着色器代码尝试基于片段位置为图像上色：

顶点着色器：

varying vec2 vXY;
void main(void) {
    vXY = position.xy;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片元着色器：

precision mediump float;
varying vec2 vXY;
void main(void) {
    vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
    color.x = vXY.x;
    color.y = vXY.y;
    gl_FragColor = color;
}

运行后图像被分为四个纯色方块，但你认为position.xy的取值范围是-1到1，颜色应该随位置逐渐变亮，而非呈现恒定1.0的饱和状态，想知道原因。

原因与解决方法 #

• 核心问题：颜色值的范围限制
  GLSL中，片元着色器输出的颜色分量（gl_FragColor的x/y/z/a）要求是0.0到1.0的范围，超出这个范围的值会被自动截断（clamp）到0.0或1.0。

  你的position.xy取值是-1到1，当x或y为负数时，会被截断为0.0；当x或y为正数时，直接被截断为1.0，所以最终只会得到四个纯色组合：

  • 左上（x负、y正）：(0,1,0,1) → 绿色
  • 右上（x正、y正）：(1,1,0,1) → 黄色
  • 左下（x负、y负）：(0,0,0,1) → 黑色
  • 右下（x正、y负）：(1,0,0,1) → 红色

• 解决方法：坐标归一化
  把-1到1的坐标映射到0到1的范围即可实现渐变，修改片元着色器里的颜色赋值逻辑：

  color.x = (vXY.x + 1.0) / 2.0; // 将-1→1转为0→1
  color.y = (vXY.y + 1.0) / 2.0;
  

  这样x从-1到1时，红色分量会从0平滑过渡到1；y从-1到1时，绿色分量从0过渡到1，最终会得到从左下黑色到右上黄色的渐变效果。

内容的提问来源于stack exchange，提问作者Jonas