Help with shadows under babylonjs 2.0

[darcome]

Hello everyone,

 

I need some help with shadows. They don't come up and I don't understand why...

 

Here is the example: http://www.star-italia.net/babylon/index.html

 

The model has been exported from blender

 

Can you tell me what's wrong? The car doesn't cast any shadow on the ground

 

Thanks in advance for your help!

[Dad72]

The position of your light is not good.

 

light1.position = new BABYLON.Vector3(20, -1, 20);

 

Try to put it above 20 for example

 

Put this in your function InitPlane()

 

var shadowGenerator = new BABYLON.ShadowGenerator (1024, light1);

shadowGenerator.useVarianceShadowMap = true;

ground.receiveShadows = true;

 

and also put your global variable at the beginning of script

[darcome]

I tried what you said, but I cannot put the shadowGenerator in the InitPlane function because otherwise in the OnMeshLoaded I cannot use it

 

However even changing the light, the result is what you can see here:

 

http://origano.altervista.org/babylon/index.html

 

Thanks in advance for any help

[Dad72]

When I spoke to the light above, I was talking to a positive value Y and not negative

 

No => light1.position = new BABYLON.Vector3 (20, -20, 20);

 

Currently you have to position your light under your car, you light the chassis of the car and not the Body 

 

Yes => light1.position = new BABYLON.Vector3 (20, 20, 20);

[darcome]

Hello,

 

I did this: an orbiting directional light,

 

so one way or another, at some point I should have the right position, but I cannot see any shadow

 

Why?!?! What's wrong?!?!? :(

 

I forgot the link:

 

http://origano.altervista.org/babylon/index.html

[RaananW]

Hi!

First, Don't Panic 

 

I breezed through your source code and I wonder what you are trying to do here:

                scene.registerBeforeRender (function () 		{			light1.position 		= new BABYLON.Vector3 (0, -20 * Math.sin (alpha), 20 * Math.cos(alpha));			light1.direction 		= light1.position;			lightSphere2.position 	= light1.position.negate ();						alpha += 0.01;		});

You set the light's direction to be its position. I also believe that the negate leads to the wrong position of the sphere, but this is a different story.

The light's direction is a normalized vector from the light's position to the position of the object upon which you are trying to project the light. So technically you need to get the light's position, the object's position, subtract and normalize it. This would be the right direction.

