threejs-shadow-systems
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.
How do I install this agent skill?
npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-shadow-systemsIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides technical and mathematical instructions for implementing high-performance shadow systems in Three.js. It focuses on rendering logic, stability, and memory management for large-scale environments and does not contain any malicious patterns or security risks.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
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.
- 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.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/scottstts/threejs-awesome-graphics-agent-skills/threejs-shadow-systems">View threejs-shadow-systems on skillZs</a>