eulerView: Euler Angle View Transform

Combined rotation and translation matrix

The Euler view transformation creates a 4x4 matrix from 3D position and Euler angles. The transformation applies rotations in YXZ order (yaw-pitch-roll) then combines with translation:

$$R_Y = \begin{pmatrix} \cos(y) & 0 & \sin(y) \\ 0 & 1 & 0 \\ -\sin(y) & 0 & \cos(y) \end{pmatrix}$$ $$R_X = \begin{pmatrix} 1 & 0 & 0 \\ 0 & \cos(x) & \sin(x) \\ 0 & -\sin(x) & \cos(x) \end{pmatrix}$$ $$R_Z = \begin{pmatrix} \cos(z) & -\sin(z) & 0 \\ \sin(z) & \cos(z) & 0 \\ 0 & 0 & 1 \end{pmatrix}$$

The final transformation matrix combines rotation and translation:

$$T = \begin{pmatrix} R_{YXZ} & \mathbf{p} \\ \mathbf{0}^T & 1 \end{pmatrix}$$

Where $\mathbf{p}$ is the position vector and $R_{YXZ} = R_Y \cdot R_X \cdot R_Z$.

Rotation Order Specification

Component	Axis	Angle Range	Description
euler.x	X	$[-\pi, \pi]$	Pitch (elevation)
euler.y	Y	$[-\pi, \pi]$	Yaw (azimuth)
euler.z	Z	$[-\pi, \pi]$	Roll (bank)

Orbiting View Matrix

Live Editor

const fragment = () => {
      const time = iTime.mul(0.3)
      const pos = vec3(cos(time).mul(3), sin(time.mul(1.3)).mul(2), 2)
      const euler = vec3(sin(time.mul(0.7)).mul(0.3), time, cos(time.mul(0.5)).mul(0.2))
      const viewMatrix = eulerView(pos.sin(), euler)
      const transformed = viewMatrix.mul(vec4(uv, 1, 1)).xyz
      const color = transformed.mul(0.5).add(0.5)
      return vec4(color, 1)
}

Result

Loading...