Implement stable, scalable directional-shadow systems for Three.js. Use for large procedural worlds, city scenes, terrain, moving cameras, WebGPU/TSL shadow nodes, cascades, cached clipmaps, texel stabilization, update budgets, and targeted invalidation.
Start a fresh conversation. Replace the highlighted placeholders.
Use threejs-shadow-systems to design a stable directional-shadow plan for [scene and camera behavior], including clipmap levels, update budget, invalidation rules, and texel-stabilization guidance; read the cached-clipmap reference before implementing a large-world directional light.
Required inputs
[scene and camera behavior]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: threejs-shadow-systemsdescription: Implement stable, scalable directional-shadow systems for Three.js. Use for large procedural worlds, city scenes, terrain, moving cameras, WebGPU/TSL shadow nodes, cascades, cached clipmaps, texel stabilization, update budgets, and targeted invalidation.
Shadow 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.
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.
threejs-shadow-systems by scottstts · The Skill Leaderboard