Shadow Blur Problem

Recommended Posts


I'm trying to get softer shadows in my scene using a blur exponential shadow map. When enabled, the shadow generator seems to incorrectly affect one of my meshes.

Here's my scene with a default shadow generator (blur disabled):


Looking good. You can see the hard shadows from the tree, cast onto the clouds in the bottom left corner.

And here's with blur enabled:


The shadows look softer on the clouds, but the tree mesh got significantly darker. Here's my code:

// light & shadows

var lightPos = new BABYLON.Vector3(160, 80, 160);
var dirLight = new BABYLON.DirectionalLight("dir01", lightPos.negate(), scene);
dirLight.position = lightPos;

var shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);
// shadowGenerator.useBlurExponentialShadowMap = true;

// materials

var treeMat = new BABYLON.StandardMaterial("treeMat", scene);
var cloudMat = new BABYLON.StandardMaterial("cloudMat", scene);

var atlasTex = new BABYLON.Texture("textures/Website_Atlas.jpg", scene);
treeMat.diffuseTexture = atlasTex;
cloudMat.diffuseTexture = atlasTex;

// meshes

var finishedLoadingMeshes = function (task) {
    task.loadedMeshes.forEach(function (mesh) {
        switch ( {
            case 'treeMeshTask':
                mesh.material = treeMat;
                mesh.receiveShadows = true;
            case 'cloudMeshTask':
                mesh.material = cloudMat;
                mesh.receiveShadows = true;
                // create cloud rings...

var treeMeshTask = assetsManager.addMeshTask("treeMeshTask", "", "meshes/tree/", "Website_Tree.gltf");
treeMeshTask.onSuccess = finishedLoadingMeshes;

var cloudMeshTask = assetsManager.addMeshTask("cloudMeshTask", "", "meshes/clouds/", "Website_Cloud.gltf");
cloudMeshTask.onSuccess = finishedLoadingMeshes;

Has anyone had this problem before? I searched the forum and couldn't find any similar issues.

Share this post

Link to post
Share on other sites

Thanks for moving!

I see that increasing the blur kernel softens the shadows, and lightens the tree/ground island mesh. However, this cannot be a final solution for me. At the point where I've increased the blur kernel enough that the tree is sufficiently lit, the shadow on the clouds is too diffuse. See below there are samples of blurKernel 4, 128, and 512.




Share this post

Link to post
Share on other sites

As promised, here you go:

One of the cooler features I implemented:

  1. When the modal appears, take a screenshot using CreateScreenshotUsingRenderTarget, then stop the render loop.
  2. When the modal is dismissed, or the camera spin effect begins, run the render loop and hide the screenshot.

It's simple, but helps reduce the page processing cost when you're just reading or viewing pictures in the modal.

Our next step: animations for the tree and grass.

Feedback welcome! Thanks.

edit: I see now I should've shared this in the Demos and Projects forum, not here. My apologies! Won't happen again.

Share this post

Link to post
Share on other sites


You were on the right trail! is a crude modification I made to the ParticleSystem class which gives support for a "colorAlive" variable. With that, over the lifetime of a particle, the particle color changes in this way:

colorAlive -> random color -> colorDead

instead of

randomColor -> colorDead

With the dust motes floating around the tree, I wanted a fade in and fade out effect. With BJS's current ParticleSystem, I could only get a pop in and fade out, or fade in and pop out effect.

And it's in its own file because I wrote it before I learned how to compile the BJS src using Gulp. I just haven't gotten around to integrating it into my project the "correct" way yet!

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

  • Recently Browsing   0 members

    No registered users viewing this page.