Sign in to follow this  
agmcleod

Shadow only material doesn't seem to work for me since updating

Recommended Posts

I have my own local copy of the shadow material, as I can't seem to pull it from the built version of babylon. I pull in BabylonJS via NPM and put it together using webpack. I import the local copy of the shadow only material, and it hoists itself onto BABYLON. I did a diff against the one here: https://github.com/BabylonJS/Babylon.js/blob/master/dist/materialsLibrary/babylon.shadowOnlyMaterial.js. There are no changes since originally pulling it.

The reason I ask is because since updating from 3.0.7 to the 3.1.0-beta3, in order to fix another bug in firefox 56 on windows, I've noticed that the particles and shadows are not rendering over top of the shadow only material for me anymore in Chrome & Safari. Weirdly the particles work in firefox 38, but the shadows still do not render.

I have babylon in my package.json. The webpack config is pretty standard on using the babel-loader, no special considerations for babylonjs.'

The code I use to create the ground, using the shadow only material:
 

    const ground = BABYLON.Mesh.CreateGround('ground1', 10, 16, 2, scene)
    ground.position.x = 0
    ground.position.y = 0
    ground.position.z = 9
    ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.6 }, scene)
    ground.receiveShadows = true

    let groundMat
    if (this.showTableMaterials) {
      groundMat = new BABYLON.StandardMaterial('groundMat', scene)
      groundMat.diffuseColor = new BABYLON.Color3(0.3294117647, 0.631372549, 0.3647058824)
    } else {
      groundMat = new BABYLON.ShadowOnlyMaterial('shadowOnly', scene)
    }
    ground.material = groundMat

The shadow & light setup:

    // This creates a light, aiming down toward the table from the left
    this.light = new BABYLON.DirectionalLight('light1', new BABYLON.Vector3(0, -10, 1), scene)
    this.light.specular = BABYLON.Color3.White()
    // Adjust light source to make more distinctive shadows
    this.light.direction = new BABYLON.Vector3(0, -3, 2)

    this.shadowGenerator = new BABYLON.ShadowGenerator(1024, this.light)
    this.shadowGenerator.useBlurExponentialShadowMap = true
    this.shadowGenerator.useKernelBlur = true
    this.shadowGenerator.blurKernel = MAX_SHADOW_KERNEL_BLUR
    this.shadowGenerator.setDarkness(0.4)

 

Then the mesh & material for the dice:

   const die = BABYLON.Mesh.CreateBox(`dice${dieNumber}`, DICE_SIZE, scene)
    this.setDiePosition(die, dieNumber)

    die.material = this.diceMultiMat

    die.subMeshes.push(new BABYLON.SubMesh(0, 0, 4, 0, 6, die))
    die.subMeshes.push(new BABYLON.SubMesh(5, 0, 4, 6, 6, die))
    die.subMeshes.push(new BABYLON.SubMesh(2, 0, 4, 12, 6, die))
    die.subMeshes.push(new BABYLON.SubMesh(3, 0, 4, 18, 6, die))
    die.subMeshes.push(new BABYLON.SubMesh(4, 0, 4, 24, 6, die))
    die.subMeshes.push(new BABYLON.SubMesh(1, 0, 4, 30, 6, die))

    this.shadowGenerator.getShadowMap().renderList.push(die)

 

So if i set the ground to use teh shadow only material in this test sandbox i have, set the css body background to blue. This is how it looks:

Youll see no shadows under the dice, and the fire only appears over the cubes.

 

badfire.gif.b37d85240196fba5c333d6bf82c2685c.gif

 

The same setup in firefox:

 

goodfire.gif.b9c7acd648a9fa4873fc0bc576506427.gif

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.