# bug in webgl phong shader: lighting rotates with object

I'm working on a simple phong shader in webgl, and I think I'm getting close but something is still wrong. Dead give away: if I have a billboard and have it roll (so it spins like a wheel), the part of the billboard that is lit up spins with it :(. This confuses me, because it seems like a problem with the model matrix, but the transform makes all the positions & rotations correct, and lighting math is done entirely in world-coordinates , just the lighting wrong. Ditto with the view matrix, I can move around and look freely and everything is located in its proper place, just lit wrong.

Here are my shaders (minus the definitions for space, and with the lighting in the model matrix moved into GPU for clarity) {if you prefer reading in github: https://github.com/nickgeorge/quantum/blob/master/index.html#L41}

<script id="fragment-shader" type="x-shader/x-fragment">
void main(void) {
vec3 lightWeighting;
if (!uUseLighting) {
lightWeighting = vec3(1.0, 1.0, 1.0);
} else {
vec3 lightDirection = normalize(vLightPosition.xyz - vPosition.xyz);

float directionalLightWeighting = max(0.0, dot(
normalize(vTransformedNormal),
lightDirection));
lightWeighting = uAmbientColor + uPointLightingColor * directionalLightWeighting;
}

vec4 fragmentColor;
if (uUseTexture) {
fragmentColor = texture2D(uSampler,
vec2(vTextureCoord.s, vTextureCoord.t));
} else {
fragmentColor = uColor;
}
gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);
}
</script>

void main(void) {
vPosition = uModelMatrix * vec4(aVertexPosition, 1.0);

// TODO: Move back to CPU
vLightPosition = uModelMatrix * vec4(uPointLightingLocation, 1.0);

gl_Position = uPerspectiveMatrix * uViewMatrix * vPosition;
vTextureCoord = aTextureCoord;
vTransformedNormal = normalize(uNormalMatrix * aVertexNormal);
}
</script>


Thanks a lot, and let me know if there's anything else useful to add.

• I wanted to try your project but it is incomplete on github. population/hero.js and gl/webgl-utils.js are missing. – rioki Apr 21 '14 at 18:34
• oops, fixed. Press G to enable mouse look, light is in the upper-left corner (blue cube), and the wall is rotating to show the problem – Nick Apr 22 '14 at 0:40