What is a shadowMap?

🧑‍💻 Technical Support
, ,
1

To better visualize what exactly is the shadowMap, take a look at this example project:

Specifically the light entity with a shadowMap:


<a-entity
    light="
      type: directional;
      intensity: 0.8;
      castShadow: true;
      shadowMapHeight:2048;
      shadowMapWidth:2048;
      shadowCameraTop: 20;
      shadowCameraBottom: -20;
      shadowCameraRight: 20;
      shadowCameraLeft: -20;
      target: #camera"
    xrextras-attach="target: camera; offset: 8 15 4"
    position="1 4.3 2.5"
    shadow>
  </a-entity>

Think about the shadow map as a plane where shadows are rendered, you can change the size and location of this but keep in mind the larger it is the less optimized it will be. In this specific project the shadow map is targeted to the #camera so wherever the camera moves the shadows will follow.
But, the distance is 20 units in this sample, and you can see that as the camera moves so does the shadow map. You can increase the shadow map distance but resolution will take a hit so you can increase the shadowMapHeight and shadowMapwidth if needed.

To compare, I’ve taken the same project but instead increased the shadowCamera top/bottom/right/left to 40 units. So I have a much larger shadowMap are along with increasing the resolution accordingly to 4096 (keep in mind the larger you make this the heavier your experience gets)

<a-entity
    light="
      type: directional;
      intensity: 0.8;
      castShadow: true;
      shadowMapHeight:4096;
      shadowMapWidth:4096;
      shadowCameraTop: 40;
      shadowCameraBottom: -40;
      shadowCameraRight: 40;
      shadowCameraLeft: -40;
      target: #camera"
    xrextras-attach="target: camera; offset: 8 15 4"
    position="1 4.3 2.5"
    shadow>
  </a-entity>
6 Likes
4

Here is example of the 20 unit shadow map

5

and then the 40 unit shadow map which covers shadows of almost all the trees