Static light keeps moving when objects are translated - opengl

Question

Why does my light move with my camera? in my draw scene function I set my light source position, then I call my matrix, translate the "camera", then a sphere, and after two cubes. When I move the camera around along with the first cube, the light source moves with it...
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
//currentProgram = perFragmentProgram;
currentProgram = perVertexProgram;
gl.useProgram(currentProgram);
gl.uniform3f(
currentProgram.ambientColorUniform,
parseFloat(document.getElementById("ambientR").value),
parseFloat(document.getElementById("ambientG").value),
parseFloat(document.getElementById("ambientB").value)
);
gl.uniform3f(
currentProgram.pointLightingLocationUniform,
parseFloat(document.getElementById("lightPositionX").value),
parseFloat(document.getElementById("lightPositionY").value),
parseFloat(document.getElementById("lightPositionZ").value)
);
gl.uniform3f(
currentProgram.pointLightingColorUniform,
parseFloat(document.getElementById("pointR").value),
parseFloat(document.getElementById("pointG").value),
parseFloat(document.getElementById("pointB").value)
);
mat4.identity(mvMatrix);
//Camera
mat4.translate(mvMatrix, [-xPos, -yPos, -10]);
mat4.rotate(mvMatrix, degToRad(180), [0, 1, 0]);
//Sphere
mvPushMatrix();
mat4.rotate(mvMatrix, degToRad(moonAngle), [0, 1, 0]);
mat4.translate(mvMatrix, [5, 0, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
gl.vertexAttribPointer(currentProgram.vertexPositionAttribute, moonVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
gl.vertexAttribPointer(currentProgram.vertexNormalAttribute, moonVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
mvPopMatrix();
//Cube 1
object.render(xPos, yPos);
//Cube 2
object2.render(0, 5);
}
And my shaders look like this.
<script id="per-vertex-lighting-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 vLightWeighting;
void main(void) {
vec4 fragmentColor;
fragmentColor = vec4(1.0, 1.0, 1.0, 1.0);
gl_FragColor = vec4(fragmentColor.rgb * vLightWeighting, fragmentColor.a);
}
</script>
<script id="per-vertex-lighting-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
uniform vec3 uAmbientColor;
uniform vec3 uPointLightingLocation;
uniform vec3 uPointLightingColor;
uniform bool uUseLighting;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
void main(void) {
vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = uPMatrix * mvPosition;
vec3 lightDirection = normalize(uPointLightingLocation - mvPosition.xyz);
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting = max(dot(transformedNormal, lightDirection), 0.0);
vLightWeighting = uAmbientColor + uPointLightingColor * directionalLightWeighting;
}
</script>
What can I do to stop the light from being moved around so its static

Answer 1

uPointLightingLocation must be in eye space, matching transformedNormal which you're comparing it to with the dot product.
Multiply lightPosition (assuming it's in world space) by the view/camera matrix. It'll be cheaper to do this outside the shader as the value does not change during the render.
The view matrix already exists in your code mid-way through the model-view construction.
The //Camera block is the view and the //Sphere block multiplies in the model transform. To extract just the view, copy mvMatrix between your Camera and Sphere transform blocks (or just transform the light then and there).
//untested, but something along these lines
var worldSpaceLight = vec4.fromValues( //not sure which lib your using
parseFloat(document.getElementById("lightPositionX").value),
parseFloat(document.getElementById("lightPositionY").value),
parseFloat(document.getElementById("lightPositionZ").value),
1.0
);
...
//Camera
...
var eyeSpaceLight = vec4.create();
vec4.transformMat4(eyeSpaceLight, worldSpaceLight, mvMatrix);
gl.uniform3f(currentProgram.pointLightingLocationUniform, eyeSpaceLight);
//Sphere
...