# Apply blurry effect to background image

**URL:** <https://discourse.threejs.org/t/apply-blurry-effect-to-background-image/37254>\
**Category:** Questions\
**Tags:** background, blurry, effect, textures\
**Created:** [April 20, 2022, 1:54pm UTC](https://discourse.threejs.org/t/apply-blurry-effect-to-background-image/37254 "2022-04-20T13:54:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gius](https://avatars.discourse-cdn.com/v4/letter/g/4af34b/32.png) [@Gius](https://discourse.threejs.org/u/Gius)\
**Post date:** [April 20, 2022, 1:54pm UTC](https://discourse.threejs.org/t/apply-blurry-effect-to-background-image/37254/1 "2022-04-20T13:54:13Z")

</div>

Hi,

we load a background image simply with this code:

```javascript
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!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 20, 2022, 2:39pm UTC](https://discourse.threejs.org/t/apply-blurry-effect-to-background-image/37254/2 "2022-04-20T14:39:57Z")

</div>

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:

> <https://github.com/mrdoob/three.js/pull/23712>
>
> Related issue: -
> 
> \*\*Description\*\*
> 
> We have tried to integrate background blu…rriness in the past (e.g. #20463), however the approach at that time wasn't right. This one uses \`textureCubeLodEXT()\`/\`textureLod()\` to retrieved blurred samples of the configured environment map.
> 
> The PR introduces \`WebGLRenderer.setBackgroundBlurriness()\` which accepts values in the \`\[0,1\]\` range. Because \`textureCubeLodEXT()\`/\`textureLod()\` relies on mipmapping, the environment map has to set \`generateMipmaps\` to \`true\` and also use \`LinearMipmapLinearFilter\`. 
> 
> Important: The configuration of the environment map has to be done on app level and can't be changed in \`WebGLBackground\`. That's because equirectangular textures are internally converted to cube map render targets and it is not possible to change render target texture parameters after their creation right now, see #14375.

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