WebGL First Person Camera - Matrix issues

Posted by Ryan Welsh on Game Development See other posts from Game Development or by Ryan Welsh
Published on 2014-08-23T14:58:40Z Indexed on 2014/08/23 16:34 UTC
Read the original article Hit count: 575

Filed under:
|
|
|
|

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

© Game Development or respective owner

Related posts about engine

Related posts about JavaScript