threejs-parallax-occlusion-mapping

Name: threejs-parallax-occlusion-mapping
Author: scottstts

377stars47forks

How to install threejs-parallax-occlusion-mapping?

scottstts/threejs-awesome-graphics-agent-skills/threejs-parallax-occlusion-mapping

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-parallax-occlusion-mapping

Installs into the current project.

Summary

Build silhouette-aware parallax occlusion mapping in Three.js WebGPU and TSL. Use for height-field ray marching, relief UVs, clipped flat or curved silhouettes, inflated shells, self-shadowing, relief-aware shadow depth, and height-derived normals.

Files · 1

View on GitHub

SKILL.md

1	# Parallax Occlusion Mapping
2
3	Treat relief as a coupled intersection, coverage, normal, and shadow system.
4	Do not stop at offsetting texture coordinates.
5
6	## Build order
7
8	```text
9	tangent frame and height convention
10	-> view-ray march and hit refinement
11	-> bounded or curved silhouette coverage
12	-> shared marched sampling
13	-> height-derived shading normal
14	-> light-ray self-shadow march
15	-> relief-aware cast/received shadow positions
16	```
17
18	Read [references/silhouette-relief-contract.md](references/silhouette-relief-contract.md)
19	for the intersection contract, flat and curved silhouette modes, shell
20	inflation, shadow integration, quality controls, and diagnostics.
21
22	Read the
23	[silhouette relief implementation](examples/silhouette-relief/ParallaxOcclusion.js)
24	for the complete TSL march, binary hit refinement, gradient-safe sampling,
25	coverage, horizon trimming, curved sag, and self-shadow function.
26
27	Read the
28	[complete bulkhead assembly](examples/silhouette-relief/silhouette-relief-system.js)
29	and its [packed procedural height maps](examples/silhouette-relief/bulkhead-height-maps.js)
30	for a wall, deck, relief columns, and overhead pipes using height-derived
31	normals, inflated cylinder shells, alpha-to-coverage, shadow-mask carving,
32	marched shadow depth, and received-shadow positions.
33
34	## Required controls
35
36	- world or UV relief scale;
37	- minimum and maximum view-march layers;
38	- silhouette bounds and feathering;
39	- curved-surface curvature or curvature callback;
40	- horizon trimming and edge erosion;
41	- self-shadow steps, bias, and strength;
42	- geometry, carved, and full-relief shadow modes;
43	- height, coverage, marched UV, normal, and shadow diagnostics.
44
45	## Failure conditions
46
47	- color, normal, and roughness rebuild separate view marches unintentionally;
48	- a curved host uses flat silhouette clipping at its geometric horizon;
49	- an inflated shell changes the relief floor instead of keeping it on the base surface;
50	- alpha-tested beauty coverage is assumed to carve shadow maps automatically;
51	- derivative sampling runs behind discard on drivers where it erodes coverage;
52	- grazing rays divide by an unbounded view-space Z component;
53	- relief self-shadowing darkens fill or emission indiscriminately.
54
55	## Routing boundary
56
57	Use `$threejs-procedural-materials` when no ray-marched height intersection or
58	silhouette ownership is required. Use `$threejs-procedural-geometry` when the
59	silhouette must be actual mesh topology rather than a view-dependent relief.

People who liked this also viewed

6 picks

Type

threejs-parallax-occlusion-mapping

377stars47forks

View on GitHub

How to install threejs-parallax-occlusion-mapping?

scottstts/threejs-awesome-graphics-agent-skills/threejs-parallax-occlusion-mapping

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-parallax-occlusion-mapping

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Parallax Occlusion Mapping
2
3	Treat relief as a coupled intersection, coverage, normal, and shadow system.
4	Do not stop at offsetting texture coordinates.
5
6	## Build order
7
8	```text
9	tangent frame and height convention
10	-> view-ray march and hit refinement
11	-> bounded or curved silhouette coverage
12	-> shared marched sampling
13	-> height-derived shading normal
14	-> light-ray self-shadow march
15	-> relief-aware cast/received shadow positions
16	```
17
18	Read [references/silhouette-relief-contract.md](references/silhouette-relief-contract.md)
19	for the intersection contract, flat and curved silhouette modes, shell
20	inflation, shadow integration, quality controls, and diagnostics.
21
22	Read the
23	[silhouette relief implementation](examples/silhouette-relief/ParallaxOcclusion.js)
24	for the complete TSL march, binary hit refinement, gradient-safe sampling,
25	coverage, horizon trimming, curved sag, and self-shadow function.
26
27	Read the
28	[complete bulkhead assembly](examples/silhouette-relief/silhouette-relief-system.js)
29	and its [packed procedural height maps](examples/silhouette-relief/bulkhead-height-maps.js)
30	for a wall, deck, relief columns, and overhead pipes using height-derived
31	normals, inflated cylinder shells, alpha-to-coverage, shadow-mask carving,
32	marched shadow depth, and received-shadow positions.
33
34	## Required controls
35
36	- world or UV relief scale;
37	- minimum and maximum view-march layers;
38	- silhouette bounds and feathering;
39	- curved-surface curvature or curvature callback;
40	- horizon trimming and edge erosion;
41	- self-shadow steps, bias, and strength;
42	- geometry, carved, and full-relief shadow modes;
43	- height, coverage, marched UV, normal, and shadow diagnostics.
44
45	## Failure conditions
46
47	- color, normal, and roughness rebuild separate view marches unintentionally;
48	- a curved host uses flat silhouette clipping at its geometric horizon;
49	- an inflated shell changes the relief floor instead of keeping it on the base surface;
50	- alpha-tested beauty coverage is assumed to carve shadow maps automatically;
51	- derivative sampling runs behind discard on drivers where it erodes coverage;
52	- grazing rays divide by an unbounded view-space Z component;
53	- relief self-shadowing darkens fill or emission indiscriminately.
54
55	## Routing boundary
56
57	Use `$threejs-procedural-materials` when no ray-marched height intersection or
58	silhouette ownership is required. Use `$threejs-procedural-geometry` when the
59	silhouette must be actual mesh topology rather than a view-dependent relief.

People who liked this also viewed

6 picks

Type