CODEWITHSUNDEEP
opengl-escamerawebglquaternions
Alex K
Alex K

Reputation: 844

Tilt/roll side effect in Quaternion camera

I am trying to implement a camera in WebGL using quaternions. I have used the following function to rotate the camera:

rotate: function(dx, dy, update) {

    // pitch
    if (dy != 0) {
        quat4.set([Math.sin(Render.degToRad(dy / 2.0)), 0, 0, 
                   Math.cos(Render.degToRad(dy / 2.0))], this.quatTemp);
        quat4.multiply(this.quatTemp, this.rotation, this.rotation);
    }

    // yaw
    if (dx != 0) {
        quat4.set([0, Math.sin(Render.degToRad(dx / 2.0)), 0, 
                   Math.cos(Render.degToRad(dx / 2.0))], this.quatTemp);
        quat4.multiply(this.rotation, this.quatTemp);
    }

    quat4.normalize(this.rotation);

    if(update == true)
        this.updateMatrix();

}

If I disable one axis rotation it does work fine. However if both a combined I get the roll/tilt effect. My world up vector is [0,1,0].

Upvotes: 1

Views: 449

Answers (1)

Alex K
Alex K

Reputation: 844

The issue was in order of multiplication, the following change has fixed the issue:

if (dy != 0) {
    quat4.set([Math.sin(Render.degToRad(dy / 2.0)), 0, 0, 
               Math.cos(Render.degToRad(dy / 2.0))], this.quatTemp);
    quat4.multiply(this.rotation, this.quatTemp);
}

// yaw
if (dx != 0) {
    quat4.set([0, Math.sin(Render.degToRad(dx / 2.0)), 0, 
               Math.cos(Render.degToRad(dx / 2.0))], this.quatTemp);
    quat4.multiply(this.quatTemp, this.rotation, this.rotation);
}

Upvotes: 1

Related Questions