solved Shadow Blur Problem

[SneakySnave]

Hi.

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 (task.name) {
            case 'treeMeshTask':
                mesh.material = treeMat;
                mesh.receiveShadows = true;
                shadowGenerator.getShadowMap().renderList.push(mesh);
                break;
            
            case 'cloudMeshTask':
                mesh.material = cloudMat;
                mesh.receiveShadows = true;
                shadowGenerator.getShadowMap().renderList.push(mesh);
                
                // create cloud rings...
                break;
        }
    });
};

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.

[JCPalmer]

@Deltakosh, first time poster, probably need to move to Questions so people will see this.

[SneakySnave]

Ah. Whoops. I did mean for it to be under Questions & Answers.

I don't see a way to move it. Must a moderator do that?

Sorry about that!

[GameMonetize]

Ok moved

You can control how blurred is the shadows with blurKernel:

https://www.babylonjs-playground.com/#IIZ9UU

(See line #40)

 

[SneakySnave]

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.

[GameMonetize]

Ok so your issue is more about self shadowing.

Please check the doc section about close ESM: http://doc.babylonjs.com/tutorials/shadows#close-exponential-shadow-map

 

If you can create a repro in the PG I will be able to fix it for you

[SneakySnave]

Thanks, @Deltakosh ! It took some fine-tuning, but I was able to get some results I'm happy with.

[GameMonetize]

By the way the scene is really beautiful. Will you share it soon?

[SneakySnave]

Thanks! I'm redoing my company's website and can post here with it's complete

[SneakySnave]

As promised, here you go:

http://pixelandtexel.com/

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.

[brianzinn]

Looks really clean.  Totally random, but what is babylonjs.ps.colorAlive-3.0.min.js?  Can't seem to find anything about it, code looks like Particle System, so I figured out the ps...

[SneakySnave]

Thanks!

You were on the right trail! babylonjs.ps.colorAlive-3.0.min.js 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!

[GameMonetize]

Welcome to babylon.js homepage