Configuring the shadows

Each light casting shadows will render the scene in a specific way and output that we call “shadow map”. This shadow map is then used to know if a surface is in the shade or not.

By default, that shadow map resolution is rather low in order to maintain solid performance.

Fortunately, we can change it.

In pure JavaScript, we can access it by doing directionalLight.shadow.mapSize.set(1024, 1024)

Most properties (even deep ones) are still accessible right from the attributes, by separating the different depth levels with dashes -.

As an example, to change the shadow.mapSize property, we can use the shadow-mapSize attribute

<directionalLight
    ref={ directionalLight }
    position={ [ 1, 2, 3 ] }
    intensity={ 4.5 }
    castShadow
    shadow-mapSize={ [ 1024, 1024 ] }
/>

And we can do the same with the near, far, top, right, bottom and left properties (since a OrthographicCamera is used to render the shadow map):

Soft shadows

The default shadows are too sharp. There are multiple ways of softening them and we are going to discover one technique called Percent Closer Soft Shadows (PCSS).

The idea is to make the shadow look blurry by picking the shadow map texture at an offset position according to the distance between the surface casting the shadow and the surface receiving the shadow, which is kind of how it happens in real life.

here https://threejs.org/examples/#webgl_shadowmap_pcss

If you check the code, you’ll see that implementing this solution implies modifying the shader chunks of Three.js directly, which is a bit messy.

Fortunately, drei comes to the rescue with a helper named <SoftShadows>.

In Experience.jsx, import SoftShadows from @react-three/drei:

import { SoftShadows, BakeShadows, useHelper, OrbitControls } from '@react-three/drei'

And add it right after the <BakeShadows /> with the following attributes: