hashbrown

05-26-2017, 02:30 PM

I'm trying to figure out how to make a fps camera but unfortunately stuck. I'll briefly explain what I'm doing but I'll also share my webgl code so you can see for yourself.

// First I get the difference between the current mouse coords and the last. The html lock cursor api returns it and I store it in Game.Input.

this.yaw += Game.Input.x * this.sensitivity;

this.pitch += Game.Input.y * this.sensitivity;

// I cap the pitch and yaw

if (this.yaw < 0.0) this.yaw += 360.0;

if (this.pitch > 89.0) {

this.pitch = 89.0;

}

if (this.pitch < -89.0) {

this.pitch = -89.0;

}

// This is where I calculate the view matrix and use the pitch and yaw (by the way these are all matrices, JS doesn't really help specifying that)

var view = Mathf.Mat4();

var rotX = Mathf.rotateX(cam.pitch),

rotY = Mathf.rotateY(-cam.yaw),

rot = Mathf.mul(rotX, rotY),

pos = Mathf.translate(cam.x, cam.y, cam.z),

cam = Mathf.Mat4();

cam = Mathf.mul(rot, pos);

view = Mathf.inverse(cam);

return view;

// ... and in my game object draw function, I use the view matrix

model = Mathf.mul(model, scale);

normMat = Mathf.transpose(Mathf.inverse(model));

modelView = Mathf.mul(model, view);

mvp = Mathf.mul(modelView, projection);

Everything works fine, I see the world, I could translate left, right, forward and back if I coded those instructions. But I can't seem to get the mouse look working, I clearly don't understand the fps camera concept properly. I also understand that in order to walk towards the correct direction I'm looking at, I need a few more steps using the cross product, but at the moment I just want to look around and can't seem to get it.

Hope this all makes sense :S Thanks!

WebGL Live Demo: https://jsbin.com/buvugiy/edit?js,output

Oh by the way, I wrote my own Math lib, I'm aware that I could have used any popular one out there, but I wanted to learn. If you want to take a look at it (just in case I did something, wrong) it's here: https://gist.github.com/hashbrownjs/99cc6a175f37991df1e3cdb60f3d8371

I'll go ahead and copy the rotateX and rotateY functions for your convenience since those are crucial in making the cam rotate.

Mathf.rotateX = function (degree) {

var r = Mathf.Mat4(),

angle = Mathf.degToRad(degree),

cos = Math.cos(angle),

sin = Math.sin(angle);

r[5] = cos; r[6] = -sin;

r[9] = sin; r[10] = cos;

return r;

};

Mathf.rotateY = function (degree) {

var r = Mathf.identity(r),

angle = Mathf.degToRad(degree),

cos = Math.cos(angle),

sin = Math.sin(angle);

r[0] = cos; r[2] = -sin;

r[8] = sin; r[10] = cos;

return r;

};

// First I get the difference between the current mouse coords and the last. The html lock cursor api returns it and I store it in Game.Input.

this.yaw += Game.Input.x * this.sensitivity;

this.pitch += Game.Input.y * this.sensitivity;

// I cap the pitch and yaw

if (this.yaw < 0.0) this.yaw += 360.0;

if (this.pitch > 89.0) {

this.pitch = 89.0;

}

if (this.pitch < -89.0) {

this.pitch = -89.0;

}

// This is where I calculate the view matrix and use the pitch and yaw (by the way these are all matrices, JS doesn't really help specifying that)

var view = Mathf.Mat4();

var rotX = Mathf.rotateX(cam.pitch),

rotY = Mathf.rotateY(-cam.yaw),

rot = Mathf.mul(rotX, rotY),

pos = Mathf.translate(cam.x, cam.y, cam.z),

cam = Mathf.Mat4();

cam = Mathf.mul(rot, pos);

view = Mathf.inverse(cam);

return view;

// ... and in my game object draw function, I use the view matrix

model = Mathf.mul(model, scale);

normMat = Mathf.transpose(Mathf.inverse(model));

modelView = Mathf.mul(model, view);

mvp = Mathf.mul(modelView, projection);

Everything works fine, I see the world, I could translate left, right, forward and back if I coded those instructions. But I can't seem to get the mouse look working, I clearly don't understand the fps camera concept properly. I also understand that in order to walk towards the correct direction I'm looking at, I need a few more steps using the cross product, but at the moment I just want to look around and can't seem to get it.

Hope this all makes sense :S Thanks!

WebGL Live Demo: https://jsbin.com/buvugiy/edit?js,output

Oh by the way, I wrote my own Math lib, I'm aware that I could have used any popular one out there, but I wanted to learn. If you want to take a look at it (just in case I did something, wrong) it's here: https://gist.github.com/hashbrownjs/99cc6a175f37991df1e3cdb60f3d8371

I'll go ahead and copy the rotateX and rotateY functions for your convenience since those are crucial in making the cam rotate.

Mathf.rotateX = function (degree) {

var r = Mathf.Mat4(),

angle = Mathf.degToRad(degree),

cos = Math.cos(angle),

sin = Math.sin(angle);

r[5] = cos; r[6] = -sin;

r[9] = sin; r[10] = cos;

return r;

};

Mathf.rotateY = function (degree) {

var r = Mathf.identity(r),

angle = Mathf.degToRad(degree),

cos = Math.cos(angle),

sin = Math.sin(angle);

r[0] = cos; r[2] = -sin;

r[8] = sin; r[10] = cos;

return r;

};