Home▸Geometry▸Quaternion Rotation

🔄 Quaternion Rotation

Interactive quaternion vs Euler angle comparison. See gimbal lock in action, smooth SLERP interpolation, and side-by-side 3D orientation visualisation using Canvas 2D wireframe projection.

Geometry3DModerate60 FPS

🔄 What It Demonstrates

Euler angles (yaw, pitch, roll) are intuitive but suffer from gimbal lock: when two rotation axes align (e.g. pitch = ±90°), one degree of freedom is lost and rotations become erratic. Quaternions — four-dimensional numbers q = w + xi + yj + zk discovered by Hamilton in 1843 — represent rotations without singularities. SLERP (Spherical Linear intERPolation) smoothly interpolates between two quaternion orientations along the shortest arc on the 4D hyper-sphere, producing constant-angular-velocity motion with no jitter.

How to Use

Adjust Yaw / Pitch / Roll sliders to set the target orientation.
Enable Force gimbal lock to set pitch = 90° and observe how the Euler side loses a rotation axis.
Toggle SLERP interpolation to see smooth vs. snapping behaviour on the quaternion side.
Auto-rotate applies a continuous rotation so you can compare paths.
The left cube uses sequential Euler rotation matrices; the right uses the equivalent unit quaternion.

Did You Know?

William Rowan Hamilton carved the quaternion multiplication rules (i² = j² = k² = ijk = −1) into Brougham Bridge in Dublin on 16 October 1843. Quaternions are now essential in aerospace (spacecraft ADCS), robotics, and every 3D game engine — Unity, Unreal, and Godot all default to quaternion rotations internally. The Apollo guidance computer used a gimbal-based inertial measurement unit; near gimbal lock the astronauts had to reorient the spacecraft to avoid losing navigation.

About this simulation

This visualiser places two identical cubes side by side: the left one is rotated using Euler angles (yaw, pitch and roll applied as sequential rotation matrices), while the right one is driven by a unit quaternion q = w + xi + yj + zk. As you change the orientation, the quaternion side eases toward its target using SLERP — spherical linear interpolation along the shortest 4D arc — letting you watch how quaternions avoid the singularities that plague Euler angles.

🔬 What it shows

Two Canvas 2D wireframe cubes rendered with a simple perspective projection and painter's-algorithm face sorting. The Euler cube is built from a yaw-pitch-roll matrix; the quaternion cube converts the equivalent unit quaternion to a 3x3 rotation matrix. Forcing pitch to 90 degrees collapses the Euler cube into gimbal lock while the quaternion side keeps all three axes independent.

🎮 How to use

Drag the Yaw, Pitch and Roll sliders (each -180 to 180 degrees) to set the target orientation. The Auto-rotate Speed slider (0-30) spins yaw and roll continuously. Tick "Force gimbal lock" to pin pitch at 90 degrees, toggle "SLERP interpolation" to compare smooth easing against instant snapping, and use "Show axes", Pause and Reset. The live w, x, y, z panel reports the current quaternion.

💡 Did you know?

William Rowan Hamilton devised quaternions in a flash of insight on 16 October 1843 and carved the rule i squared = j squared = k squared = ijk = minus one into Dublin's Brougham Bridge. Today every major 3D engine — Unity, Unreal and Godot — stores rotations as quaternions internally.

Frequently asked questions

What is a quaternion and why use it for rotation?

A quaternion is a four-component number q = w + xi + yj + zk that encodes a 3D rotation as a point on a 4D unit hypersphere. A unit quaternion represents any orientation without the singularities or ambiguity of Euler angles, which is why it is the standard for graphics, robotics and aerospace attitude control.

What is gimbal lock, and how does the demo show it?

Gimbal lock happens when two of the three Euler rotation axes line up, so one degree of freedom is lost. Ticking "Force gimbal lock" sets pitch to 90 degrees: on the left cube yaw and roll then rotate about the same visual axis, while the right quaternion cube keeps all three axes fully independent.

What does the SLERP checkbox actually do?

SLERP, or spherical linear interpolation, blends between the current and target quaternion along the shortest great-circle arc on the hypersphere at constant angular velocity. With it ticked the quaternion cube eases smoothly toward new orientations; unticked, it snaps instantly to the target each frame so you can feel the difference.

Is the simulation physically and mathematically accurate?

Yes. It uses the standard yaw-pitch-roll to quaternion conversion, normalises the result to a unit quaternion, and converts back via the canonical quaternion-to-matrix formula. The SLERP routine includes the usual sign-flip for the shortest path and a linear fallback when the two quaternions are nearly parallel, matching textbook implementations.

If quaternions are better, why are Euler angles still used?

Euler angles are intuitive because yaw, pitch and roll map directly to everyday concepts like heading and tilt, making them ideal for user input and display. The trade-off is gimbal lock and awkward interpolation, so many systems take Euler input but convert to quaternions internally for the actual rotation maths.

⚙ Under the hood

Interactive side-by-side Euler angles vs quaternion rotation comparison. See gimbal lock in action, smooth SLERP interpolation, and compare 3D orientation methods on Canvas 2D wireframe cubes.

Canvas 2Dquaterniongimbal lockSLERPEuler angles

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install