### WebGL First Person **Camera** - Matrix issues

##### - by Ryan Welsh

I have been trying to make a WebGL FPS

**camera**.I have all the inputs working correctly (I think) but when it comes to applying the position and rotation data to the view matrix I am a little lost. The results can be viewed here http://thistlestaffing.net/masters/camera/index.html and the code here var**camera**= { yaw: 0.0, pitch: 0.0, moveVelocity: 1.0, position: [0.0, 0.0, -70.0] }; var viewMatrix = mat4.create(); var rotSpeed = 0.1;**camera**.init = function(canvas){ var ratio = canvas.clientWidth / canvas.clientHeight; var left = -1; var right = 1; var bottom = -1.0; var top = 1.0; var near = 1.0; var far = 1000.0; mat4.frustum(projectionMatrix, left, right, bottom, top, near, far); viewMatrix = mat4.create(); mat4.rotateY(viewMatrix, viewMatrix,**camera**.yaw); mat4.rotateX(viewMatrix, viewMatrix,**camera**.pitch); mat4.translate(viewMatrix, viewMatrix,**camera**.position); }**camera**.update = function(){ viewMatrix = mat4.create(); mat4.rotateY(viewMatrix, viewMatrix,**camera**.yaw); mat4.rotateX(viewMatrix, viewMatrix,**camera**.pitch); mat4.translate(viewMatrix, viewMatrix,**camera**.position); } //prevent**camera**pitch from going above 90 and reset yaw when it goes over 360**camera**.lockCamera = function(){ if(camera.pitch > 90.0){**camera**.pitch = 90; } if(camera.pitch < -90){**camera**.pitch = -90; } if(camera.yaw <0.0){**camera**.yaw =**camera**.yaw + 360; } if(camera.yaw >360.0){**camera**.yaw =**camera**.yaw - 0.0; } }**camera**.translateCamera = function(distance, direction){ //calculate where we are looking at in radians and add the direction we want to go in ie WASD keys var radian = glMatrix.toRadian(camera.yaw + direction); //console.log(camera.position[3], radian, distance, direction); //calc X coord**camera**.position[0] =**camera**.position[0] - Math.sin(radian) * distance; //calc Z coord**camera**.position[2] =**camera**.position [2] - Math.cos(radian) * distance; console.log(camera.position [2] - (Math.cos(radian) * distance)); }**camera**.rotateUp = function(distance, direction){ var radian = glMatrix.toRadian(camera.pitch + direction); //calc Y coord**camera**.position[1] =**camera**.position[1] + Math.sin(radian) * distance; }**camera**.moveForward = function(){ if(camera.pitch!=90 &&**camera**.pitch!=-90){**camera**.translateCamera(-camera.moveVelocity, 0.0); }**camera**.rotateUp(camera.moveVelocity, 0.0); }**camera**.moveBack = function(){ if(camera.pitch!=90 &&**camera**.pitch!=-90){**camera**.translateCamera(-camera.moveVelocity, 180.0); }**camera**.rotateUp(camera.moveVelocity, 180.0); }**camera**.moveLeft = function(){**camera**.translateCamera(-camera.moveVelocity, 270.0); }**camera**.moveRight = function(){**camera**.translateCamera(-camera.moveVelocity, 90.0); }**camera**.lookUp = function(){**camera**.pitch =**camera**.pitch + rotSpeed;**camera**.lockCamera(); }**camera**.lookDown = function(){**camera**.pitch =**camera**.pitch - rotSpeed;**camera**.lockCamera(); }**camera**.lookLeft = function(){**camera**.yaw=**camera**.yaw - rotSpeed;**camera**.lockCamera(); }**camera**.lookRight = function(){**camera**.yaw =**camera**.yaw + rotSpeed;**camera**.lockCamera(); } . If there is no problem with my**camera**then I am doing some matrix calculations within my draw function where a problem might be. //position cube 1 worldMatrix = mat4.create(); mvMatrix = mat4.create(); mat4.translate(worldMatrix, worldMatrix, [-20.0, 0.0, -30.0]); mat4.multiply(mvMatrix, worldMatrix, viewMatrix); setShaderMatrix(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.vertexAttribPointer(shaderProgram.attPosition, 3, gl.FLOAT, false, 8*4,0); gl.vertexAttribPointer(shaderProgram.attTexCoord, 2, gl.FLOAT, false, 8*4, 3*4); gl.vertexAttribPointer(shaderProgram.attNormal, 3, gl.FLOAT, false, 8*4, 5*4); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, myTexture); gl.uniform1i(shaderProgram.uniSampler, 0); gl.useProgram(shaderProgram); gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numItems); //position cube 2 worldMatrix = mat4.create(); mvMatrix = mat4.create(); mat4.multiply(mvMatrix, worldMatrix, viewMatrix); mat4.translate(worldMatrix, worldMatrix, [40.0, 0.0, -30.0]); setShaderMatrix(); gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numItems); //position cube 3 worldMatrix = mat4.create(); mvMatrix = mat4.create(); mat4.multiply(mvMatrix, worldMatrix, viewMatrix); mat4.translate(worldMatrix, worldMatrix, [20.0, 0.0, -100.0]); setShaderMatrix(); gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numItems);**camera**.update();