What's wrong with this camera implementation?

Question

I'm using WebGL and glMatrix and I implemented a camera. When a move backward, no problem. But when I move to the side and particularly forward, the camera becomes all glitchy. I implemented almost exactly the same camera before in C++ and it worked perfectly. I put the whole code on jsFiddle (with glMatrix because it's not in the list and I didn't find a url, sry).

https://jsfiddle.net/ydx0Lr1v/14/

Click and move the mouse to move around.

Also, the more I decrease the speed of the camera movement, the more it works well. I put a high speed to dramatize the effect. I know I should make the speed of the camera depend on the time between each frame, but I haven't implemented an fps counter yet.

Thanks!

Edit: Hum, that's strange. In jsFiddle the camera seems to work better when moving forward.

Answer 1

I found out what the problem was. It was the lookAt matrix that for some reason was wrong. I don't know if it's a problem with glMatrix or if I did something wrong, but I resolved the problem by making the lookAt matrix myself :

var r = this.right,
        u = this.up,
        f = this.front,
        p = this.position;

    var view = [r[0], u[0], -f[0], 0.0,
                r[1], u[1], -f[1], 0.0,
                r[2], u[2], -f[2], 0.0,
                0.0,  0.0,  0.0,  1.0]
    var a = [1.0, 0.0, 0.0, 0.0,
             0.0, 1.0, 0.0, 0.0,
             0.0, 0.0, 1.0, 0.0,
             -p[0], -p[1], -p[2], 1.0];

    mat4.multiply(view, view, a);

Now it works.