tbn: Tangent-Bitangent-Normal Matrix

Surface coordinate system construction

The TBN matrix creates a local coordinate system on a surface from tangent, bitangent, and normal vectors. This matrix transforms vectors from tangent space to world space, commonly used for normal mapping and surface shading:

$$\text{TBN} = \begin{pmatrix} T_x & B_x & N_x \\ T_y & B_y & N_y \\ T_z & B_z & N_z \end{pmatrix}$$

Where $\mathbf{T}$ is the tangent vector, $\mathbf{B}$ is the bitangent vector, and $\mathbf{N}$ is the normal vector.

Orthogonal Basis Construction

For the two-parameter version, the tangent and bitangent are computed from the normal and up vector:

$$\mathbf{T} = \text{normalize}(\mathbf{up} \times \mathbf{N})$$ $$\mathbf{B} = \mathbf{N} \times \mathbf{T}$$

This ensures an orthogonal coordinate system aligned with the surface.

Coordinate System Properties

Vector	Purpose	Constraints
Tangent	Surface horizontal direction	Orthogonal to normal
Bitangent	Surface vertical direction	Orthogonal to both
Normal	Surface perpendicular	Unit length preferred

Live Editor

const fragment = () => {
      const normal = normalize(vec3(cos(uv.x.mul(6)), sin(uv.y.mul(4)), 1))
      const up = vec3(0, 1, 0)
      const tbnMatrix = tbnFromNormal(normal, up)
      const localDir = normalize(vec3(uv.sub(0.5), 0.5))
      const worldDir = tbnMatrix.mul(localDir)
      const color = worldDir.mul(0.5).add(0.5)
      return vec4(color, 1)
}