Vertex Color 非预期行为排查：渐变效果异常问题

问题描述 #

尝试使用varying实现顶点颜色渐变，设置三个顶点为红色（[255,0,0,1]）、一个顶点为黄色（[255,255,0,1]）后，未出现预期的左下侧黄色渐变，反而生成半三角区域。图形创建、坐标变换功能正常，仅颜色效果不符合预期。

相关代码 #

顶点着色器 #

const vSource = `
    attribute vec4 vPosition;
    attribute vec4 vColor;
    varying vec4 fColor;
    void main() {
        gl_Position = vPosition;
        fColor = vColor;
    }
`;

片元着色器 #

const fSource = `
    precision mediump float;
    varying vec4 fColor;
    void main() {
        gl_FragColor = fColor;
    }
`;

渲染函数 #

render = (gl, program, vBuffer, cBuffer) => {
    const vertices = [];
    const colors = [];

    for (let j = 0; j < this.vertices.length; j++) {
      vertices.push(this.vertices[j].coordinate);
      colors.push(this.vertices[j].color);
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);

    const vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition,2,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(vPosition);

    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

    const vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor,4,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(vColor);

    if (this.shape == "line") {
      gl.drawArrays(gl.LINES, 0, vertices.length);
    } else {
      gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length);
    }
};

异常原因排查及解决 #

1. 颜色值范围错误（核心问题） #

WebGL中片元颜色的RGB分量要求是0.0~1.0的浮点数，你传入的255这类整数会被解析为255.0，超出范围后会被WebGL自动截断为1.0。虽然红色[255,0,0,1]会被正确处理为[1.0,0.0,0.0,1.0]，但如果flatten函数没有对颜色值做归一化处理，会导致颜色插值计算异常，甚至部分顶点颜色被错误截断。

解决方法：
将颜色值归一化到0~1区间，把[255,0,0,1]改为[1.0,0.0,0.0,1.0]，[255,255,0,1]改为[1.0,1.0,0.0,1.0]，或者在传入前统一除以255。

2. TRIANGLE_FAN绘制逻辑导致的视觉效果误解 #

使用gl.TRIANGLE_FAN绘制4个顶点时，WebGL会生成3个三角形：

• 第1个：顶点0 → 顶点1 → 顶点2
• 第2个：顶点0 → 顶点2 → 顶点3

如果黄色顶点是第4个（索引3），那么只有第2个三角形会包含黄色顶点，视觉上就会呈现“半三角区域”的渐变效果，而非你预期的整个左下侧。

解决方法：

• 调整顶点顺序，确保黄色顶点的位置能覆盖你需要渐变的区域；
• 若需要更灵活的颜色渐变，可改用gl.TRIANGLES绘制，手动定义包含黄色顶点的三角形组合。

3. 顶点与颜色的绑定对应关系验证 #

确认this.vertices数组中，你标记为黄色的顶点坐标确实是左下侧的顶点，避免颜色与坐标绑定错位。可以通过打印vertices和colors数组，检查每个坐标对应的颜色值是否正确。

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