WebGL 纹理绘制得很暗

Question

我正在尝试使用 HTML5 和 WebGL 显示多个纹理对象。问题是纹理被着色得很暗。我相信它必须与我的着色器的生成或使用方式有关。我一直在使用https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL 的默认着色器。当我使用一个对象（例如他们的示例）时效果很好，但是如果我使用两个对象，则两个对象都被绘制得很暗。我的片段着色器在 5 个对象之间共享 4 个纹理，如下所示：

varying highp vec2 vTextureCoord;varying highp vec3 vLighting;
uniform sampler2D u_image0;
uniform sampler2D u_image1;
uniform sampler2D u_image2;
uniform sampler2D u_image3;
void main(void){
highp vec4 texelColor0 = texture2D(u_image0, vec2(vTextureCoord.s, vTextureCoord.t));
highp vec4 texelColor1 = texture2D(u_image1, vec2(vTextureCoord.s, vTextureCoord.t));
highp vec4 texelColor2 = texture2D(u_image2, vec2(vTextureCoord.s, vTextureCoord.t));
highp vec4 texelColor3 = texture2D(u_image3, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = 
vec4(texelColor0.rgb * vLighting, texelColor0.a) * 
vec4(texelColor1.rgb * vLighting, texelColor1.a) * 
vec4(texelColor2.rgb * vLighting, texelColor2.a) * 
vec4(texelColor3.rgb * vLighting, texelColor3.a);
}

片段着色器：

attribute highp vec3 aVertexNormal;
            attribute highp vec3 aVertexPosition;
            attribute highp vec2 aTextureCoord;

            uniform highp mat4 uNormalMatrix;
            uniform highp mat4 uMVMatrix;
            uniform highp mat4 uPMatrix;

            varying highp vec2 vTextureCoord;
            varying highp vec3 vLighting;

            void main(void) {
                gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
                vTextureCoord = aTextureCoord;

                // Apply lighting effect
                highp vec3 ambientLight = vec3(0.5, 0.5, 0.5);
                highp vec3 directionalLightColor = vec3(1.0, 1.0, 1.0);
                highp vec3 directionalVector = vec3(1, 2.0, 2.0);

                highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);

                highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
                vLighting = ambientLight + (directionalLightColor * directional);
            }

我也在每个绘制周期开始时调用它：

gl.clearColor(255.0, 255.0, 255.0, 1.0);
    gl.clearDepth(1.0); // Clear everything
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

我的画布画了这样的东西，它在对象的某些部分很亮，而在其他部分很暗。我可以做些什么来创建一个均匀分布但看起来“正常”且没有“眩光”但看起来纹理更“清晰”的对象？

这是我的场景的链接： http://i.imgur.com/S9fwrEm.png

Answer 1

似乎问题出在 gl_fragColor 计算上。我认为使用多个纹理可以将每个纹理相乘。然而，将当前纹理乘以其他未使用的纹理会使当前绘制的纹理变暗，这是有道理的。如果你只使用类似的东西：

gl_fragColor = 
vec4(texelColor0.rgb * vLighting, texelColor0.a);
}

然后画得很好。但是，这似乎不合适，因为我为每个绘制的纹理使用一个纹理的一个 fragColor。如果有人知道如何根据当前使用的纹理更改 fragColors，请留下另一个答案，谢谢！

Answer 2

颜色已关闭，因为您在片段着色器中混合了来自 4 种不同纹理的 4 种不同“颜色”。结果当然是错误的。你这样做的方式不是你如何绘制多个模型。如果你对此很认真，你应该去找一些关于 webGL 的教程。