scottstts/threejs-awesome-graphics-agent-skills

threejs-shadow-systems

Implement stable, scalable directional-shadow systems for Three.js.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

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.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
scottstts
Społeczność

threejs-atmosphere-aerial-perspective

Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-bloom

Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-camera-direction

Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź