Struggling to cast a shadow from glTF to ground

Questions
1

I’m struggling to cast a shadow from my glTF model onto a ground. I have a Hemispheric light and some shadowGenerator code but a shadow isn’t casting. I’m also unsure of where the shadow code should sit, at the moment at the bottom. Any ideas appreciated.
Cheers

   var canvas = document.getElementById("renderCanvas");

    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        //scene.clearColor = new BABYLON.Color3(2, 1, 1);
        scene.ambientColor = new BABYLON.Color3(1, 1, 1);
        
        //Adding a light
        var light = new BABYLON.HemisphericLight();
                   
        //Adding an Arc Rotate Camera
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, false);

        // The first parameter can be used to specify which mesh to import. Here we import all meshes
        BABYLON.SceneLoader.Append("assets/", "red-car3.gltf", scene, function (newMeshes) {
            
            var mesh = scene.meshes[0];

            mesh.position.y  =  0.35;
            mesh.position.z  =  -0.3;
            mesh.rotation  = new BABYLON.Vector3(0, Math.PI, 0); 
            //mesh.scaling = new BABYLON.Vector3(0.05, 0.05, 0.05);  
            
            scene.activeCamera = null;
            scene.createDefaultCameraOrLight(true);
            scene.activeCamera.attachControl(canvas, false);
            
        });
        
        //Add ground
        var myGround = BABYLON.MeshBuilder.CreateGround("myGround", {width: 4, height: 4, subdivisions: 4}, scene);

        // Colour the ground
        var material = new BABYLON.StandardMaterial(scene);
        material.alpha = .5;
        material.diffuseColor = new BABYLON.Color3(0,0,0);
        myGround.material = material;

        return scene;
    }

    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    var scene = createScene();

    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });      

    //Cast Shadow
    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light); 
    shadowGenerator.getShadowMap().renderList.push(scene);
    myGround.receiveShadows = true;
    shadowGenerator.useExponentialShadowMap = true;
   

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });

car
car.jpg950×571 17.7 KB

2

Hello!
Hemispheric light are ambient lights. They do not cast shadows

https://doc.babylonjs.com/babylon101/shadows#lights

1 Like
3

Good point, thanks Deltaskosh

4

I’ve added a directional light and moved some code around, the car is receiving shadows from the light but the ground isn’t. I’m not sure where I’m going wrong.

var canvas = document.getElementById(“renderCanvas”);

    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        scene.ambientColor = new BABYLON.Color3(1, 1, 1);

        //Adding an Arc Rotate Camera
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new BABYLON.DirectionalLight("*dir00", new BABYLON.Vector3(0, -1, -1), scene);
        light.position = new BABYLON.Vector3(0,10,10);

        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;
        shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

        //Add ground
        var myGround = BABYLON.MeshBuilder.CreateGround("myGround", {width: 4, height: 4, subdivisions: 4}, scene);

        //Colour the ground
        var material = new BABYLON.StandardMaterial(scene);
        material.alpha = .5;
        material.diffuseColor = new BABYLON.Color3(0,0,0);
        myGround.material = material;
        myGround.receiveShadows = true;

        // The first parameter can be used to specify which mesh to import. Here we import all meshes
        BABYLON.SceneLoader.Append("assets/", "red-car3.gltf", scene, function (newMeshes) {
            
            var mesh = scene.meshes[0];

            mesh.position.y  =  0.35;
            mesh.position.z  =  -0.3;
            mesh.rotation  = new BABYLON.Vector3(0, Math.PI, 0); 
            //mesh.scaling = new BABYLON.Vector3(0.05, 0.05, 0.05);  
            
            scene.activeCamera = null;
            scene.createDefaultCameraOrLight(true);
            scene.activeCamera.attachControl(canvas, false);
            
        });
       
        return scene;
    }

    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    var scene = createScene();

    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });      
         

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
5

Do you mind creating a repro in the Playground?

1 Like
6

Sure, I’ll have a go tomorrow, I wasn’t sure where to host the glTF, cheers

7

Hi Deltakosh,
I’ve put the code into the Playground, replaced my model with a test model which I need the shadow to cast from onto the ground:

https://playground.babylonjs.com/#PTWKTV#5

Cheers

8

Ok so first you cannot call createDefaultCameraOrLight(true) because it will replace your lights then.

Second, I see no code to add the dummy in the shadow generator:
https://playground.babylonjs.com/#PTWKTV#6

9

Fab, thanks Deltakosh.

I momentarily got some meshes but not all from my local model to cast shadow onto the ground.

Cheers