Silhouette Parallax Occlusion Mapping for three.js (WebGPU / TSL)

Height-field relief that carves the outline of your meshes — not just their interiors. A single TSL function ray-marches a height map and clips the silhouette through the alpha-test path, so relief overhangs the geometry it sits on, in the spirit of the shell-mapped surfaces in modern AAA titles (and the classic prism / shell mapping papers).

This shader is is a threejs webgpu TSL implementation of the same kind of SPOM/POM techniques popularly used in the game Crimson Desert.

▶ Live demo (WebGPU-capable browser required, e.g. Chrome/Edge) · Open in StackBlitz

Everything in this scene is flat geometry. The blast door is a recessed height field on a plane; the wall's outline crenellates along its relief trim; the flanges and bolts on the columns and pipes overhang the cylinders they wrap. All height maps are generated procedurally at startup — there are no texture assets.

Run it

Any static file server works (WebGPU requires a secure context — localhost is fine):

npx serve .
# or: python -m http.server 8080

Then open the served index.html in a WebGPU-capable browser (Chrome/Edge). three.js is pulled from the jsDelivr CDN, pinned to 0.185.1.

The addon

ParallaxOcclusion.js exports one function:

import { parallaxOcclusionUV } from './ParallaxOcclusion.js';

const pom = parallaxOcclusionUV( heightMap, {
	uvNode: uv(),          // base UVs (scale/offset them for tiling)
	scale: 0.1,            // relief depth, in UV units
	minLayers: 16,         // march steps head-on ...
	maxLayers: 96,         // ... and at grazing angles
	silhouette: true,      // compute the coverage / missed outputs
	silhouetteBounds: [ 0, 1 ],   // clip rays landing outside this UV region
	curvedSilhouette: false,      // clip rays passing a curved surface's horizon
	curvature: null,       // number | [ku, kv] | (uv) => node - see JSDoc
	sampleBounds: null     // clamp every height fetch into a UV region
} );

material.colorNode = pom.sample( colorMap ); // gradient-safe sampling at the marched UV
material.normalNode = /* build from a second parallaxOcclusionUV() call -