Sunlight and shadows

[lesterhaus]

Hello everyone!

 

First time on the forums and I have a problem with soft/smooth shadows for my scene.

I have some experience with three.js and am trying out babylon.js for a project since I was not happy with the shadows I could create in three.js

 

In my scene I want to simulate the diurnal motion of the sun - having a few meshes with holes in them (it is a house) which should drop and receive shadows from one light source (the sun)

I have all the vector hocus pocus for the sun motion figured out, but up until now I was only able to get very low quality shadows.

 

Anyways, here is my code and the result as attached screenshots.

if (BABYLON.Engine.isSupported()) {	var canvas = document.getElementById("renderCanvas");	var engine = new BABYLON.Engine(canvas, true);					BABYLON.SceneLoader.Load("babylonscenes/", "model_001.babylon", engine, function (scene) {		// Wait for textures and shaders to be ready		scene.executeWhenReady(function () {			// Attach camera to canvas inputs			scene.activeCamera.attachControl(canvas);										var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);			light0.intensity = 0.4;										var light1 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(-1, -2, -1), scene);			light1.intensity = 0.7;			light1.position = new BABYLON.Vector3(0,50,0);										var shadowGenerator = new BABYLON.ShadowGenerator(1024, light1);			shadowGenerator.useBlurVarianceShadowMap = true;																var meshMaterial = new BABYLON.StandardMaterial("material1", scene);			meshMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);						var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);			torus.position = new BABYLON.Vector3(20,10,10);			torus.material = meshMaterial;			torus.receiveShadows = true;			shadowGenerator.getShadowMap().renderList.push(torus);						for(var i = 0; i < scene.meshes.length; i++){				scene.meshes[i].receiveShadows = true;				shadowGenerator.getShadowMap().renderList.push(scene.meshes[i]);				scene.meshes[i].material = meshMaterial;			}										// Once the scene is loaded, just register a render loop to render it			engine.runRenderLoop(function() {				scene.render();			});		});	}, function (progress) {		// To do: give progress feedback to user	});}

The mesh is an Import from an DXF-File, so it could be that the meshes are... not optimal. But even the poor torus I dragged into this doesn't get it any better.

As far as I understood I cannot use "useBlurVarianceShadowMap" in my case, since I want to drop and receive shadows at the same time for all meshes.

Also, for the diurnal motion I need to have the sun to go around my whole scene which gives me, for this scene, a minimum radius of 200. So moving closer with the light source isn't the solution I'm looking for.

 

I've seen some posts with similar problems which didn't help me to solve my problems:

http://www.html5gamedevs.com/topic/16723-soft-shadows/ -> looks like the same problem, sadly the original poster went off board when the discussion focused on lighting up the shadows.

http://www.html5gamedevs.com/topic/9199-weird-shadows/ -> again, seems to be a similar problem, but I don't see any solution in it other then playing with the lights position

 

I also read up on some recent updates for babylon.js which advertised an overworked shadow handling.

 

This lead me to this example http://www.babylonjs.com/?SOFTSHADOWS

Maybe someone knows where I could see the source code for this example as I didn't find it in the samples section on github.

 

Thanks in advance!

[GameMonetize]

Hello and welcome!

 

here is the source code for the softshadows example:https://github.com/BabylonJS/Samples/blob/master/Scenes/Customs/softShadows.js

 

In your example, it looks like the resolution of the shadowmap is too small. You can also think about tweking the blurBoxOffset value 

[lesterhaus]

Hi Deltakosh!

 

Thank you for your advice. While increasing the size of the shadowmap might make the blocks at the edges smaller, it only results in a chiseled hard edge for the shadow which still suffers from aliasing steps.

All this with a huge drop in performance of course. 

Regarding the blurBoxOffset, I don't think changing this has any effect while using poissonSampling - or does it?

 

I have been playing around some more with blurVarianceShadowMap - which results in nice smooth shadows but can only be cast on my ground mesh. Is there any other way to achieve some self shadowing for meshes with holes in them?

 

In the Hillvalley example, right at the front page of babylon.js, there seem to be houses on the sides which receive and cast shadows at the same time. (for instance the Essex Cinema)

The resulting shadows don't look bad at all. Any idea how it is done in that case? Is there maybe some post processing that can be done to improve the shadows quality?

[GameMonetize]

I mentioned blurBoxOffset because I saw "shadowGenerator.useBlurVarianceShadowMap = true;" in your code

VSM (variance shadow maps) are not usable if you want self shadowing

 

In Hillvalley, all the shadows were produced offline (with blender, unity or 3dsmax) and are used as regular textures: This is the best option for performance and quality but obviously the light cannot move or change

[lesterhaus]

You are absolutely right.. that was a silly mistake by me when copy pasting the code, sorry about that

I'm going to toy around some more with this then.

 

Anyways, thank you very much for your patience, I know you have to answer a lot of these questions multiple times.

[GameMonetize]

My pleasure

[Vousk-prod.]

Hi lesterhaus,

can you report here your results and failures/successes after playing with all that stuff. I'm sure this will be interesting and usefull for many people.