PCFShadowMap vs PCFSoftShadowMap in Three.js

This article compares PCFShadowMap and PCFSoftShadowMap in Three.js, highlighting their visual characteristics and performance impacts. You will learn how these two shadow map types differ in rendering shadow edges, how they affect frame rates, and how to choose the right one for your 3D web applications.

Visual Differences

The primary visual difference between the two shadow maps lies in how they handle the edges of shadows.

• PCFShadowMap (Percentage-Closer Filtering): This method produces shadows with relatively sharp, clean, and distinct edges. While it filters the shadow edges to prevent the harsh pixelation seen in the default BasicShadowMap, the transition from shadow to light remains sudden. The sharpness of the shadow is highly dependent on the shadow map resolution; lower resolutions will still reveal blocky edges.
• PCFSoftShadowMap (Percentage-Closer Soft Shadows): This method applies an advanced filtering algorithm that softens and blurs the edges of the shadows. It simulates a more realistic penumbra, where shadows become softer and more diffused. This results in organic, lifelike shadows that look smooth even when using lower shadow map resolutions.

Performance Differences

The visual improvement of soft shadows comes at a cost to hardware resources.

• PCFShadowMap: This option is highly performant. It requires fewer GPU texture lookups per pixel to determine shadow boundaries. It is the industry standard for projects that must run smoothly across a wide range of hardware, including mobile devices, VR headsets, and older laptops.
• PCFSoftShadowMap: This option is computationally expensive. To generate the soft, blurred gradients, the GPU must perform multiple additional texture samples for every pixel in the shadow area. On mobile devices or integrated GPUs, enabling PCFSoftShadowMap can lead to a significant drop in frame rates, especially if there are multiple shadow-casting lights in the scene.

Implementation and Best Practices

To configure the shadow map type in Three.js, you must set the type property on the renderer’s shadow map object:

// For sharper, high-performance shadows
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

// For softer, realistic shadows (higher performance cost)
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

When deciding which shadow map to use, consider your target audience and platform:

• Use PCFShadowMap if you are targeting mobile browsers, creating virtual reality experiences, or building complex scenes with many moving lights where maintaining 60 FPS is critical.
• Use PCFSoftShadowMap for desktop-only applications, interior design portfolio showcases, product configurators, or scenes where realistic, high-fidelity lighting is crucial to the user experience.