Jump to content

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


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))



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.




The same setup in firefox:




Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...