Clamping textures seems not to work for uScale= -1

Bugs
1

Hello :smiley:
I sucessfully use clamping to remove texturing artifacts.
See thread: Texturing Issue?

But when mirroring the texture with uScale=-1, the clamping produces artifacts.

Playground example: Babylon.js Playground

Without clamping i still have the original texturing artifacts on a mirrored texture.

Thank you very much in advance.

2

It is expected as the uvs would be outside the range 0-1

In your case you could try setting your texture sampling mode in NEAREST

3

With uScale=-1, you are wrapping the texture in reverse, but the CLAMP doesn’t take that in to consideration. Perhaps you want this?

    tex1.uOffset = 1;

Example:

I have also been trying to understand texture handling in more depth. I’m no expert yet, but in case it helps:

In case it is not clear, consider that the plane you are applying a texture to has has no thickness or depth. I believe the results being seen are due to how the OpenGL/WebGL specification specifies border edges of textures are to be handled. And then, related are the texture sampling/filtering options being used.

This is a deep rabbit hole and I have not been able to find definite specifications for WebGL1/2 on this, but I suspect they do exist. The more generic specs for OpenGL are close though and contain enough information to better understand:

With that, it’s clear why the CLAMP settings change things. However, it also then leads to question as to why/how the engine is sampling the border for the texture when they are not clamped. That led me to create this PG, which shows some different texture filtering options in BJS:

Per the default uncommented code there, you can see that NEAREST_LINEAR also removes the original edge artifacts you were seeing, as I would expect. However, any rotation of the plane shows other artifacts, which I suspect is why non-linear filtering is enabled by default.

2 Likes
4

@sebavan Thank you very much for your fast answer. Sadly your solution does not work for me

@kaliatech That works! Thank you very much. I only go into BabylonJs and WebGL/OpenGL recently so this is really helpful! Youre amazing!

1 Like