Getting Delicious Shadows in Babylon, how?

Questions
1

Screencast
Screencast.png1289Ă—744 307 KB 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<style type="text/css">
html, body
{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color: #000000;
}

#my_canvas
{
	width:100%;
	height:100%;
	touch-action:none;
}
</style>
<title>Shadow</title>
<script src="babylon.js"></script>
<script src="babylon.inspector.bundle.js"></script>
<script>
var canvas_id; var engine; var scene; var camera; var material;
function on_init()
{
	canvas_id = document.getElementById("my_canvas");
	engine = new BABYLON.Engine(canvas_id, true);
	//scene = new BABYLON.scene(engine);
	//scene.clearColor = new BABYLON.Color3.Black();
	
	BABYLON.SceneLoader.Load("","untitled.babylon",engine,scene_loaded);
	
	engine.runRenderLoop(onEnterFrame);
	window.addEventListener("resize", function(){engine.resize();});
}

function scene_loaded (new_scene)
{
	scene = new_scene;
	scene.debugLayer.show();
	camera = scene.getCameraByName("Camera");
	camera.attachControl(canvas_id);
	
	material = new BABYLON.StandardMaterial("Gold_Material", scene);
	material.diffuseColor = new BABYLON.Color3(255/255,236/255,178/255);
	
	Apply_Material_to_All(material);
}

function Apply_Material_to_All(material_arg)
{
	scene.getMeshByName("Suzanne").material = material_arg;
	scene.getMeshByName("Suzanne.001").material = material_arg;
	scene.getMeshByName("Suzanne.002").material = material_arg;
	scene.getMeshByName("Suzanne.003").material = material_arg;
	scene.getMeshByName("Suzanne.004").material = material_arg;
	scene.getMeshByName("Suzanne.005").material = material_arg;

	var TemporaryMaterial = new BABYLON.StandardMaterial("Grey_Material", scene);
	TemporaryMaterial.diffuseColor = new BABYLON.Color3(231/255,231/255,231/255);
	scene.getMeshByName("Plane").material = TemporaryMaterial ;
}

function onEnterFrame()
{
	scene.render();
}
</script>
</head>
<body onLoad="on_init()">
<canvas id="my_canvas"></canvas>
</body>
</html>
2

You will find what you need in the documentation for the shadows.

3

You need to create a light that can be used by a shadow caster. Then create a shadow caster with that light. Set the ground mesh to receive shadows and add each of the meshes as Shadow casters. You have a ways to go to get near your blender render. Looks like your ground in blender has some reflection and nothing on the export - I would look through all the export settings to make sure materials are exported properly, if you are exporting materials.

1 Like
5

As @Dad72 mentioned, please take a look at the Shadow documentation for how to generate, cast and receive shadows.

6

I’m not an expert on the Blender exporter but my understanding is that the upcoming version that is being actively worked on will support Blender 2.80, EEVEE and Blender Principled BSDF to Babylon.js PBR Material.

If I recall correctly, in Blender 2.79 you can export to GLTF from Blender and I think PBR materials will be used, but as I say I’m no expert.

1 Like
7

Here’s the docs for Blender to GLTF using PBR workflow.

8

Also, depending on your use case, baked lightmaps might be an option. There is a great tutorial with an example on the Babylon.js home page: From Blender to Babylon - standard workflow

1 Like
9 
	var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
	shadowGenerator.getShadowMap().renderList.push( scene.getMeshByName("Suzanne") );
	shadowGenerator.getShadowMap().renderList.push( scene.getMeshByName("Suzanne.001") );
	shadowGenerator.getShadowMap().renderList.push( scene.getMeshByName("Suzanne.002") );
	shadowGenerator.getShadowMap().renderList.push( scene.getMeshByName("Suzanne.003") );
	shadowGenerator.getShadowMap().renderList.push( scene.getMeshByName("Suzanne.004") );
	shadowGenerator.getShadowMap().renderList.push( scene.getMeshByName("Suzanne.005") );
	scene.getMeshByName("Plane").receiveShadows = true;

Tried this but I am getting “scene is undefined” from babylon.js itself which is total bullshit because right BEFORE these shadow codes are:

scene.getMeshByName("Suzanne").material = material_arg;
	scene.getMeshByName("Suzanne.001").material = material_arg;
	scene.getMeshByName("Suzanne.002").material = material_arg;
	scene.getMeshByName("Suzanne.003").material = material_arg;
	scene.getMeshByName("Suzanne.004").material = material_arg;
	scene.getMeshByName("Suzanne.005").material = material_arg;

	var TemporaryMaterial = new BABYLON.StandardMaterial("Grey_Material", scene);
	TemporaryMaterial.diffuseColor = new BABYLON.Color3(231/255,231/255,231/255);
	scene.getMeshByName("Plane").material = TemporaryMaterial ;

And they work totally fine.

10

@BritneyWatch please consider making a Playground example (PG) so that community members can take a look at your code and offer useful suggestions.

1 Like