ZEER0H

Shadows not casting on other meshes

Recommended Posts

For my capstone software project we are making the game quarto using reactjs and babylonjs. We have the scene set up, but we are importing multiple .glb files and while they cast shadows on themselves and on the ground, we cannot make the shadows cast from the pieces to the board. 

I feel like there is something that should be obvious. We have changed the directional light source. We have changed the ability of both pieces and board to cast and receive shadows. We have overlayed a shadowOnly material object over the board itself. Nothing has worked so far.

The meshes are created and textured in blender before being exported as .glb files.

here is our code, we don't have a playground because of local objects:

import React, { Component } from 'react';
import * as BABYLON from 'babylonjs';
import BabylonScene from './BabylonScene';
import * as BABYLON_LOADER from 'babylonjs-loaders';
import  sadObject from '../objects/tallLightFlatSquare.glb';
import yayObject from '../objects/tallLightHoleCylinder.glb';
import slightlyHappierObject from '../objects/gameBoard.glb';
import plainPlane from '../objects/thePlainPlane.glb';
import shortDarkFlatCylinder from '../objects/shortDarkFlatCylinder.glb';
import { PositionGizmo, ShadowGenerator } from 'babylonjs';

export default class Viewer extends Component {
    
    onSceneMount = (e) => {
        const { canvas, scene, engine } = e;

        // This creates and positions a free camera (non-mesh)
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);
        /*camera.lowerBetaLimit = 0.1;
        camera.upperBetaLimit = (Math.PI / 2) * 0.9;*/
        camera.lowerRadiusLimit = 10;
        camera.upperRadiusLimit = 150;
        camera.attachControl(canvas);
        // This targets the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());
        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        //const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        //var pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 1, 0), scene);
        var pointLight = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
        pointLight.position = new BABYLON.Vector3(20, 40, 20);
        var shadowGenerator = new BABYLON.ShadowGenerator(1024, pointLight);
        
        // Default intensity is 1. Let's dim the light a small amount
        //light.intensity = 2.7;
        pointLight.intensity = 10;
        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
        // const sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
        // Move the sphere upward 1/2 its height
        // sphere.position.y = 1;
      
        //Ground object
        // var ground = BABYLON.Mesh.CreateGround("ground", 15, 15, 1, scene, false);
        // var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
        // groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
        // groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        // ground.material = groundMaterial;
        // ground.receiveShadows = true;


        //Board Positions
        var board4 = new BABYLON.Vector3(-3.69, 0.069, 1.2);
        var board5 = new BABYLON.Vector3(-3.69, 0.069, -1.2);
        var board15 = new BABYLON.Vector3(3.73, 0.069, -3.85);

        //importing the board object    
        BABYLON.SceneLoader.ImportMesh("", slightlyHappierObject, "", scene, (newMeshes, particleSystems, skeletons) => {
            var board = newMeshes[0];
            board.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5);
            board.receiveShadows = true;
            shadowGenerator.getShadowMap().renderList.push(board);
            shadowGenerator.addShadowCaster(board, true);

            //var shadowBoard = board.clone("shadowBoard");
            //shadowBoard.material = new BABYLON.ShadowOnlyMaterial("shadowBoi", scene);
            // shadowBoard.position = new BABYLON.Vector3(0, .0001, 0);
            //shadowBoard.receiveShadows = true;
        } )

        //importing a piece
        BABYLON.SceneLoader.ImportMesh("",shortDarkFlatCylinder, "",  scene, (newMeshes, particleSystems, skeletons) => {
            var tallWhiteFlatSquare = newMeshes[0];
            tallWhiteFlatSquare.receiveShadows = true;
            shadowGenerator.getShadowMap().renderList.push(tallWhiteFlatSquare);
            tallWhiteFlatSquare.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4);
            tallWhiteFlatSquare.position = board5;

            var alsoTallWhiteFlatSquare = tallWhiteFlatSquare.clone("tallWhiteFlatSquare2");
            alsoTallWhiteFlatSquare.receiveShadows = true;
            alsoTallWhiteFlatSquare.position = board4;
            shadowGenerator.getShadowMap().renderList.push(alsoTallWhiteFlatSquare);

            shadowGenerator.addShadowCaster(tallWhiteFlatSquare, true);
            shadowGenerator.addShadowCaster(alsoTallWhiteFlatSquare, true);
        });

        //this is also importing a piece
        BABYLON.SceneLoader.ImportMesh("", yayObject, "", scene, (newMeshes, particleSystems, skeletons)=> {
            var yayLookingBoy = newMeshes[0];
            yayLookingBoy.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4);
            yayLookingBoy.position = board15;
            shadowGenerator.getShadowMap().renderList.push(yayLookingBoy);
            shadowGenerator.addShadowCaster(yayLookingBoy, true);
        });
        
        //heck if I know
       engine.runRenderLoop(() => {
            if (scene) {
                scene.render();
            }
        });
    }

    render() {               
        return (
            <BabylonScene onSceneMount={this.onSceneMount} />
        )
    }
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.