WebGL shading/lighting too dark on some triangles

Question

I have a lighting problem in which some triangles seem to exhibit poor shading artifacts in which the shading isn't smooth across the overall surface of the entire polygon (a wall, for instance). That is, each triangle that makes up the polygon seems to be shading slightly darker or lighter than it's neighbor.

I am trying to achieve a simple directional lighting. Here is what it looks like:

Here is what the vertex shader code:

gl_Position  = uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);    
vNormal = vec3(uNMatrix * vec4(aVertexNormal.xyz, 1.0));
vColor  = aVertexMaterialColor;

And here is the fragment shader code:

vec3  light   = normalize(vec3( 0.5,  0.2,  1.0));
float amount  = max(dot(vNormal, light),  0.0);
vec4 finalColor = vColor; 
finalColor.rgb *= amount;

The problem is that the wall with the windows exhibits various banding where individual triangles appear darker than others. I can't control the geometry I'm getting, but I do believe the triangles are defined ok, as are the normals.

uPMatrix is the projection matrix, uMVMatrix is the model view matrix, and uNMatrix is the normal matrix. Here is how the normal matrix is created (gl-matrix):

var mvMatrix = this.getModelViewMatrix();
var nMatrix  = this.nMatrix;

mat4.copy(nMatrix, mvMatrix);
mat4.invert(nMatrix, nMatrix);
mat4.transpose(nMatrix, nMatrix);

Any ideas what I might be doing wrong, or how I can make the entire wall smoothly shaded?

Answer 1

gl_Position  = uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);    
vNormal = vec3(uNMatrix * vec4(aVertexNormal.xyz, 1.0));
vColor  = aVertexMaterialColor;

vec3  light   = normalize(vec3( 0.5,  0.2,  1.0));
float amount  = max(dot(vNormal, light),  0.0);
vec4 finalColor = vColor; 
finalColor.rgb *= amount;

In order for a triangle to have some variation in color over its surface, there must be some varying input (well, or gl_FragCoord, but that's a while other thing) that is actually varying. Since your two varyings vNormal and vColor depend on two attributes, one of the following must be true:

• aVertexMaterialColor is not the same for all three vertices.
• aVertexNormal is not the same for all three vertices.

Most likely, it is the normals; assuming your geometry comes from a file, either you have not loaded the normals correctly (consistently), or you did not properly instruct the modeling tool to generate flat-shading normals.

Here's a debugging trick:

finalColor.rgb = vNormal * 0.5 + vec3(0.5);

This will colorize all your vertices just according to their normals, disregarding material colors and lighting. You'll get wacky colors, but if you see any surfaces with shaded colors, those triangles have normals which are not all the same.

(Any flat surface should be made of triangles with identical normals; furthermore, those normals should be perpendicular to the plane of the triangle.)