Shadows looking dodgy

[ozRocker]

I'm having a play with shadows to my 3D website which you can see here preview.punkoffice.com

 

The light is actually attached to the camera so it moves as you turn around.  I had to do this because a still directional light isn't able to light the whole scene and adding more directional lights made a significant difference to the frame rate.  Nevertheless, the bad shadows still happen even with a still light.  Also, keep in mind you can zoom in and out with the scroll wheel which can give you a different perspective on the shadows.

 

As you can see, they don't look so good  The shadows are completely black.  Is there a way I can make them more subtle?  Like a light-gray colour?  It seems to be 100% intensity all the way through.  Also, the shadows cast from the people don't start from their feet.  It looks like a glitch there.

 

My shadow code is this:

var shadowGenerator = new BABYLON.ShadowGenerator(4096, light);shadowGenerator.getShadowMap().renderList.push(meshMarcus);shadowGenerator.getShadowMap().renderList.push(meshAndrew);shadowGenerator.getShadowMap().renderList.push(meshDiem);shadowGenerator.getShadowMap().renderList.push(meshFB);shadowGenerator.getShadowMap().renderList.push(meshYouTube);shadowGenerator.getShadowMap().renderList.push(meshSketchfab);shadowGenerator.getShadowMap().renderList.push(meshARmarker);shadowGenerator.getShadowMap().renderList.push(meshRigging);shadowGenerator.getShadowMap().renderList.push(meshWebGL);shadowGenerator.getShadowMap().renderList.push(meshVR);

They've all been set to receive shadows in Unity (where I converted my scene from) so I don't need to do that in code.

 

[iiceman]

Hey again,

 

you could soften the shadows if you combine ti with a hemi light. Also you should try to play around with the bias value and the different shadow types to see if things change if you use different options

//shadowGenerator.useVarianceShadowMap = true;//shadowGenerator.useBlurVarianceShadowMap = true;shadowGenerator.usePoissonSampling = true;shadowGenerator.bias = 0.000005;

http://www.babylonjs-playground.com/#HVNVX

[ozRocker]

ok cool!  That "bias" property fixed the problem of the shadows not coming from their feet.  I've got it looking pretty sweet, unfortunately it drops the frame rate by half on mobile  The additional hemi light doesn't make much difference to the frame rate so its not cos of that.  Also I only set the floor and walls to receive shadows but the frame rate still went down to 30.  Any tips on reducing quality of shadows to make it faster, or should I just give up on shadows if I'm aiming for around 60FPS on mobile?

[iiceman]

var shadowGenerator = new BABYLON.ShadowGenerator(4096, light);

Maybe 512 will do, too? Not sure how big the impact on performance is, though, but might be worth a try. If it helps set higher values if you detect a desktop PC and go down as much as needed on mobile.

 

Edit: just checked on my slow work PC and the shadow textures size seems to have a BIG impact on performance.

[ozRocker]

I've gone up to 1024 for mobile and 4096 for desktop.  1024 looks acceptable and on iPhone 5S runs at 54fps, iPhone 6+ runs at 47fps (6+ is slower cos of increased number of pixels apparently).  I'll get some Android peeps to test on their devices as well.

 

What I'm also trying to do is cast the same kind of shadow regardless of where the camera is facing.  That's why I made the directional light the parent of the camera:

light = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(0, -1, 2), mainScene);light.position = new BABYLON.Vector3(0, 40, 0);light.intensity = 0.5;light.parent = myCamera;

Its not doing what I expected though.  The shadows cast at the HOME side is longer than the shadows cast at the ABOUT side.  I'm trying to get the shadows looking the same as the HOME side from every direction I move to.  Do I need to recalculate its position within the render loop?

[iiceman]

My suggestion would be to recalculate the direction of the light:

light.direction = camera.target.subtract(camera.position);light.direction.y = -0.5;

http://www.babylonjs-playground.com/#JE6HE#3

 

 

Alternativly: maybe use separate spotlights for each model? 

[ozRocker]

Damn, you're on the ball!  thanks iiceman  That works well, but when I zoom the camera in and out the light changes direction which changes shadow length and light strength on the walls.  With that recalculation above, is there a way to keep the light direction unaffected by camera zooming?

[iiceman]

light.direction = camera.target.subtract(camera.position).normalize();light.direction.y = -0.5;

We could normalize the vector so that it always has the length 1. Is that better http://www.babylonjs-playground.com/#JE6HE#4 ?

[ozRocker]

That's perfect!! Thanks so much man!  When I become a millionaire you're invited to my boat party lol

[iiceman]

Glad I could help. Good luck and... see you on the boat!