Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 3 of 3

Thread: Can't get my FPS Camera working. WebGL demo and code included.

  1. #1
    Intern Contributor
    Join Date
    Sep 2016
    Posts
    75

    Can't get my FPS Camera working. WebGL demo and code included.

    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.

    Code :
            // 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;
    	}


    Code :
            // 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;

    Code :
     
            // ... 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/...e3cdb60f3d8371

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

    Code :
     
        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;
        };
    Last edited by hashbrown; 05-26-2017 at 02:44 PM.

  2. #2
    Member Regular Contributor
    Join Date
    Jul 2012
    Posts
    459
    One thing you could try: If you're using the default OpenGL coordinates (x at right, y at top and z going out of the screen), you can try to rotate around x first. Then using the resulted matrix rotate around its y axis vector.

  3. #3
    Intern Contributor
    Join Date
    Sep 2016
    Posts
    75
    Quote Originally Posted by Silence View Post
    One thing you could try: If you're using the default OpenGL coordinates (x at right, y at top and z going out of the screen), you can try to rotate around x first. Then using the resulted matrix rotate around its y axis vector.
    Thanks Silence, I'll give it a try, although I'm going to probably end up re-writing this function again. I want to make sure I understand this concept. I'll definitely share my function here on this thread once I have it ready.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •