babylonjs: мульти тени для нескольких элементов не работают

Question

Я пытаюсь получить правильные тени, используя Babylonjs. Без всякой радости:p

Вот ресурсы по теням, которые я нашел

• Вавилонские вики: Тени
• фреймворк для создания 3D игр с HTML5 и WebGL

но я не могу найти ничего о тенях "элемент на элементе".:(

вот моя попытка сделать это: мои источники основаны на вики Babylonjs: 17-Shadows

У меня есть 2 источника света и 3 объекта. Я получаю тень за сферой, но затем я также получаю артефакт на передней поверхности сферы.

► Живой код: jsfiddle.net/codemeasandwich/z64Ba

Я ценю вашу помощь, так как я боролся с этим некоторое время.

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;
}

► Вышеуказанные огни в качестве указателей поворота

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;

Answer 1

Только направленные источники света могут отбрасывать тени, и им также нужно положение, чтобы определить, откуда приходят тени.

Я обновляю вики, чтобы добавить эту ВАЖНУЮ информацию:)

Только направленные лучи могут отбрасывать тени: var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), сцена);

Вы также должны определить позицию для своего источника света (поскольку Babylon.js должен определить точку обзора, чтобы> создать карту теней): light.position = new BABYLON.Vector3(20, 40, 20);

Обратите внимание, что вам нужно переместить позицию, чтобы определить область, где видны тени.