Shadows looking awful

[KarelAnker]

Hey,

 

I basically have a problem, which is easiest to describe as following: I have a terrain, it should receive shadows from itself and cast them. The problem is that the terrain doesn't have 1 height. On certain positions its higher than other spots. However, the shadows are really awful when you have a terrain like this which should cast and receive shadows. 

 

Here's a picture of what I mean:

 

 

Code:

shadowGenerator = new BABYLON.ShadowGenerator(4 * 1024, light);shadowGenerator.bias = 0.00001;shadowGenerator.usePoissonSampling = true;

Upping the bias kinda matters, but it's not the effect that I desire, because only fully shadowed places will be black, like this:

 

 

Decreasing / increasing shadow quality just makes the triangles on the shadows bigger or smaller.

 

Close up of the shadow:

http://imgur.com/lSqb4IH

 

== 

[GameMonetize]

Yep we call this shadow acne

 

This is because we have to use rgb32 to store shadows and thus we lose a LOT of precision.

[KarelAnker]

Yep we call this shadow acne

 

This is because we have to use rgb32 to store shadows and thus we lose a LOT of precision.

Is there any way to fix it on my part? (guess not, after reading this comment)

 

Does this same effect happen with variance shadowmaps?

[GameMonetize]

Variance shadow maps are the worse regarding precision as we can use only 16bits to store shadow depth

 

This is a big issue of webGL so far but with the raise of WebGL2 we will be able to find better texture format to store shadows

 

The only option for now is what you did: the bias

[monkeyface]

Hey @Deltakosh - I'm still also struggling with shadows.

 

I've noted that Blend4Web seem to have achieved nice looking shadows in a large open-world scene here:

https://www.blend4web.com/apps/firstperson/firstperson.html?v=20151020144053

 

Looking at the shadows they seem to get rougher in the distance, so I guess they're just using CSM as you were planning? Or is it some other trick maybe?

[KarelAnker]

ThreeJS is opensource, maybe look at how they are casting the shadows, as the shadows on ThreeJS are really great looking.

I do wonder how you got the shadows working on http://playground.babylonjs.com/?14 , as these look smooth and cast and receive the shadows

[adam]

On 10/26/2015 at 6:20 AM, KarelAnker said:

I do wonder how you got the shadows working on http://playground.babylonjs.com/?14 , as these look smooth and cast and receive the shadows

The code is right there.  Try using a point light and create your terrain with BABYLON.Mesh.CreateGroundFromHeightMap.

[adam]

And don't use a shadow map for self-shadowing.

[KarelAnker]

The code is right there. Try using a point light and create your terrain with BABYLON.Mesh.CreateGroundFromHeightMap.

Yeah but I wanted to know why these shadows look great while the shadow maps look pretty awful

[Samuel Girardin]

I think there is no shadow in this scene, it's just light.