Search the Community

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!