Apply blurry effect to background image

Questions
, , ,
1

Hi,

we load a background image simply with this code:

private createBackground(backgroundURL) {
    const textureLoader = new TextureLoader();
    this.bgTexture = textureLoader.load(backgroundURL);
    this.scene.background = this.bgTexture;
};

We aim to emphasize a loaded 3D object so we would like to blurry the background.

It’s possilbe to blurry the texture on the fly without loading another already blurried image?

We searched the web but didn’t find a solution yet.

Thanks!

2

It is currently not possible to configure Scene.background with a blur. However, there is the intention to introduce support for it. In the first step, it will only be possible to blur environment maps. The below PR tries to implement this feature:

In the next step, we could figure out how to implement the blur for normal textured backgrounds.