# Blur / scale texture

**URL:** <https://forum.babylonjs.com/t/blur-scale-texture/38573>\
**Category:** Questions\
**Created:** [February 27, 2023, 12:24pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573 "2023-02-27T12:24:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![flomotion](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/flomotion/32/2917_2.png) [@flomotion](https://forum.babylonjs.com/u/flomotion)\
**Post date:** [February 27, 2023, 12:24pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/1 "2023-02-27T12:24:26Z")

</div>

Hi,  
I’m trying to rescale or blur an image applied to the albedoTexture of a material.  
I need to do this because the image is a small pattern that causes a moiré-effect when zoomed out. Rescaling or blurring the texture could solve that. But when the camera comes close I do want the texture to be it’s original size.  
I did find:

> **[Image Filter Control | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/controls/imageFilter#process-to-a-babylon-texture)**
>
> The Babylon.js Filter Control is a web control built on top of Babylon.js in order to apply filter to pictures in web pages with blazing fast speed.

But I don’t really understand it/ get it to work.

Can someone show me a small snippet of code/ PG that shows how to implement this?  
thanks!

---

<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:** [February 27, 2023, 12:37pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/2 "2023-02-27T12:37:48Z")

</div>

Could you create a PG with your texture? It would be nice to see what it does and I guess you know that moiré comes from a combination of the pattern and the view angle. Filtering or bluring might just not always be the best option.

---

<div class="post-metadata">

**Author:** ![flomotion](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/flomotion/32/2917_2.png) [@flomotion](https://forum.babylonjs.com/u/flomotion)\
**Post date:** [February 27, 2023, 1:32pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/4 "2023-02-27T13:32:05Z")

</div>

Here is the PG. If you zoom out the moire gets worse and worse. I think scaling the texture or blurring it will solve that. Details are impossible to see anyway.

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 27, 2023, 1:42pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/5 "2023-02-27T13:42:35Z")

</div>

You could play with the mipmap sampling [Advanced VR Graphics Techniques (arm.com)](https://developer.arm.com/documentation/102073/0100/Mipmapping#:~:text=Mipmapping%20is%20a%20technique%20where,times%20the%20original%20texture%20size.)/ [Sampling Textures - VFXDoc](https://vfxdoc.readthedocs.io/en/latest/textures/sampling/) methods of the texture on the inspector to see if you can reach a satisfactory effect:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/6/f6b3759363526c9b1dcafa4b7346a811c5527f61.png)

Or you could even have separate meshes to finely control the levels of detail [Levels of Detail (LOD) | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/features/featuresDeepDive/mesh/LOD)

---

<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:** [February 27, 2023, 2:10pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/6 "2023-02-27T14:10:02Z")

</div>

so is your mesh a sphere or sphere-like? Of course if it is, this is typically where you cannot entirely fix moiré through the angle (of view, light or texture projection). There will always be this angle that creates moiré and no, mipmap will not fix it either. LOD might be a solution and else to be honest, I never tried this filtering technique. Never had use of it. May be @sebavan or @Evgeni_Popov can explain how it works or even if it can help with this case.

On the other hand, looking at this texture there are already two things that will only increase the issue.  
First thing, this texture is already not flat, it has some light and you can see the grayscale in the holes having a different angle and value. Second is the projection mode. You are applying this rectangular texture on a sphere. Although it does wrap the sphere, at the top and at the bottom the texture is distorted to a point where it becomes just so tiny mini that it will inevitably cause moiré.

I would start by making this texture completely flat. Next you can try play with the angle to lower the risk of moiré. See the PG below and notice how one side of the sphere does not have the moiré artefact (or a lot less).

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [February 27, 2023, 9:21pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/7 "2023-02-27T21:21:43Z")

</div>

Here is a technique you could rely upon to apply any effect to a texture: [https://www.babylonjs-playground.com/#S1UN3E#8](https://www.babylonjs-playground.com/#S1UN3E#8)

---

<div class="post-metadata">

**Author:** ![flomotion](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/flomotion/32/2917_2.png) [@flomotion](https://forum.babylonjs.com/u/flomotion)\
**Post date:** [February 27, 2023, 9:33pm UTC](https://forum.babylonjs.com/t/blur-scale-texture/38573/8 "2023-02-27T21:33:43Z")

</div>

Thanks everyone for your help. The texture is a scan of a piece of fabric. So it has no depth. And it will be applied to a suit-shape. Curves all over.  
I was looking into Khronos textures to create mip maps. But thank you @sebavan !  
I dont understand what you did there. Creating shaders is not for me. But I’m very happy to apply it to my project. Exactly what I need!
