toMat3: Dimensional Matrix Projection

Homogeneous to Euclidean Transformation Kernel Extraction

The toMat3 function extracts the essential 3×3 transformation kernel from a 4×4 homogeneous matrix by projecting away the translational and perspective components. This operation preserves the linear transformation characteristics: rotation, scaling, and shearing while discarding positional information.

Mathematically, for a 4×4 matrix $M$:

$$M = \begin{pmatrix} m_{00} & m_{01} & m_{02} & t_x \\ m_{10} & m_{11} & m_{12} & t_y \\ m_{20} & m_{21} & m_{22} & t_z \\ p_x & p_y & p_z & w \end{pmatrix}$$

The function extracts the upper-left 3×3 submatrix:

$$\text{toMat3}(M) = \begin{pmatrix} m_{00} & m_{01} & m_{02} \\ m_{10} & m_{11} & m_{12} \\ m_{20} & m_{21} & m_{22} \end{pmatrix}$$

This operation is fundamental in computer graphics for separating orientation from position, enabling normal vector transformations without translational artifacts.

ライブエディター

const fragment = () => {
      const baseMatrix = mat4(
              iTime.cos(), iTime.sin().negate(), 0, 0,
              iTime.sin(), iTime.cos(), 0, 0,
              0, 0, 1, 0,
              0.5, 0.3, 0.2, 1
      )

      const rotationOnly = toMat3(baseMatrix)
      const direction = vec3(uv, 0.5).normalize()
      const transformed = rotationOnly.mul(direction)

      const intensity = transformed.z.abs()
      const colorPhase = transformed.y.atan2(transformed.x)
      const color = vec3(
              colorPhase.add(iTime).sin().mul(0.5).add(0.5),
              colorPhase.add(iTime).add(2.0).sin().mul(0.5).add(0.5),
              intensity
      ).mul(intensity)

      return vec4(color, 1)

}

This visualization demonstrates how toMat3 isolates rotational transformation from a complete 4×4 matrix. The extracted 3×3 matrix transforms directional vectors while preserving their angular relationships, creating fluid color rotations without positional drift that would occur with the full 4×4 matrix transformation.