CODEWITHSUNDEEP
three.jsshadow
Allan Raquin
Allan Raquin

Reputation: 613

Shadow aliasing with ShaderMaterial on three.js

Here a picture of my problem, like you can see my shadows aren't smooth on my ShaderMaterial wich is a copy of PhongMaterial.

enter image description here

For the moment I have try all of these solution find on internet but nothing seems to work :

groundGeometry.computeFaceNormals();
groundGeometry.computeVertexNormals();
groundGeometry.verticesNeedUpdate = true;
renderer.shadowMapType = THREE.PCFShadowMap; //And all options possible
renderer.shadowMapCullFace = THREE.CullFaceBack; //And the other one
renderer = new THREE.WebGLRenderer({ antialias : true });

I also play with the different parameters of my SpotLight (also try with Directional light: 

shadowMapWidth
shadowMapHeight
shadowCameraLeft
shadowCameraRight
shadowCameraBottom
shadowCameraTop
shadowCameraNear
shadowCameraFar
shadowBias

To be honest I don't know what to do now :/

So any help would be very appreciate !

Upvotes: 0

Views: 742

Answers (1)

Ale_32
Ale_32

Reputation: 678

Probably it is causes by self-shadowing. Try to set a small value of shadowBias like 0.05 or -0.05.

If your scene permits, reduce as much as possible the shadowmap frustum, changing the value of shadowCamera options to fit exactly the objects that you want.

If the angle between the light and normal at some point of the object is nearly 90 degrees, you can try to scale the bias depending of slope. There is an approach called slope scaled bias that consist in scale the bias depending of the angle between light vector and normal vector. The formula is:

float slope_bias = bias * tan(acos(dot(normal,-lightDirection)));

I hope it helps a little bit.

Upvotes: 2

Related Questions