WebGL Textures Drawn Very Dark

Question

I'm trying to display multiple textured objects using HTML5 and WebGL. The problem is that the textures are being shaded very dark. I believe it has to be something with the way my shaders are being generated or used. I have been using the default shaders from https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL. It works fine when I use one object such as in their example, but if I use two, both objects are drawn very dark. My fragment shader with 4 textures shared between 5 objects looks like this:

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);
}

The fragment shader:

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);
            }

I also call this at the start of each draw cycle:

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);

My canvas draws something like this, it is very light on some parts of the objects and very dark on others. What can I do to create an evenly distributed but "normal" looking object with no "glare" but more "clear" looking textures?

Here is a link to what my scene looks like: https://i.stack.imgur.com/cpIzi.png

It's not entirely clear to me what you're actually trying to achieve. Depending on what it is, this might be helpful: http://stackoverflow.com/q/24356075/3530129. — Reto Koradi, Jul 28 '15 at 02:29

score 0 · Answer 1 · answered Jul 28 '15 at 00:38

It seems that the problem was with the gl_fragColor calculation. I thought that using multiple textures you were to multiply each together. However this would make sense that multiplying the current texture by the others not in use would darken the currently drawn textures. If you only use something like:

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

Then it is drawn fine. However, this doesn't seem proper since I am using one fragColor of one texture for each texture drawn. If anyone has insight as to how to change fragColors based on the current texture being used, then please leave another answer, Thanks!

score 0 · Answer 2 · answered Jul 28 '15 at 00:53

0

The color is off because you are blending in 4 different "colors" from 4 different texture in your fragment shader. Of course the result will be wrong. The way your doing it is not how you draw multiple models. If you are serious about this you should go find some tutorials on webGL.

answered Jul 28 '15 at 00:53

user17739521

185
1
6

Yeah, I realized that part after I posted the question. This may be a new topic but I feel it is related enough to my original post. If you wouldn't mind explaining how you can switch between different colors? Can you create an array of fragColors, or do you need multiple shaders, or...? I realize an easy answer is to say go find some tutorials but I have found it hard to find good tutorials regarding shader progams for WebGL. I do however appreciate you taking a look at my question. Thank you. – Ez Bs Jul 28 '15 at 01:03
Also, I believe I am binding each sampler2D texture appropriately to each object with a loop like this: // Specify the texture to map onto the faces. gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, textures[bufferObjects[i].textureIndex]); gl.uniform1i(gl.getUniformLocation(shaderProgram, "u_image" + bufferObjects[i].textureIndex), 0); – Ez Bs Jul 28 '15 at 01:07
Its not that I wouldnt explain it but seeing that you are very new to webGL, the explanation will be very lengthy. I suggest start from here:http://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html – user17739521 Jul 28 '15 at 01:07

WebGL Textures Drawn Very Dark

2 Answers2