WebGL Quaternion Camera

Monday, May 5, 2014

I haven't yet developed a good intuition for quaternions, so that could be part of my problem, but they are mostly easy to visualize so I based my WebGL camera on them. The problem is, I need to support both walking the model/environment and orbiting a point.

The code for walking works fine, and so does orbiting. However, when switching between them, that's the problem.

HERE IS A FIDDLE that shows the problem: PROBLEM DEMO

When switching between walking and orbiting, the camera pops locations. Here is my update function:

if(isOrbit) {
var eye = vec3.create();

vec3.sub(eye, this.eye, this.orbit);

mat4.fromRotationTranslation(this.orbitMatrix, this.orbitRotation, this.orbit);
mat4.fromRotationTranslation(this.eyeMatrix, this.eyeRotation, eye);
mat4.multiply(this.mvMatrix, this.orbitMatrix, this.eyeMatrix);
else {
mat4.fromRotationTranslation(this.mvMatrix, this.eyeRotation, this.eye);

The problem is that it seems in the first section, the eye value is relative to the camera, whereas in the second, it's not (obviously). However, I've tried a few different things to correct for the eye location when orbiting, and that helps but the rotation is not accounted for in both cases. I've tried various things to account for eye rotation when moving to orbit, and for orbit rotation when moving to walk, but it keeps not working :^(

Any pointers on what I should be doing/trying here? Doing either operation (walk/orbit) by itself seems straightforward, but switching seems to be my problem.