parallaxMapping: Multi-Algorithm Surface Displacement

Adaptive Heightmap Processing with Four Implementation Variants

The parallaxMapping collection provides four distinct algorithms for heightmap-based surface displacement. Each variant offers different quality-performance characteristics suitable for various rendering scenarios.

Mathematical Foundation

Given a viewing vector $\mathbf{V}$ and texture coordinate $\mathbf{T}$, parallax mapping adjusts surface coordinates based on heightmap data $h(\mathbf{T})$. The displacement follows:

$\mathbf{T'} = \mathbf{T} + \Delta\mathbf{T} \cdot h(\mathbf{T}) \cdot S$

where $S$ represents the scale factor and $\Delta\mathbf{T}$ the displacement direction.

Algorithm Variants

Function	Quality	Performance	Description
parallaxMappingSimple	Low	High	Single-sample approximation
parallaxMappingSteep	Medium	Medium	Layer-based stepping
parallaxMappingRelief	High	Low	Binary refinement
parallaxMappingOcclusion	Highest	Lowest	Interpolated occlusion

Algorithm Details

Simple Parallax

Direct offset calculation without iteration: $\mathbf{T'} = \mathbf{T} - S \cdot \mathbf{V}_{xy} \cdot h(\mathbf{T})$

Steep Parallax

Layer-based stepping with adaptive resolution:

• Layer count: $N = \text{mix}(15, 5, |\mathbf{V} \cdot \mathbf{z}|)$
• Step size: $\Delta h = 1/N$

Relief Mapping

Binary refinement after initial stepping for sub-pixel accuracy.

Occlusion Mapping

Linear interpolation between intersection points: $w = \frac{h_{next}}{h_{next} - h_{prev}}$ $\mathbf{T'} = w \cdot \mathbf{T}_{prev} + (1-w) \cdot \mathbf{T}_{curr}$

Live Editor

const fragment = () => {
      const heightTex = uniform('https://avatars.githubusercontent.com/u/40712342')
      const viewDir = vec3(uv.sub(0.5).mul(2), 1).normalize()
      const displaced = parallaxMappingSimple(heightTex, viewDir, uv)
      return texture(heightTex, displaced)
}