About threejs-shadow-systems
A skill for implementing directional light shadow maps in Three.js, aimed at developers working with large, moving views. It focuses on cached clipmap levels, texel-aligned updates, and transitions that avoid visible level boundaries.
Key features
- 01Concentric light-space clipmap levels
- 02Per-level texel snapping
- 03Cross-fades between adjacent levels
- 04Budgeted caching of coarse levels
- 05Invalidation for changed casters or terrain
Use cases
- 01Building directional shadows for large worlds
- 02Updating shadow coverage under a frame budget
- 03Avoiding visible transitions as the camera moves
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/threejs-shadow-systemsin Claude Code to confirm it loaded.
Bundled filesagents/openai.yamlreferences/cached-clipmap-shadows.md
Details
From the project READMEShadow Systems
Use a single shadow map only when its receiver region is genuinely bounded. For large moving views, make shadow coverage an explicit spatial hierarchy.
Cached clipmap workflow
- Define concentric light-space square levels.
- Snap each level center to its own texel grid.
- Cross-fade adjacent levels in shader space.
- Refresh near levels continuously.
- Cache coarse levels and update them under a frame budget.
- Invalidate intersecting levels when important casters or streamed terrain change.
- Scale normal bias by world-space texel width.
Read references/cached-clipmap-shadows.md before implementing a large-world directional light.
Read the cached shadow clipmaps for three light-space square levels, per-level texel snapping, containment cross-fades, cached coarse updates, scaled bias, and unshadowed outside weight.
Failure conditions
- projection centers move by fractions of a texel;
- shader containment does not match the map's committed center;
- all cascades refresh every frame without evidence;
- coarse levels freeze moving casters indefinitely;
- depth texture samples occur in divergent fragment control flow;
- the same normal bias is used across radically different texel sizes;
- level boundaries become visible under camera motion.
Routing boundary
Use this skill for light-space directional shadow maps. Use
$threejs-screen-space-ambient-occlusion for view-dependent ambient
visibility; AO is not a replacement for cast shadows.