solved [SOLVED] How to prevent texture smearing?

[ozRocker]

Is there a way to change texture uOffset and vOffset without having the texture smearing?

You can see it here

https://www.babylonjs-playground.com/#NXVFFK

[fenomas]

You mean like this? https://www.babylonjs-playground.com/#NXVFFK#1

If so, the clamp mode is the problem. When you set an offset, the edge of the texture moves to the middle of the mesh. Setting clamp mode tells the engine to keep drawing the edge of the texture beyond that point.

[ozRocker]

22 minutes ago, fenomas said:

You mean like this? https://www.babylonjs-playground.com/#NXVFFK#1

If so, the clamp mode is the problem. When you set an offset, the edge of the texture moves to the middle of the mesh. Setting clamp mode tells the engine to keep drawing the edge of the texture beyond that point.

I used clamp mode because I don't want the texture to wrap.

Maybe I can add a transparent border to the image texture so only the transparent border will smear

[GameMonetize]

Yep seems like the best option here

[fenomas]

1 hour ago, ozRocker said:

I used clamp mode because I don't want the texture to wrap.

Maybe I can add a transparent border to the image texture so only the transparent border will smear

When you apply a texture to a mesh, every fragment of the mesh will get painted with a pixel of the texture. Wrapping vs. clamping just changes which pixel. So if you want part of the mesh not to have any texture, you'll need to split the mesh into separate parts, or change the texture to have transparent pixels, yeah.

[ozRocker]

ok, it seems to work fine in all corners if I use a texture with 1px border of transparency.

https://www.babylonjs-playground.com/#NXVFFK#2

This will be an image that a user uploads, which I process with PHP GD anyway, so its no problem for me to just add a 1px border of transparency

[ozRocker]

Actually, there are problems in this one, which is probably why I'm still struggling with the project I'm on, because even with 5px border of transparency I still see a smear on my mesh.  Because my texture is on a person's body so its not a flat surface.

https://www.babylonjs-playground.com/#NXVFFK#2

In there if you change angle of the camera to look at the side of the ground a smear will appear.  Does anyone know how to prevent that?

EDIT

I got it sorted.  I needed to have a 4 pixel border of transparency.  Works fine now

[SvenFrankson]

I think it's due to the anisotropic filtering. Here another way to fix it : https://www.babylonjs-playground.com/#NXVFFK#3