VSMShadowMap vs PCFSoftShadowMap in Three.js

Choosing the right shadow map type in Three.js is crucial for balancing visual realism and performance in WebGL applications. This article compares VSMShadowMap (Variance Shadow Maps) and PCFSoftShadowMap (Percentage Closer Filtering Soft Shadow Maps), analyzing their rendering techniques, visual quality, performance impact, and ideal use cases to help you make the best choice for your project.

PCFSoftShadowMap: Smooth, Multi-Sampled Shadows

PCFSoftShadowMap uses Percentage Closer Filtering (PCF) to soften the edges of shadows. Instead of a binary check (shadowed or not) for each pixel, it samples the surrounding area of the shadow map and averages the results.

Pros of PCFSoftShadowMap

• High Accuracy: It accurately represents self-shadowing and contact shadows without major structural artifacts.
• Familiar Control: You can control the softness using the light’s shadow.radius property.
• Reliability: It does not suffer from light bleeding, making it highly reliable for complex, layered indoor scenes.

Cons of PCFSoftShadowMap

• Performance Cost: Because it performs multiple texture lookups per pixel to calculate the soft edge, it can be resource-intensive, especially on mobile devices or with high-resolution shadow maps.
• Scale Limitations: If the shadow map resolution is too low, the edges can still appear pixelated or grainy despite the filtering.

VSMShadowMap: Variance-Based Soft Shadows

VSMShadowMap utilizes Variance Shadow Mapping. Instead of just storing the depth of the geometry, VSM stores the depth and the depth-squared values. This mathematical approach allows Three.js to estimate the probability of a pixel being in shadow, enabling smooth filtering and blurring.

Pros of VSMShadowMap

• Superior Softness: VSM handles extremely soft, wide-area shadows much better than PCF. The blur remains smooth even when shadows are cast far from the receiver.
• Performance with Large Blurs: Blurring shadows is computationally cheaper under VSM because it can utilize hardware filtering and mipmapping, making large soft shadows more performant than PCF.
• Customizable Blur: It utilizes properties like shadow.blurSamples to control the quality of the blur directly.

Cons of VSMShadowMap

• Light Bleeding: The biggest drawback of VSM is “light bleeding” (or light leaking). In complex scenes with overlapping geometry, light can falsely “leak” through solid objects.
• Memory Overhead: Storing depth and depth-squared values requires 32-bit float textures, which increases GPU memory usage.

Direct Comparison

Which One Should You Choose?

Select PCFSoftShadowMap if your project features complex, close-up geometry, indoor environments, or layered objects where light bleeding would ruin the realism. It is the safer, more robust choice for general-purpose 3D rendering.

Select VSMShadowMap if you are rendering vast outdoor environments, scenes with large distances between shadow casters and receivers, or projects where highly stylized, ultra-soft shadows are preferred and light bleeding can be managed through careful layout design.