threejs-scalable-real-time-shadows

Implement scalable directional cast shadows for Three.js WebGPU/TSL scenes.

5|1|Updated Jul 4, 2026

Search Tags:#real-time #three.js #WebGPU #shadows #TSL

Ready to run

npx skills add https://github.com/linegel/threejs-complete-set-of-skill --skill threejs-scalable-real-time-shadows

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-scalable-real-time-shadows
Source: https://github.com/linegel/threejs-complete-set-of-skill/tree/main/threejs-scalable-real-time-shadows
Command: npx skills add https://github.com/linegel/threejs-complete-set-of-skill --skill threejs-scalable-real-time-shadows

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating scalable directional cast shadows for Three.js WebGPU/TSL scenes, providing a solution for bounded shadow projections, cascades, tiled array shadows, cached clipmaps, and more.

Core Features & Use Cases

Scalable Shadows: Offers options for shadow topology based on spatial coverage, caster change rate, receiver pixel coverage, and adapter resources.
Custom Cache: Allows for the use of a custom cached clipmap for persistent very large coverage with local changes.
Filtering and Bias: Provides control over filter footprints, bias, and fade width to ensure accurate shadow rendering.
Use Case: Imagine you are developing a complex Three.js scene with dynamic lighting and large shadow areas. This Skill can help you implement scalable and efficient shadow casting, improving the visual quality of your scene.

Quick Start

Use the threejs-scalable-real-time-shadows skill to set up scalable directional cast shadows for your scene.

Frequently Asked Questions about threejs-scalable-real-time-shadows

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement scalable directional shadows for large Three.js WebGPU scenes?▼

Scalable directional shadows in Three.js WebGPU scenes are implemented using bounded shadow projections, cascades, and cached clipmaps to handle large spatial coverage efficiently while maintaining rendering quality.

What is the best way to manage shadow casters in a WebGPU/TSL scene with dynamic lighting?▼

Managing shadow casters in a WebGPU/TSL scene involves selecting shadow topology based on spatial coverage, caster change rate, receiver pixel coverage, and adapter resources to optimize dynamic lighting performance.

Can I use cached clipmaps for persistent shadow coverage in Three.js?▼

Cached clipmaps can be used in Three.js to provide persistent very large shadow coverage by caching shadow data, which is optimized for local changes within the scene.

How do I control shadow filtering and bias in Three.js TSL?▼

Shadow filtering and bias in Three.js TSL are controlled by adjusting filter footprints, bias, and fade width, ensuring accurate shadow rendering across various caster and receiver scenarios.

Does implementing cascaded shadows require a WebGPU backend?▼

Implementing cascaded shadows with this approach requires a WebGPU backend, as it leverages WebGPU and TSL features to support bounded shadow projections, tiled array shadows, and cached clipmaps.