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:
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!
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.
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.
You could play with the mipmap sampling Advanced VR Graphics Techniques (arm.com)/ Sampling Textures - VFXDoc methods of the texture on the inspector to see if you can reach a satisfactory effect:
Or you could even have separate meshes to finely control the levels of detail Levels of Detail (LOD) | Babylon.js Documentation (babylonjs.com)
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).
Here is a technique you could rely upon to apply any effect to a texture: https://www.babylonjs-playground.com/#S1UN3E#8
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!