If this sounded like mambo-jumbo, try this - 

                scene.registerBeforeRender (function () 		{			light1.position 		= new BABYLON.Vector3 (0, -20 * Math.sin (alpha), 20 * Math.cos(alpha));                        // assuming the car is at object.position			light1.direction 		= object.position.subtract(light.position).normalize();			lightSphere2.position 	= light1.position();						alpha += 0.01;		});

Might work  Of course, assuming all other properties are correctly set (the casting and receiving and shadowGenerator etc').

[darcome]

Hello RaananW,

 

I did what you suggested.

 

The only thing I changed is to use Vector3.Zero () instead of the car position,

because that is the "center" of the car, approximately

 

However, nothing changed

 

Link:

 

http://www.star-italia.net/babylon/index.html

[Dad72]

I feel that you do not listen to what we say, or I will not express myself properly.
 
Your code is a big mess. some things are not called in the order.
 
short, so I have taken all your code and repeated the thing properly. it should work now. If your models has submesh requires that all submesh receive shadows.
 
PS:I have comment the code where was your errors

                //The variables glogal go first                var canvas 		= document.getElementById("renderCanvas"),		engine 			= new BABYLON.Engine(canvas, true),		scene 			= new BABYLON.Scene (engine),		camera 			= null,		light1			= null,		ground			= null,			shadowGenerator         = null;				function InitSkyBox ()		{						var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);			skybox.position = new BABYLON.Vector3 (0, 0, 0);			var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);			skyboxMaterial.backFaceCulling = false;			skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);			skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;			skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);			skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);			skybox.material = skyboxMaterial;			skybox.infiniteDistance = true;		}				function InitGround ()		{			ground 	= BABYLON.Mesh.CreateGround ("ground", 100, 100, 2, scene);			ground.position.y = 0.1;			ground.receiveShadows = true;// Recieve Shadow here						var groundMaterial = new BABYLON.StandardMaterial("ground", scene);			groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);			groundMaterial.diffuseTexture.uScale = 6;			groundMaterial.diffuseTexture.vScale = 6;			groundMaterial.specularColor = new BABYLON.Color3 (0, 0, 0);			ground.material = groundMaterial;		}				function InitLights ()		{			light1 = new BABYLON.DirectionalLight ("dir01", new BABYLON.Vector3 (-1, -1, 0), scene); //direction of the light			light1.position = new BABYLON.Vector3 (20, 20, 10); // Position of the light in the sky			light1.intensity = 2;                        //loading shadow generator directly here just after the creation of light			shadowGenerator = new BABYLON.ShadowGenerator (1024, light1);			shadowGenerator.useVarianceShadowMap = true;		}				function InitCamera ()		{			camera = new BABYLON.ArcRotateCamera("Camera", 	3.14, 1.30, 40,  new BABYLON.Vector3 (0, 0.5, 0), scene);			camera.attachControl(canvas, true);			camera.lowerBetaLimit 		= 0.5;			camera.upperBetaLimit 		= 1.3;			camera.lowerRadiusLimit 	= 27;			camera.upperRadiusLimit 	= 40;			camera.angularSensibility 	= 1200;			camera.wheelPrecision		= 25;		}				function SceneDebug ()		{			var alpha 	= document.getElementById ("cameraAlpha");			var beta 	= document.getElementById ("cameraBeta");			var fps 	= document.getElementById ("fps");						alpha.innerHTML = "alpha: " + camera.alpha;			beta.innerHTML 	= "beta: " 	+ camera.beta;			fps.innerHTML	= BABYLON.Tools.GetFps().toFixed();		}				BABYLON.SceneLoader.ImportMesh ("", "", "F430.babylon", scene, function (meshes)		{			var mesh = meshes[0];						if(mesh.getChildren().length > 0) { // submesh soutien				for(var i = 0; i < mesh.getChildren().length; i++) {					shadowGenerator.getShadowMap().renderList.push(newMeshes[0].getChildren()[i]);				}			} else { // mesh						shadowGenerator.getShadowMap().renderList.push(newMeshes[0]);			}					});				engine.runRenderLoop (function ()		{			if(scene != null) {                            SceneDebug();			    scene.render();                        }		});		                //The function call that fact last		InitSkyBox();		InitLights();		InitGround();		InitCamera();

I now find the code clearer and easier to read.

[darcome]

I've done a copy/paste of your code, but still I don't see any shadows.

 

Here is the link:

 

http://www.star-italia.net/babylon/index.html

 

and here is the zip with the code, and everything:

 

http://www.star-italia.net/babylon/babylon_test.zip

 

Please, help

[Dad72]

You could have find the error over yourself I think (opening the console).
 
Meshes[0] => newMeshes[0]

BABYLON.SceneLoader.ImportMesh ("", "", "F430.babylon", scene, function (newMeshes)		{			var mesh = newMeshes[0];						if(mesh.getChildren().length > 0) { // submesh 				for(var i = 0; i < mesh.getChildren().length; i++) {					shadowGenerator.getShadowMap().renderList.push(newMeshes[0].getChildren()[i]);				}			} else { // mesh						shadowGenerator.getShadowMap().renderList.push(newMeshes[0]);			}					});

Once your shadows will work

[darcome]

Ok, I got it working thanks to your code

 

There was an error with meshes and newMeshes but now it is working!

[darcome]

you wrote a second before me

[darcome]

So just to summarize my errors:

 

1) I had to create the shadowGenerator immediately after the lights creation

     Why?

 

2) I had to put the subMeshes in the list of the shadowGenerator

    But doing this, I think I have even the internal objects of the car, like the steering wheel project a shadow, right? That's why the shadow is strange

    So I have to somehow mark the objects I want to cast shadows... How?

 

3) I had to call the Init funcions as the last thing

    Why?

    Is there a particular order in the way you arranged the Init functions?

 

If I am missing something, feel free to add.

 

I'm writing this post so I can learn from my errors!

 

Thanks in advance for the help and the patience!

[Dad72]

The code runs line by line, so it is normal that first places we write its global variables. Then you write your function and then call them in order to finish.

for example, if you create the shadow generator before the light is not created, it will not work, because the shadow generator requires a light that must be created before.

 

So for your safety shadow generator is created after the light is created in the same function or another, but after the light has been created.

 

Do you understand?

 

Giving

 

-----------------------------

var truc = null;

 

function light()

{

 

}

function generator()

{

 

}

 

light();

generator();

-----------------------------------

 

If you do:

 

----------------------------

generator();

light();

-------------------------

 

Your generator is created before light, it will not work.

 

 

 

 

[darcome]

Thank you very much for your help!