Lighting and shadows define mood, depth, and realism in 3D experiences, but they can also be performance bottlenecks—especially in WebXR and browser-based environments. Three.js provides multiple lighting techniques, ranging from baked lightmaps to real-time dynamic shadows. Balancing realism with performance is key to creating immersive yet smooth-running applications.
By combining efficient shadow techniques, light probes, and post-processing effects, developers can achieve cinematic lighting in large scenes without overwhelming the GPU.
Core Techniques:
1. Dynamic Lighting Models
- Directional, Point, and Spot Lights for varied illumination.
- Hemisphere Light for natural ambient sky/ground tint.
- Light Probes / Environment Maps for global indirect lighting.
2. Shadow Mapping
- Use PCF Soft Shadows or VSM (Variance Shadow Maps) for smoother edges.
- Control shadow camera bounds to avoid unnecessary rendering.
- Adjust resolution dynamically based on distance and importance.
3. Baking and Hybrid Approaches
- Pre-bake global illumination or ambient occlusion in external tools.
- Combine baked lightmaps with dynamic real-time shadows for moving objects.
4. Optimizations for Performance
- Implement Cascaded Shadow Maps (CSM) for large outdoor scenes.
- Use shadow LOD—lower resolution shadows for distant terrain.
- Consider deferred rendering or screen-space techniques for complex environments.
5. Post-Processing Enhancements
- Bloom and Lens Flares for bright highlights.
- Screen-Space Ambient Occlusion (SSAO) for subtle depth.
- Volumetric Lighting (God Rays) for atmospheric realism.
Use Cases:
- Virtual museums or architecture tours requiring accurate indoor shadows.
- Outdoor VR worlds with day-night cycles.
- Cinematic WebXR experiences with atmospheric lighting.
Advantages:
- Adds immersion and realism to procedural or handcrafted worlds.
- Optimized shadows prevent VR frame drops.
- Hybrid lighting reduces GPU load while keeping visuals high quality.
Limitations:
- Shadow maps can be expensive on large terrains.
- Real-time global illumination is still limited in browsers.
- Requires careful tuning per device (desktop vs. mobile VR).