技能 编程开发 Three.js 可扩展阴影系统

Three.js 可扩展阴影系统

v20260922
threejs-shadow-systems
本技能用于在 Three.js 中实现稳定且可扩展的方向性阴影系统。适用于大型程序化世界、城市场景和地形渲染,支持移动相机。涵盖 WebGPU/TSL 阴影节点、级联阴影、缓存贴图集、纹理像素稳定、更新预算及针对性无效化等技术,确保高性能渲染。
获取技能
334 次下载
概览

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

  1. Define concentric light-space square levels.
  2. Snap each level center to its own texel grid.
  3. Cross-fade adjacent levels in shader space.
  4. Refresh near levels continuously.
  5. Cache coarse levels and update them under a frame budget.
  6. Invalidate intersecting levels when important casters or streamed terrain change.
  7. 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.

信息
Category 编程开发
Name threejs-shadow-systems
版本 v20260922
大小 5.89KB
更新时间 2026-09-30
语言