Adding blur to skybox

Questions
1

Hi.

Can I add blur on the skybox in the scene? I could do that in some image editor and then load those textures, but I wonder if there is some simple approach to do that in the code.

Thanks

2

You can do this by tweaking the roughness/microSurface value of the skybox material.
This definitely works with .dds, .env and .hdr textures for the environment.

1 Like
3

That kinda helps me. Thank you

4 
    var hdrTexture = new BABYLON.CubeTexture("/skyboxes/dds/myskybox.dds", scene);
    var blur = .08; //.1 is totally blurry. .01 is not blurry at all
    var myskybox = scene.createDefaultSkybox(hdrTexture, true, 10000, blur);
1 Like
5

Is there a way to adjust the skybox blur after the skybox has been created?

6

Hi. I am not sure if I understood your issue properly, but it sounds like above solution applies to your issue.

https://playground.babylonjs.com/#UU7RQ#1176

You can even somehow dynamically control microSurface value and adjust the blurriness as you wish (with a slider for example).

7

Hi @nogalo thanks for the response. The flagged solution here only kinda works – it looks like that’s just reducing the resolution of the skybox material to simulate blur rather than actually applying a blur filter of some sort. For something like scene.createDefaultSkybox(hdrTexture, true, 10000, blurParam), I want to be able to adjust blurParam after I’ve created the skybox, but I can’t find how to do that.

https://playground.babylonjs.com/#UU7RQ#1178