# What's wrong with this camera implementation?

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.

• You should always strive to describe the problem in the title and text of your question. Neither "what's wrong with this camera implementation" nor "the camera becomes all glitchy" tell us anything about the problem you're trying to solve. Links to demos are great as supporting material, but if a user can't even tell whether a question is in their wheelhouse without clicking an external link, you'll tend to attract fewer answers. Put the information up-front and you make things much easier on other users, both for answering and searching. – DMGregory Dec 3 '16 at 4:40

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.