What is a quaternion?
Your phone always knows which way it is pointing. Tilt it, and the screen turns with you; hold it up in an augmented reality experience, and the virtual object stays put on the table while the phone moves around it. Every one of those frames starts from the same question: how is the phone oriented in space, right now?
The answer your browser hands to the page is not three angles, and not a grid of nine numbers. It is four numbers: a quaternion. The same four numbers orient every blob of a Gaussian splatting scene, every bone of an animated character and every spacecraft attitude controller.
A quaternion sounds like four-dimensional magic. It isn’t, or at least you do not need to picture four dimensions to use one. This guide builds it up from turning in a plane, through the trap of three angles, to the four numbers themselves, with figures you can play with at each step.
Turning in a plane: one angle is enough
In two dimensions, a rotation is a single number: an angle. Turn a phone lying flat on a table by 30°, then by 20°, and it has turned by 50°. The order does not matter, and nothing can go wrong.
There is an elegant way to write this. Place the phone on the complex plane, where every point is a number a + b i. The points at distance 1 from the centre form the unit circle, and each one can be written cos θ + i sin θ. Multiplying by that number turns everything by θ. Multiply by i itself and you get a quarter turn; do it twice, i² = −1, and you get a half turn.
One angle is enough
r = 0.87 + 0.50 i · angle 30°
The complex plane with its unit circle, and a phone seen from above. The point on the circle is cos θ + i sin θ; multiplying by it turns the phone by θ. Multiplying by i turns it a quarter turn.
Drag the point around the circle or use the slider. The number r is the whole turn, written as one complex number of length 1. Multiplying two such numbers adds their angles, in either order.
Keep this picture in mind. A quaternion is exactly this idea, one dimension up: a number whose multiplication performs a rotation. What makes three dimensions harder is that there is no longer a single circle to turn along.
Three angles: yaw, pitch and roll
The natural way to describe an orientation in 3D is with three angles, one per axis. Pilots call them yaw, pitch and roll; mathematicians call them Euler angles, after Leonhard Euler, who proved in 1775 that any orientation can be reached from any other by a single turn about one axis.
The angles your phone reports
There are a dozen ways to define three angles, depending on which axes you turn about and in which order. Browsers use one precise convention, set by the W3C DeviceOrientation specification:
- α (alpha), the yaw: a turn about the vertical axis, like a compass heading;
- β (beta), the pitch: a turn about the phone’s own left–right axis. At β = 0° the phone lies flat, screen up; at β = 90° it stands upright, facing you;
- γ (gamma), the roll: a turn about the phone’s own top–bottom axis.
They are applied in that order, each about the axes left by the previous turns. Mechanically, picture the phone mounted in three nested rings, what engineers call a gimbal.
Gimbal lock
Three angles, three rings
- Yaw ring, about the vertical
- Pitch ring
- Roll ring, which carries the phone
- The direction no ring can turn about
Yaw −35°, pitch 60°, roll 20°
A phone mounted in three nested rings: yaw about the vertical (blue), pitch (amber) and roll (lime), the angles a browser reports for a phone. At a pitch of 90°, the phone held upright, the amber ring lies in the blue ring’s plane: yaw and roll turn about the same axis and one direction of rotation is lost.
Move the three sliders, then press “Pitch to 90°”. The amber ring folds into the blue ring’s plane, and the yaw and roll sliders now do the same thing. Then press “Turn like a steering wheel”: the phone turns smoothly, yet the angles leap.
At a pitch of exactly 90°, the first and third rings line up. Turning the outer ring or the inner ring now turns the phone about the same vertical axis; only their combination still counts. One degree of freedom has disappeared: there is one direction in which no ring can turn the phone. This is gimbal lock.
The orientation itself is fine. The problem is in the description: near that pose, a small, smooth motion of the object requires huge, sudden changes of the angles. In the figure, turning the upright phone by 20° like a steering wheel makes yaw and roll swing by 90° in opposite directions. Any software that stores Euler angles, interpolates them or filters them for noise will stutter right there.
Gimbal lock is not only a textbook curiosity. The inertial platform of the Apollo spacecraft had three gimbals, and flight controllers had to steer clear of the locked orientation; one astronaut famously joked about asking for a fourth gimbal for Christmas.
Why augmented reality hits it every day
Look again at the convention: β = 90° is the phone held upright, screen towards you. That is exactly how you hold a phone for augmented reality. The most common AR pose is precisely the gimbal-lock pose of the angles the browser reports. An AR engine that worked in α, β and γ would jitter as soon as you raised your phone. That is one reason AR engines do their sums in quaternions instead.
Hamilton’s four numbers
On 16 October 1843, walking along the Royal Canal in Dublin, the Irish mathematician William Rowan Hamilton found what he had been looking for for years: a way to multiply triples of numbers the way complex numbers multiply pairs. The answer needed not three numbers but four. He carved the rule into the stone of Broom Bridge (Brougham Bridge), where a plaque still marks the spot:
i² = j² = k² = ijk = −1
A quaternion is a number w + x i + y j + z k, with one ordinary part w and three imaginary units that multiply among themselves like this:
| × | i | j | k | |---|---|---|---| | i | −1 | k | −j | | j | −k | −1 | i | | k | j | −i | −1 |
The table has one surprise: ij = k but ji = −k. The order of a product matters. That is not a flaw; as we will see, 3D rotations behave in exactly the same way.
An axis and an angle
Euler’s theorem says that any orientation is a single turn of some angle θ about some axis u. A quaternion writes that turn down directly:
q = ( cos θ/2 , sin θ/2 · u )
The first number, w, says how much turning there is; the other three are the axis u, scaled by sin θ/2, so they point along it. Because the axis has length 1, the four numbers always satisfy w² + x² + y² + z² = 1: a rotation is a point on the unit sphere of four dimensions, just as a 2D rotation was a point on the unit circle.
An axis and an angle become four numbers
Drag on the sphere to choose the axis
w² + x² + y² + z² = 1.000
A full turn: the phone is back where it started, yet q = (−1, 0, 0, 0). Same orientation, opposite sign — more on this below.
On the left, the rotation axis as a point on a sphere; on the right, the phone turned about that axis. Below, the four numbers of the quaternion: cos of half the angle, then the axis multiplied by sin of half the angle. They always have length 1.
Choose an axis by dragging on the sphere or with the presets, and an angle with the slider. The default, a third of a turn about the diagonal, gives four equal numbers: q = (½, ½, ½, ½). Push the angle to 360° and watch the sign of w.
Why half the angle?
The formula uses θ/2, not θ, and the figure shows a consequence: after a full turn, q = (−1, 0, 0, 0) rather than (1, 0, 0, 0). The reason appears as soon as we use a quaternion to turn something.
Turning a point: q p q⁻¹
To turn a point p = (x, y, z), write it as a quaternion with no ordinary part, (0, x, y, z), and compute a “sandwich”:
p′ = q p q⁻¹
where q⁻¹, the inverse, is q with its last three numbers negated. For example, turning the point (1, 0, 0) by 90° about the vertical axis uses q = (0.707, 0, 0, 0.707) and gives p′ = (0, 0, 1, 0): the point (0, 1, 0), exactly where a quarter turn takes it.
Turning a point: q p q⁻¹
The fourth number, w, is the part outside our three dimensions.
The second product finishes the turn and brings w back to 0: the point is turned by the full angle.
| Stage | w | x | y | z |
|---|---|---|---|---|
| p = (0, x, y, z) | 0.000 | 1.000 | 0.000 | 0.000 |
| q · p | 0.000 | 0.707 | 0.707 | 0.000 |
| q · p · q⁻¹ | 0.000 | 0.000 | 1.000 | 0.000 |
- Along the axis
- Across the axis
A point is turned 90° about the vertical axis in three stages: written as a quaternion, multiplied by q on the left, then by q⁻¹ on the right. The magenta arrow is the vector part of each product; the gauge shows w, the part outside our three dimensions.
Step through the three stages. With the point across the axis, the first product turns it only halfway. Now tilt the point towards the axis and step again: after the first product, w is no longer zero.
The figure shows why one product is not enough. Split the point into a part along the axis and a part across it:
- across the axis, each of the two products turns the point by θ/2. Together they turn it by θ, exactly like multiplying by cos θ + i sin θ in the plane;
- along the axis, the first product pushes the point out into w, outside our three dimensions, and the second brings it back untouched.
Each multiplication does half the work, which is why the angle inside q is halved. And the sandwich cancels whatever leaks into the fourth dimension, so the result is always an honest 3D point.
What quaternions are good at
Turns in the right order
Rotations in 3D do not commute: a quarter turn forwards then a quarter turn sideways does not end where the same two turns in the opposite order do. Try it with a book on your desk. Quaternion multiplication has exactly the same property, so combining rotations is simply multiplying their quaternions: qB qA means “A first, then B”.
The order of the turns matters
A, then B
q = (0.50, 0.50, 0.50, 0.50)
B, then A
q = (0.50, 0.50, -0.50, 0.50)
Same two turns, different result: rotations in 3D do not commute, and neither do quaternions.
Turns are about the fixed axes drawn under each phone (x amber, y lime, z blue).
Two quarter turns applied in both orders. Each row shows the phone at the start, after the first turn and after the second. The two orders end in different orientations, and the two quaternions differ.
Choose the two turns, then play both orders. With A = 90° about x and B = 90° about z, the two results differ only by the sign of one number, yet the screens face different ways.
Smooth in-betweens: slerp
Animation, camera paths and AR tracking all need orientations between two known ones. With Euler angles, the obvious method — average the three angles — goes badly wrong as soon as the poses sit near the lock or on either side of the 180° seam of an angle: the object takes a huge detour, speeding up and slowing down on the way.
Quaternions have a clean answer, slerp (spherical linear interpolation), introduced by Ken Shoemake for computer animation in 1985. It moves along the great arc between the two quaternions on their sphere at constant speed, which amounts to turning about one fixed axis at a steady rate: the shortest, smoothest way from one orientation to the other.
Getting from one orientation to another
Averaging the angles: turned 179° so far, 359° in all
Slerp: turned 10° so far, 20° in all
Two phones travel between the same two orientations: on the left by averaging their Euler angles, on the right by slerp. Below, the path of one direction of the phone on a sphere, with a dot every tenth of the time.
Choose a pair of orientations and scrub the time. In “Near upright”, the two poses are only 20° apart, but averaging the angles spins the phone through 359°. Untick “Take the short way” to see slerp choose the long way round instead.
A full turn is not quite nothing: q and −q
Because of the half angle, q and −q always describe the same orientation: flipping the four signs adds 360° to the turn, which changes nothing you can see. Every orientation therefore has exactly two quaternions. Software must remember it in two places: slerp should pick whichever of q and −q is closer before interpolating (the checkbox above), and two quaternions must be compared up to sign.
This double cover is not an accident of notation. It reflects a real property of 3D rotations: a rotation of 360° is not quite equivalent to doing nothing, while 720° is. You can check it with a belt fastened to a book, or a cup held in your palm: after one full turn your arm or the belt is twisted, and after a second full turn in the same direction it untwists by itself.
Why a full turn is not quite nothing
Phone: q = (−1.00, 0.00, 0.00, 0.00)
The phone does not turn: it only moves around, and the ribbon loops over. The twist changes direction but does not go away.
A ribbon ties the phone to a fixed clamp. Turn the phone once and the ribbon is twisted; however you then move the phone without turning it, the twist cannot be undone. Turn it twice in the same direction, and the ribbon can come out flat. The gauge shows w, the first number of the phone’s quaternion: −1 after one turn, +1 after two.
Play both modes. In the middle phase the phone never turns: it only moves around, the way your hand moves in the cup trick. After one turn the ribbon is twisted, whatever you do; after two, it comes out flat. That difference is exactly the difference between q = −1 and q = +1, even though the phone looks the same in both.
Rounding errors: four numbers are easier to repair than nine
A rotation matrix stores an orientation as nine numbers, which must stay mutually perpendicular unit vectors. Multiply thousands of small rotations together — once per frame, for minutes — and rounding errors slowly break that structure: the matrix starts to stretch and shear the object. Repairing it (re-orthogonalising, for example by Gram–Schmidt) is a real computation.
Ten thousand small turns
The faint phone behind each one is the exact orientation.
10,000 turns of 0.7°
Matrix: off from a true rotation by 2.32, volume × 4.63
Quaternion: 30.82° from the exact orientation, and still a rigid turn
The same small turn applied thousands of times with rounding, as a program does once per frame. On the left, a rotation matrix: its nine numbers drift apart and the phone drawn with it shears and swells. On the right, a quaternion divided by its length after each step: the phone stays rigid. The faint ghost behind each phone is the exact result.
Run it in both precisions. In 32-bit floating point, the usual precision of 3D engines, 10,000 turns leave the matrix off by about 2 × 10⁻⁴: invisible, but growing, to about 2% after a million. Half precision, common in graphics textures and compact files, shows the same mechanism much faster: after 10,000 turns the matrix has swollen more than fourfold. The quaternion, renormalised after each step, is not exact either (it ends about 30° off in half precision), but it stays a rigid phone.
A quaternion only has to keep one property: length 1. When it drifts, dividing the four numbers by their length restores a perfect rotation. It may not be exactly the right one, since the rounding errors are still there, but it is always a rigid turn, never a distortion.
Quaternions at ARGO
In every Gaussian splat
A Gaussian splatting scene is made of hundreds of thousands to millions of small ellipsoids, and each one’s orientation is stored as a quaternion: four of the 59 numbers that describe a Gaussian. For a million Gaussians, that is 16 MB in 32-bit floats, against 36 MB for rotation matrices. During training, the optimiser nudges these four numbers freely and renormalises them, which it could not do with nine constrained ones.
Our own live viewer of that article goes further and packs each quaternion into 3 bytes: since q and −q are the same rotation, we can always choose the sign that makes w positive, and then w can be recomputed from the other three.
The quaternion inside every Gaussian
The Gaussian in 3D
Its footprint on screen
- Its footprint on screen
- Rebuilt from the 3 stored bytes
Stored: A4 B1 EA (3 bytes) · w rebuilt: 0.264
The rebuilt rotation is off by 0.78°
Here w was negative: the stored quaternion is −q, the same rotation, so that w ≥ 0.
For a million Gaussians: 16 MB as four 32-bit numbers, 36 MB as rotation matrices, 3 MB in our viewer.
On the left, one 3D Gaussian of a Gaussian splatting scene, turned about the magenta axis. On the right, what a splatting renderer draws: its footprint on the screen. Dashed, the same footprint rebuilt from the 3 bytes our viewer stores for the quaternion; the readouts give the bytes and the error they introduce.
Turn the Gaussian and watch the error of the 3-byte version. Over all possible rotations it is 0.6° on average and at most about 11°: below 1° for any turn under 90°, and worst near 180°, where w is close to zero and recomputing it from the other three magnifies their rounding. Other formats avoid this by dropping the largest of the four numbers rather than always w. On screen, an ellipsoid also looks the same after a half turn about any of its axes, so the visible difference is often smaller still.
In your phone and in WebXR
On the web, a phone’s orientation arrives two ways. The DeviceOrientation events give the three angles α, β and γ, with all the problems above. The WebXR API, used for augmented and virtual reality in the browser, gives the pose of the device directly as a quaternion (XRRigidTransform.orientation), and 3D libraries such as three.js work in quaternions internally. Our WebAR projects rely on those four numbers every frame. In practice, our work starts from the phone’s pose; for how that pose is tracked in the first place, see our article on AMB3R-SLAM.
Your phone, live
α 20° · β 60° · γ −15°
q = (0.86, 0.51, −0.03, 0.08)
Hold the phone upright, as for augmented reality, and turn it to landscape: α and γ jump, while the four numbers of q change smoothly.
Drag the model to turn it, or use the arrow keys once it has focus.
The phone model follows the orientation of your real phone, read from its motion sensors, with the three angles the browser reports and the quaternion built from them. Without sensors, drag the model or set the three angles.
On a phone, press the button (an iPhone asks for your permission first) and move the phone around. On a computer, drag the model. Hold the phone upright and turn it: the three angles jump at the gimbal-lock pose from the start of this article, while the quaternion moves smoothly. Its sign is kept continuous from one sample to the next, since q and −q are the same orientation.
One trap is worth knowing: the order of the four numbers. This article, the Gaussian splatting file format and much of the scientific literature write (w, x, y, z); three.js, WebXR, glTF and Unity store (x, y, z, w). Mixing the two up is the most common quaternion bug.
For developers: from DeviceOrientation angles to a quaternion
The W3C angles are intrinsic Z-X′-Y″ turns, so the quaternion is the product of three half-angle turns, qz(α) · qx(β) · qy(γ). In closed form, in the (w, x, y, z) order:
// alpha, beta, gamma in degrees, as DeviceOrientationEvent gives them
function orientationToQuaternion(alpha, beta, gamma) {
const h = Math.PI / 360 // degrees to radians, halved
const cz = Math.cos(alpha * h), sz = Math.sin(alpha * h)
const cx = Math.cos(beta * h), sx = Math.sin(beta * h)
const cy = Math.cos(gamma * h), sy = Math.sin(gamma * h)
return [
cx * cy * cz - sx * sy * sz, // w
sx * cy * cz - cx * sy * sz, // x
cx * sy * cz + sx * cy * sz, // y
cx * cy * sz + sx * sy * cz, // z
]
}On iOS, call DeviceOrientationEvent.requestPermission() from a click handler, over HTTPS. On Android, α is relative to the phone’s position when the page loaded unless you use deviceorientationabsolute. For a camera looking through the phone, as in AR, also turn by the screen’s orientation (screen.orientation.angle) about the viewing axis. The phone’s body itself never needs it. Libraries that store (x, y, z, w), such as three.js, expect the first number last.
Euler angles, matrix or quaternion?
| | Euler angles | Rotation matrix | Quaternion | |---|---|---|---| | Numbers stored | 3 | 9 | 4 | | Readable by a human | yes | no | not really | | Gimbal lock | yes | no | no | | Combining two rotations | awkward | multiply (27 products) | multiply (16 products) | | Smooth interpolation | no | awkward | slerp | | Repair after rounding | — | re-orthogonalise | divide by the length |
Each has its place. Euler angles remain the best way to show an orientation to a person, or to type one in. Matrices are what a graphics card finally uses to transform vertices. Quaternions are the best way to store, combine and interpolate orientations in between, which is why nearly every 3D engine keeps them there.
Frequently asked questions
What is a quaternion, in simple terms?
Four numbers that describe a rotation in 3D: the first says how much the object turns (the cosine of half the angle), the other three say about which axis (the axis multiplied by the sine of half the angle). Mathematically, it is a number with one ordinary part and three imaginary parts, invented by William Rowan Hamilton in 1843.
Why do quaternions use half the angle?
Because a point is turned by multiplying twice, once by q on the left and once by its inverse on the right (q p q⁻¹). Each multiplication turns the point by half the angle, so the two together give the full turn.
What is gimbal lock, and do quaternions avoid it?
Gimbal lock happens with three angles when the middle one reaches 90°: two of the three axes line up and one direction of rotation can no longer be described smoothly. It is a flaw of the description, not of the object. Quaternions have no such special orientation, so they avoid it completely.
Why do q and −q describe the same rotation?
Changing the sign of all four numbers adds a full turn of 360° to the rotation, because of the half angle. A full turn brings the object back to where it was, so both quaternions produce the same orientation. Programs take it into account when comparing or interpolating quaternions.
Quaternion, Euler angles or rotation matrix: which should I use?
Euler angles to display or enter an orientation, matrices to transform many points on the graphics card, quaternions to store, combine and interpolate orientations in between. Most 3D engines convert between the three constantly.
How do I get a quaternion from a phone in a web page?
With WebXR, the device pose already contains a quaternion (orientation, in x, y, z, w order). With the DeviceOrientation events, you receive three angles α, β, γ, which you convert yourself, applying the three turns in the order Z, X, Y. On an iPhone, the page must first ask the user’s permission to read the motion sensors.
Sources and further reading
- William Rowan Hamilton, On Quaternions; or on a new System of Imaginaries in Algebra, Philosophical Magazine, 1844–1850 — transcription, Trinity College Dublin
- Olinde Rodrigues, Des lois géométriques qui régissent les déplacements d’un système solide dans l’espace, Journal de mathématiques pures et appliquées, 1840 — Numdam. Three years before Hamilton, the French mathematician had already found the formula that combines two rotations.
- Ken Shoemake, Animating Rotation with Quaternion Curves, SIGGRAPH 1985 — ACM Digital Library
- W3C, DeviceOrientation Event Specification and WebXR Device API
- Grant Sanderson (3Blue1Brown) and Ben Eater, Visualizing quaternions, an interactive explorable of the four-dimensional picture
- Kerbl, Kopanas, Leimkühler, Drettakis, 3D Gaussian Splatting for Real-Time Radiance Field Rendering, SIGGRAPH 2023 — arXiv:2308.04079
- Sreenivasan Rajesh Venkitachalam, Quaternions Explained: 3D Rotation and Their Role in 3DGS, LinkedIn, 16 September 2026 — linkedin.com, the article that prompted this one
Checked in September 2026.