# Shadow map size

**URL:** <https://forum.babylonjs.com/t/shadow-map-size/5907>\
**Category:** Questions\
**Tags:** lighting\
**Created:** [September 26, 2019, 2:37pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907 "2019-09-26T14:37:11Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tkmoney](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tkmoney/32/4643_2.png) [@tkmoney](https://forum.babylonjs.com/u/tkmoney)\
**Post date:** [September 26, 2019, 2:37pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/1 "2019-09-26T14:37:12Z")

</div>

Im somewhat new to Babylon JS but I created a scene and filled it with some cubes, added a light and a shadow map using:

`new BABYLON.ShadowGenerator(4096, light);`

Im getting really aliased shadow edges. I would like to know how I can get the aliasing to be smaller without bumping up the shadow map size.

 ![Screenshot_8](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/807fa5cf1023ec0dc56ed240205a873206392109.jpeg)

Its already at 4096 which is already fairly large. Am I missing something? Thanks!

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [September 26, 2019, 3:40pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/2 "2019-09-26T15:40:09Z")

</div>

Hi @tkmoney

Welcome to the forum 🙂

You can use shadowmap blur like in this PG  
[https://www.babylonjs-playground.com/#IIZ9UU](https://www.babylonjs-playground.com/#IIZ9UU)  
In particular these lines:

```auto
    shadowGenerator.useBlurExponentialShadowMap = true;
    shadowGenerator.useKernelBlur = true;
    shadowGenerator.blurKernel = 64;

```

---

<div class="post-metadata">

**Author:** ![tkmoney](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tkmoney/32/4643_2.png) [@tkmoney](https://forum.babylonjs.com/u/tkmoney)\
**Post date:** [September 26, 2019, 6:20pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/3 "2019-09-26T18:20:13Z")

</div>

Hey @Cedric,  
Thx 🙂

I think I’ve discovered what the issue is but Im not sure what to do about it. It seems that the more objects you add to the to the shadow caster with “addShadowCaster”, the more jagged the shadows become. I created a playground here: [Babylon.js Playground](https://playground.babylonjs.com/#ZSB485)

It seems like you really dont need that many to start getting jaggies. Is there anything that can be done? Thanks!

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [September 26, 2019, 6:36pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/4 "2019-09-26T18:36:12Z")

</div>

[https://playground.babylonjs.com/#ZSB485#1](https://playground.babylonjs.com/#ZSB485#1)  
Added animation to the light, moved some spheres upwards.  
With  
`shadowGenerator.useBlurExponentialShadowMap = true; shadowGenerator.useKernelBlur = true; shadowGenerator.blurKernel = 64;`  
results are much better.

---

<div class="post-metadata">

**Author:** ![tkmoney](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tkmoney/32/4643_2.png) [@tkmoney](https://forum.babylonjs.com/u/tkmoney)\
**Post date:** [September 26, 2019, 7:35pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/5 "2019-09-26T19:35:51Z")

</div>

Hey @labris,

Why is it that the meshes close to the ground dont cast a shadow? Also btw, it seems that the range of distance that the meshes are spread out seems to matter as far as shadow quality. Go to this playground and adjust the “distance\_range” var to 10.

[https://playground.babylonjs.com/#ZSB485#3](https://playground.babylonjs.com/#ZSB485#3)

Thanks!

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [September 26, 2019, 8:11pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/6 "2019-09-26T20:11:30Z")

</div>

A shadow map must englobe every mesh set as parameter. If the meshes are spread across a large surface, the shadow map texels will have less density.  
A possibility is to add/remove meshes based on distance to the camera.

---

<div class="post-metadata">

**Author:** ![tkmoney](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tkmoney/32/4643_2.png) [@tkmoney](https://forum.babylonjs.com/u/tkmoney)\
**Post date:** [September 26, 2019, 9:39pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/7 "2019-09-26T21:39:39Z")

</div>

Hey @Cedric,

Thanks, that makes sense 🙂. I think setting useBlurExponentialShadowMap should work good enough for my purpose. Although I have a question that is somewhat adjacent. When using “useBlurExponentialShadowMap”, it seems that when a mesh is half under the ground, a shadow is being drawn for that portion of the mesh below the ground. here is a playground: [https://playground.babylonjs.com/#ZSB485#5](https://playground.babylonjs.com/#ZSB485#5)

Is there a way to account for this other than just not doing that? Thanks!

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [September 26, 2019, 9:57pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/8 "2019-09-26T21:57:48Z")

</div>

I tried to play with light.shadowMinZ and light.shadowMaxZ without success  
Maybe @sebavan has some idea ?

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [September 26, 2019, 9:59pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/9 "2019-09-26T21:59:28Z")

</div>

Ha! I found something! use shadowGenerator.useContactHardeningShadow = true;

But it’s webgl2 only

[https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only](https://doc.babylonjs.com/babylon101/shadows#contact-hardening-shadow-webgl2-only)

---

<div class="post-metadata">

**Author:** ![tkmoney](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tkmoney/32/4643_2.png) [@tkmoney](https://forum.babylonjs.com/u/tkmoney)\
**Post date:** [September 26, 2019, 10:10pm UTC](https://forum.babylonjs.com/t/shadow-map-size/5907/10 "2019-09-26T22:10:13Z")

</div>

Aw, dang. It gets rid of the extra shadow but I loose the blur. Also I need to support webgl1. Thanks!