# How to blur environment texture

**URL:** <https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791>\
**Category:** Questions\
**Tags:** environment\
**Created:** [April 11, 2023, 12:30pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791 "2023-04-11T12:30:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sarrus4x4](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sarrus4x4/32/30205_2.png) [@Sarrus4x4](https://forum.babylonjs.com/u/Sarrus4x4)\
**Post date:** [April 11, 2023, 12:30pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/1 "2023-04-11T12:30:12Z")

</div>

Hello, I am looking for a way to blur my environment texture so the reflections in mirrors dont look so strange.

Currently i am creating it like this:

```auto
    const hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(".../Path", scene );
    scene.environmentTexture = hdrTexture;

```

When looking [this tutorial](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/HDREnvironment) i noticed the blurry effect on the environment texture, but I was not able to recreate it for the reflections in my Scene. When exporting the .env file from this tutorial, the reflections from the environment are not blurry.

Could you please tell me how to blur my environment texture like this?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 11, 2023, 12:39pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/2 "2023-04-11T12:39:52Z")

</div>

Are you using a probe or a mirror material? Else, speaking about PBR mats, I would simply use ‘roughness’ to blur the env. Or you could use a blured env texture (but it will be blured for all).  
Not sure I fully understand the question 🤭 😉… Would you have a PG?

---

<div class="post-metadata">

**Author:** ![Sarrus4x4](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sarrus4x4/32/30205_2.png) [@Sarrus4x4](https://forum.babylonjs.com/u/Sarrus4x4)\
**Post date:** [April 11, 2023, 12:47pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/3 "2023-04-11T12:47:09Z")

</div>

My question had a fatal flaw…! I am sorry about that.

I would like to achieve that the reflection in this mirror (reflection is based on my environment Texture) is very blurry and not such a pixelated mess.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/1/f1fce39002dd01931efe2e2c689f4e466ac43798.jpeg)

This is my [PlayGround](https://playground.babylonjs.com/#WRBQCP#56) (you might have seen this quite often by now 😅 😕)

EDIT: I would like to blur the texture inside of Babylon (if possible) because i don’t know how to edit a HDR / .env File

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 11, 2023, 12:56pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/4 "2023-04-11T12:56:54Z")

</div>

> [@Sarrus4x4](#):
>
> you might have seen this quite often

Nah, it’s fine. You can continue post it until it looks amazing 😁 😍

> [@Sarrus4x4](#):
>
> blur the texture

Yeah, well a number of options I believe. But since, as I thought, this is a PBR mat imported, I guess the easiest would be to use ‘roughness’ of the metallic workflow.  
Very quickly (and dirty 😉) done from your PG, something like that:

> **[Babylon.js Playground](https://playground.babylonjs.com/#WRBQCP%2357)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

**Side note:** Open the console. There seems to be an error with your import. Nothing to do with it but I thought I would mention.  
Hope this solution works for you. Else, let us know…  
Meanwhile, have a great day 🕶

---

<div class="post-metadata">

**Author:** ![Sarrus4x4](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sarrus4x4/32/30205_2.png) [@Sarrus4x4](https://forum.babylonjs.com/u/Sarrus4x4)\
**Post date:** [April 11, 2023, 1:05pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/5 "2023-04-11T13:05:27Z")

</div>

Thank you! That might be the solution (looks perfect). But is there also a way that does not change the model in any way, but only the env texture or other environment data?  
Thank you for your time! 🙂

> [@mawa](#):
>
> There seems to be an error with your import

I noticed this a couple of weeks ago but did not understand where the problem was 😃 appreciate the effort though

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 11, 2023, 1:10pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/6 "2023-04-11T13:10:41Z")

</div>

Well, first things first: it doesn’t change the model. Only the material.  
Next, to answer your question, the answer is ‘YES’. You can do so either at source, very simple, blur the texture. Downside: All materials using this texture for env/reflection will use a blured texture.  
Else, at an in-between stage, before rendering, apply a blur to the texture and pass this texture to the ‘reflection texture’. I’m not sure though if this can be achieved without using NME/a shader. May be, may be not. If you need that, better ask the expert @Evgeni_Popov.

---

<div class="post-metadata">

**Author:** ![Sarrus4x4](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sarrus4x4/32/30205_2.png) [@Sarrus4x4](https://forum.babylonjs.com/u/Sarrus4x4)\
**Post date:** [April 11, 2023, 1:15pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/7 "2023-04-11T13:15:31Z")

</div>

> [@mawa](#):
>
> it doesn’t change the model. Only the material.

acknowledged, i am new to CG-speak 👍

> [@mawa](#):
>
> You can do so either at source, very simple, blur the texture.

By this you mean before even importing it, outside of the babylon application right?

> [@mawa](#):
>
> Else, at an in-between stage, before rendering, apply a blur to the texture and pass this texture to the ‘reflection texture’

This sounds pretty much like what i am trying to do here 😃

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 11, 2023, 1:19pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/8 "2023-04-11T13:19:16Z")

</div>

> [@Sarrus4x4](#):
>
> before even importing it

Correct. Here it’s the image/texture that is already blurry.

> [@Sarrus4x4](#):
>
> sounds pretty much like what i am trying to do here

In that case, wait for ‘the hero’ 🦸‍♂️ to kick-in 😁 Better than taking my clumsy assumptions 🤪 But then, jokes apart, there would be a need for it (which I do not see here, not yet) because it’s gonna add to the load and require a pre-pass.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 11, 2023, 1:23pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/9 "2023-04-11T13:23:47Z")

</div>

I think @mawa nailed it: you should blur the texture (in Photoshop, for eg.), then recreate your .env file from this blurred picture.

---

<div class="post-metadata">

**Author:** ![Sarrus4x4](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sarrus4x4/32/30205_2.png) [@Sarrus4x4](https://forum.babylonjs.com/u/Sarrus4x4)\
**Post date:** [April 11, 2023, 1:25pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/10 "2023-04-11T13:25:51Z")

</div>

Alright then 🙂 Thank you for showing me the options, I’ll see what works best for me (my boss 😉 )

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 11, 2023, 2:10pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/11 "2023-04-11T14:10:58Z")

</div>

> [@Sarrus4x4](#):
>
> I noticed this a couple of weeks ago but did not understand where the problem was

The problem is with your ‘performance improvement’ (lines 66 to 70) called within the mesh import and therefor, part of the promise.  
You are calling on ‘mesh’ but ‘mesh’ does not exist. And then if it would exist, the way it is now, it would be the parent, which is the ‘root’ and your meshes would not be optimized anyways. So know that currently, you are not optimizing anything 😁

---

<div class="post-metadata">

**Author:** ![Sarrus4x4](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sarrus4x4/32/30205_2.png) [@Sarrus4x4](https://forum.babylonjs.com/u/Sarrus4x4)\
**Post date:** [April 11, 2023, 2:24pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/12 "2023-04-11T14:24:08Z")

</div>

Oh well… i tried 😌

Thank you once again ☺

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [April 11, 2023, 2:26pm UTC](https://forum.babylonjs.com/t/how-to-blur-environment-texture/39791/13 "2023-04-11T14:26:32Z")

</div>

No worries. Try, fail, over and over again, try harder and then eventually succeed is the way (the only way) I know 😁… Just don’t tell anyone 🤭
