Strange quaternion camera streching in WebGL

Question

So after a lot of researching about quaternions I almost got the quaternion camera working. Almost, cause it rotates in a proper way only in a vertical axis. Other rotations stretches and deforms the view (like on a picture below).

• Wobbling horizontal moves makes only Z axis stretched

I don't like to post topics like "Please, debug my brain", but I'm in a dead end right now, and I don't know how to fix it.

My implementation looks like this:

1. I Convert an axis-angle rotation to a quaternion and normalize it.
2. Then multiply it with a camera identity quaternion.
3. And then multiply a position of a camera (which is a 4x4 model-view matrix) by a product of above multiplication converted to matrix.

My free quaternion camera class looks like this (for now):

function QuaternionCamera() {
    // Fake 4x4 Matrix
    this.position = new Matrix4x3();
    this.rotation = new Quaternion();
}

QuaternionCamera.prototype = {
    verticalRotation: function(angle) {
        this.rotation.multiply(new Quaternion().axisToQuaternion(angle, 0, 1, 0));
        this.position.multiply(this.rotation.quaternionToMatrix());
        this.rotation.makeIdentity();
    },

    horizontalRotation: function(angle) {
        this.rotation.multiply(new Quaternion().axisToQuaternion(angle, 1, 0, 0));
        this.position.multiply(this.rotation.quaternionToMatrix());
        this.rotation.makeIdentity();
    }
};

And on mouse movement, it runs this:

    camera.verticalRotation(degToRad(deltaX / 6));
    camera.horizontalRotation(degToRad(deltaY / 6));

I believe that this is a proper way to do it, so I'll just dump my math library, maybe you could find a typo in there (cause I have checked it a hunderd of times and found nothing): http://pastebin.com/0zYLaR1V

PS How to get rid off an additional little roll when rotating camera around, so it will move in a game fashion way?

PS2 And where did the imaginery numbers gone when implementing quaternion math to programming language?? ^^ This is a true mystery for me.

Answer 1

Ahahaha, problem solved, I'm such a math genius ^^: my math library had a typo in function that converts quaternion to a matrix : 1 - 2 * (this.y * this.y - this.z * this.z); - minus times minus makes plus, not minus, as in here: http://www.gameprogrammer.net/delphi3dArchive/quaternions_bestanden/quat1.gif