Jump to content

How do I fix this light leaking through the shadows?


Recommended Posts

I'm trying to cast some shadows from a voxely mesh onto itself, and I seem to be getting a bit of light right at the base of the shadows. Any idea how to fix?

First picture is the shadows in their simplest mode before any blurring:


And here are some shadows with all of the effects, which causes even more light to appear:



I'm not sure how to reproduce it in the playground.  I got my shadows just by copying and pasting the ShadowGenerator from the shadow demo: https://playground.babylonjs.com/#FH3FM2 

In the shadow demo there is no problem, the shadow goes right to the foot of the columns without any light appearing underneath. My scene is one single mesh, so I tried merging the ground and the columns in the shadow demo but that didn't reproduce it either. Here is the merged:  https://playground.babylonjs.com/#FH3FM2#12  Any ideas?

Link to comment
Share on other sites

I've made a smaller model to share. The whole scene is one mesh I believe.

Here's the preview in MagicaVoxel


Here's in-engine on the shadow side:


Model loading:

BABYLON.SceneLoader.LoadAssetContainer("./", "test.obj", this.scene, (container) => {
    // shrink model to half size, offset to edge instead of midpoint
    // i think there's only one mesh
    container.meshes.forEach(mesh => {
        mesh.position.x += (16 * 0.25)
        mesh.position.z += (16 * 0.25)
        mesh.scaling.z = -0.5
        mesh.scaling.y = 0.5
        mesh.scaling.x = 0.5
        mesh.receiveShadows = true

}, null, function (err) {
    console.log('err', err)

The shadows and lights in the scene:

this.engine = new BABYLON.Engine(this.canvasEle, true)
this.scene = new BABYLON.Scene(this.engine)
this.scene.collisionsEnabled = true
this.scene.clearColor = new BABYLON.Color4(0.3, 0.5, 0.75, 1.0)
this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP
this.scene.fogDensity = 0.001
this.camera = new BABYLON.TargetCamera('camera', new BABYLON.Vector3(0, 0.5, 0), this.scene)
this.camera.minZ = 0.1
this.screenShake = BABYLON.Vector3.Zero()

var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(1, -1.5, 1.25), this.scene);
light.position = new BABYLON.Vector3(1, 40, 1)
light.intensity = 1

var light2 = new BABYLON.HemisphericLight('h', new BABYLON.Vector3(0, 1, 0), this.scene)
light2.intensity = 0.33

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light)
shadowGenerator.bias = 0.001
shadowGenerator.normalBias = 0.02
light.shadowMaxZ = 200
light.shadowMinZ = 10
shadowGenerator.useContactHardeningShadow = true
shadowGenerator.contactHardeningLightSizeUVRatio = 0.05

The model exported from magicavoxel produces 3 files:

test.obj, test.mtl, test.png which are attached

I'm probably doing something else wrong with the shadows too, because there seem to be 5 shadows in the image while there are only 4 areas of raised voxels, though maybe that is unrelated.

I'm open to other options as well.

Thanks for taking a look :D

.obj attachments:




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