Learning Quaternions While Waiting for Instant Noodles

Quaternions are often intimidating because they look abstract, but in 3D graphics they solve a very practical problem: representing rotation safely and smoothly.

If Euler angles are like describing rotation one axis at a time, quaternions describe orientation in a way that avoids many of the problems caused by axis order and gimbal lock.

You do not need to understand every mathematical detail before using them. The first practical step is learning when to use quaternion rotation, how to convert from Euler angles, and how to interpolate between orientations.

In game engines and 3D frameworks, quaternions are especially useful for camera movement, object rotation, animation blending, and smooth turning.

This draft is suitable for publication after adding small visual examples showing the difference between Euler rotation and quaternion interpolation.

Related Materials

The following source media, links, code, and MDX components are kept as technical references.

Media

• 
• 
• 

Links

• How to Rotate a vertex by a quaternion in glsl
• https://www.youtube.com/embed/zjMuIxRvygQ?si=zn8UWteFLyC8ytk0"
• 四元數介紹 (1).webp
• 四元數介紹.gif
• 四元數介紹 (2).webp

Code and Configuration Snippets

Snippet 1

q = [s,v]
q = [s + xi + yj + zk]

Snippet 2

q = [x, y, z, w]

Snippet 3

p1 = q P0 q^-1

Snippet 4

//known info : angle and axis
half_angle = angle/2
q.x = axis.x * sin(half_angle)
q.y = axis.y * sin(half_angle)
q.z = axis.z * sin(half_angle)
q.w = cos(half_angle);

Snippet 5

q.x = position.x
q.y = position.y
q.z = position.z
q.w = 0

Snippet 6

q = [x, y, z, w]
norm = |q| = sqrt(q.x^2 + q.y^2 + q.z^2 + q.w^2)
q^-1 = [-x, -y, -z, w]/ norm
q^-1 = [-x/norm, -y/norm, -z/norm, w/norm]

Snippet 7

q^-1 = q* = [-x, -y, -z, w]

Snippet 8

q = q1 * q2

Snippet 9

q1 * q2 != q2 * q1

Snippet 10

q.x = (q1.w * q2.x) + (q1.x * q2.w) + (q1.y * q2.z) - (q1.z * q2.y)
q.y = (q1.w * q2.y) - (q1.x * q2.z) + (q1.y * q2.w) + (q1.z * q2.x)
q.z = (q1.w * q2.z) + (q1.x * q2.y) - (q1.y * q2.x) + (q1.z * q2.w)
q.w = (q1.w * q2.w) - (q1.x * q2.x) - (q1.y * q2.y) - (q1.z * q2.z)

Snippet 11

i^2 = j^2 = k^2 = -1
ij = -ji = k
jk = -kj = i
ki = -ik = j