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();
