# Getting Delicious Shadows in Babylon, how?

**URL:** <https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272>\
**Category:** Questions\
**Created:** [December 16, 2018, 9:21pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272 "2018-12-16T21:21:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![BritneyWatch](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@BritneyWatch](https://forum.babylonjs.com/u/BritneyWatch)\
**Post date:** [December 16, 2018, 9:21pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/1 "2018-12-16T21:21:58Z")

</div>

![Screencast](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/1X/70b1a7b0b6c7fea7a1b2786a7c5f0e7b449d4512.png)

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [December 16, 2018, 10:14pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/2 "2018-12-16T22:14:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [December 16, 2018, 10:51pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/3 "2018-12-16T22:51:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [December 17, 2018, 5:21am UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/5 "2018-12-17T05:21:48Z")

</div>

As @Dad72 mentioned, please take a look at the [Shadow documentation](https://doc.babylonjs.com/babylon101/shadows) for how to generate, cast and receive shadows.

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [December 17, 2018, 5:32am UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/6 "2018-12-17T05:32:11Z")

</div>

I’m not an expert on the Blender exporter but my understanding is that the [upcoming version that is being actively worked on](https://github.com/BabylonJS/Exporters/blob/EEVEE/Blender/changelog.md) 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.

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [December 17, 2018, 5:37am UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/7 "2018-12-17T05:37:56Z")

</div>

Here’s the docs for [Blender to GLTF using PBR workflow](https://doc.babylonjs.com/resources/blender_to_gltf).

---

<div class="post-metadata">

**Author:** ![jhadenfeldt](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhadenfeldt](https://forum.babylonjs.com/u/jhadenfeldt)\
**Post date:** [December 17, 2018, 7:40pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/8 "2018-12-17T19:40:45Z")

</div>

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](https://www.nothing-is-3d.com/data/medias/folio/3drealtime/lightmaps-workflow-tutorial/demo.html)

---

<div class="post-metadata">

**Author:** ![BritneyWatch](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@BritneyWatch](https://forum.babylonjs.com/u/BritneyWatch)\
**Post date:** [December 17, 2018, 9:02pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/9 "2018-12-17T21:02:27Z")

</div>

```auto
	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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [December 17, 2018, 9:58pm UTC](https://forum.babylonjs.com/t/getting-delicious-shadows-in-babylon-how/272/10 "2018-12-17T21:58:07Z")

</div>

@BritneyWatch please consider [making a Playground example](https://doc.babylonjs.com/features/playground) (PG) so that community members can take a look at your code and offer useful suggestions.
