babylonjs: multi-shadows for multi-elements not working

Question

Im trying to get the shadows right using Babylonjs. Without any joy :p

Here is the resources on shadows I have found

but I can't find anything on "element on element" shadows. :(

here is my attempt at it: my sources loosely based on Babylonjs wiki: 17-Shadows

I have 2 lights and 3 objects I get a shadow behind the sphere but then I also get an artefact on the front face of the sphere.

► Live code: jsfiddle.net/codemeasandwich/z64Ba

I appreciate your help as I've been struggling with this for a while.

function createSceneTuto(engine) {
    var scene = new BABYLON.Scene(engine);

    //freeCamera is a FPS like camera where you control the camera with the cursors keys and the mouse
    //touchCamera is a camera controlled with touch events (it requireshand.jsto work)
    //arcRotateCamera is a camera that rotates around a given pivot. It can be controlled with the mouse or touch events (and it also requires hand.js to work)

    // ArcRotateCamera >> Camera turning around a 3D point (here Vector zero)
    // Parameters : name, alpha, beta, radius, target, scene
  var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 90, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(30, 30, 30));

    // pointLight (like the sun for instance) which emits lights in every direction from a specific position
    // directionalLight which emits lights from the infinite towards a specific direction
    var light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3( -1,0, 0), scene);


        var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 100), scene);
                light0.diffuse = new BABYLON.Color3( 0,1, 0);
                light0.specular = new BABYLON.Color3(1, 1, 1);

    var box = BABYLON.Mesh.CreateBox("Box", 3, scene);
    var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 20, scene);
//  var plan = BABYLON.Mesh.CreatePlane("Plane", 50.0, scene);
    //      plan.position.z = -40
    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 15, 20, scene);

    // Shadows
    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
    var shadowGenerator0 = new BABYLON.ShadowGenerator(1024, light0);

        shadowGenerator.getShadowMap().renderList.push(box);
        shadowGenerator.getShadowMap().renderList.push(torus);
        shadowGenerator.getShadowMap().renderList.push(sphere);

        shadowGenerator0.getShadowMap().renderList.push(box);
        shadowGenerator0.getShadowMap().renderList.push(torus);
        shadowGenerator0.getShadowMap().renderList.push(sphere);

        box.receiveShadows = true;
        torus.receiveShadows = true;
        sphere.receiveShadows = true;

    var alphaTorus = 0, alphaBox =0;
        scene.registerBeforeRender(function () {
        torus.rotation.x += 0.02;
        torus.position = new BABYLON.Vector3(Math.cos(alphaTorus) * 15, 0, Math.sin(alphaTorus) * 15);
        alphaTorus += 0.003;

        box.position = new BABYLON.Vector3(Math.cos(alphaBox) * 15, 0, Math.sin(alphaBox) * 15);
        alphaBox += 0.01;
    });

    return scene;
}

► The above lights as directional lights

var light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3( -1,0, 0), scene);
light.position = new BABYLON.Vector3(0, 0, 20);
light.intensity = 0.5;

var light0 = new BABYLON.DirectionalLight("Omni0", new BABYLON.Vector3(0,0,-1), scene);
light0.position = new BABYLON.Vector3(25, 0, 0);     
light.intensity = 0.5;

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

Only directional lights can cast shadows and they also need a position to define from where the shadows come

I update the wiki to add this IMPORTANT information :)

Only directional ligths can cast shadows: var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);

You must also define a position for your light (because Babylon.js must define a point of view to > create the shadow map): light.position = new BABYLON.Vector3(20, 40, 20);

Please note that you should have to move the position to define the area where the shadows are seen.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 11 '13 at 06:45

David Catuhe

1,747
1
10
9

Hi David, Thanks but its still not working. using directional light has removed the artefacts but but I am still not getting any shadows. – Brian Dec 11 '13 at 08:31
This is linked to the position and orientation of your light. It is too low fo the given sphere: – David Catuhe Dec 12 '13 at 13:45
I do have issues like that as well. We have bought some GLTF models, and some of the meshes just do not want to cast shadows at all. It's very strange as other similar meshes cast shadows with no problem. I have checked the normals (just to be sure that the triangles are not "back faced") and they do seem OK. – Aros Jul 27 '20 at 13:38

babylonjs: multi-shadows for multi-elements not working

1 Answers1