Jump to content

Shadow Blur Problem


SneakySnave
 Share

Recommended Posts

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

59b6f61fda11e_ScreenShot2017-09-11at2_59_56PM.thumb.png.fb6cc1d00190a958d2c5726b7485f11f.png

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:

59b6f643b369f_ScreenShot2017-09-11at3_42_53PM.thumb.png.53324cd34e38128f64ebd3043d23d3ba.png

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.

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

59b995752173c_blurKernel4.thumb.jpg.6744875a233398b8a6c31c1f3c85a6f8.jpg

59b9957e170d8_blurKernel128.thumb.jpg.22d96de46be8e2c6c2a530b408d16f45.jpg

59b99587ca3bf_blurKernel512.thumb.jpg.d6e8bd20821b450adfc251764250d622.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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