matrix rotation effecting light source

Question

I have sunk several days of experimenting and googling, to try and resolve this issue, and I'm either too thick to understand what I'm being told, or not googling the correct terms.

I have a system set up that renders an object into 3D space, and also has an implementation of a "Camera". I am now trying to add a light source and have run into quite a frustrating problem.

The "Camera" is effectively a rotation and translation of the mvMatrix that is applied before any particular items are rendered.

If I add logic to my object that has it rotate on it's own axis, the light correctly stays put, and lights up various faces on the object as they face the light source. However if I move the camera, the light source "sticks" relative to the camera, which is not what I want.

Some attempts to resolve this have been:

• Position the light before moving and rotating the camera,
• Position the light after moving and rotating the camera,
• Position the light after moving and before rotating the camera,
• Position the light after everything is rendered and after the mvMatrix is popped,
• Position the light after everything is rendered and before the mvMatrix is popped,
• Position the light once at the beginning of the program and not again during the render loop,
• When positioning the light, multiply its position vec3 by the mvMatrix (this got me very close, but seems to, not quite, always position the light at 0,0,0)
• When positioning the light, multiply its position vec3 by the inverse of mvMatrix (very bizarre results).

This makes me believe that I need to rotate by the mvMatrix rotations, but ignore it's translations (I don't know why, I guess it's the only thing I can think of that I haven't tried), but I could be wrong as I have not been able to find an easy way to do that.

Anyway, I'm sure you want to see the code, I have it all in a public github repo (PRs welcome, ha!), here are the bits I expect you'll be interested in:

• The main render loop: https://github.com/philbrookes/webgl-engine/blob/add-normals-and-lighting/webgl-engine/Renderer.js#L37
• The Camera's position and rotation methods:
  • https://github.com/philbrookes/webgl-engine/blob/add-normals-and-lighting/webgl-engine/Camera.js#L10
  • https://github.com/philbrookes/webgl-engine/blob/add-normals-and-lighting/webgl-engine/Camera.js#L16
• The prepareLighting method: https://github.com/philbrookes/webgl-engine/blob/add-normals-and-lighting/webgl-engine/Renderer.js#L73

I'm aware that prepareLighting is quite hacked in, I just want to understand it first, before I make a Light object.

And if you want to see it in action, look here: http://www.bracketbrotherhood.com/webgl-engine

I would really appreciate some help with this as I am really quite stuck.

As an aside, this is my first attempt at neat ordered JS, so if you have any comments on how I could better organise the code-base I'd love to hear that too, though I should stress that is definitely a lower concern to me, right now, than fixing my lighting issue!

Sorry for the wall of text... Thank you so much!

Phil,

Answer 1

I had copied the lighting code from: http://learningwebgl.com/lessons/lesson07/index.html

The lighting code here has a a call to vec3.normalize, though I'm not 100% certain what this is doing (I guess it is turning it into a normal...) removing it solved the issue :)

For clarity's sake, here is my before and after:

var alp = vec3.create();
vec3.normalize([17,0,0], alp);

Changing this to:

var alp = vec3.create([17,0,0]);

Fixed the issue, hooray!