javascript - WebGL:同时使用纹理和颜色缓冲区

Question

This question ，OP 报告执行指令时发出警告 gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); 让我思考:如果我想要一个具有两个(假设:平坦)形状的场景怎么办其中，一个有纹理，一个有统一的颜色？在片段着色器的 main 中，如果我取消注释第二条指令并注释掉第一条指令，如下所示:

void main(void) {
    //gl_FragColor = vColor;
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}

警告仍在发出，但这次是关于指令gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);。
如果我将两者都保留为未注释，它仍然会提示 vertexColorAttribute 因为显然它被覆盖了。
那么我怎样才能两者兼得呢？我要使用两个不同的片段着色器吗？如果可以的话，该怎么办？

Answer 1

正确的方法是使用两个单独的着色器，因为您想要渲染其中一个有纹理或彩色。

以内存和执行时间为代价，您的顶点数据中可能始终具有颜色和纹理属性，并根据您的用例使用某种混合。

正如您所描述的，您可以使用简单的加法混合，因为大多数 WebGL 实现在未绑定(bind)纹理时默认绑定(bind)黑色像素 [0,0,0,255] 纹理。

因此有类似的东西

void main(void) {
    gl_FragColor = vColor + texture2D(uSampler, vTexCoord);
}

在没有绑定(bind)纹理时渲染颜色，在颜色为 [0,0,0,0] 时正确渲染绑定(bind)纹理。

有关各种 blend modes 的概述，请参见维基百科。

作为一个更昂贵的解决方案，您可以使用统一作为标志来指示您要使用的“方法”并相应地在着色器内进行分支。但这仍然需要所有顶点属性都可用，而且分支在某些平台上效率相当低。

void main(void) {
    if (uMethod == 1)
        gl_FragColor = vColor;
    else if (uMethod == 2)
        gl_FragColor = texture2D(uSampler, vTexCoord);
    else
        gl_FragColor = vColor + texture2D(uSampler, vTexCoord);
}