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的教程。

WebGL纹理绘制得非常暗

2 个答案: