Stable Directional Shadows for Large Worlds in Three.js

Where this fits

You're building a procedural city or terrain scene with a moving camera. The default Three.js shadow map flickers, bleeds, and falls apart as you zoom out. You need a directional shadow system that stays crisp across kilometers of world space without tanking the frame rate. This skill gives you a battle-tested pattern for cached clipmaps, texel stabilization, and update budgets.

Why agents benefit

• Snaps shadow levels to texel grids – eliminates shimmer and crawling artifacts when the camera moves.
• Cross-fades adjacent clipmap levels – avoids hard pop-in as shadow resolution transitions.
• Caches coarse levels and refreshes near levels – keeps quality high while respecting frame budgets.
• Invalidates only intersecting levels – targeted updates when casters or terrain change, not full rebuilds.
• Scales normal bias by world-space texel width – reduces acne without introducing peter-panning.

Practical scenarios

Large procedural city with a flying camera

Your agent generates a city with thousands of buildings. A single shadow map can't cover the view. The skill's cached clipmap approach defines concentric light-space squares, snaps each to its own texel grid, and cross-fades between levels so shadows stay stable as the camera flies across blocks.

Streaming terrain with dynamic objects

You're streaming terrain chunks and placing objects on demand. The skill's targeted invalidation lets you update only the clipmap levels that intersect changed regions, avoiding expensive full-map re-renders every frame.

WebGPU/TSL shadow nodes

If you're using Three.js's WebGPU renderer and TSL shader nodes, this skill provides reference implementations for shadow nodes that integrate with your custom shader graph, keeping your shadow system aligned with modern rendering pipelines.

Add it to your agent workflow

Install the skill via npx:

npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-shadow-systems

Then ask your agent to implement a cached clipmap shadow system. For example, prompt: "Use the threejs-shadow-systems skill to set up three light-space square levels with per-level texel snap and a 2ms update budget for coarse levels." The skill's README and reference docs guide the agent through the exact steps.

Compare before adopting

Before committing, compare this skill against alternatives by checking:

• Quality signals – Does it include real-world examples (like the procedural financial tower) and reference docs? Are the techniques explained with enough depth?
• Maintenance freshness – Is the repo actively updated? Check commit history and issue responses.
• Alternatives – Consider Three.js's built-in PCFSoftShadowMap or custom CSM implementations. This skill is specialized for large-world stability, not general-purpose shadows.
• Workflow fit – Does the skill align with your agent's coding style and project stack? It assumes familiarity with Three.js and shader concepts.

Why it is worth tracking

This skill stands out because it addresses a notoriously hard problem—stable shadows in large, dynamic worlds—with a concrete, code-backed approach. With 778 stars and an active author, it shows community traction. Evaluate it when your project outgrows a single shadow map or when you need WebGPU/TSL shadow support. For a deeper look, see the skill page for usage examples and community feedback.