Artifacts at the edges of a ground plane when applying image texture

[renku]

I’m applying image texture to BABYLON.Ground, but getting strange artifacts at the edges:

Babylon.js Playground

This happens with both transparent and non-transparent images.

It looks like the image is wrapping over to another side and a tiny slice from one edge of the image gets painted to the opposite edge of the image.

Is there some way to prevent this from happening?

It might also very well be that I’m doing something completely wrong with how I’m using the textures in the first place.

[samuelgirardin]

hi @renku , maybe you can try :
texture.wrapU = 0; CLAMP_ADRESSMODE
texture.wrapV = 0;

Babylon.js Playground

[renku]

Thanks. This fixes the problem in the playground.

But in my actual project it causes a different problem.

I’m using right handed coordinate system (scene.useRightHandedSystem = true;), which causes the images to appear flipped.

To overcome this problem I’m using:

texture.vScale = -1;

This corrects it. But when I also apply the wrapU/wrapW:

texture.wrapU = 0;
texture.wrapV = 0;
texture.vScale = -1;

I only get a black box as a result:

Babylon.js Playground

I have to admit I’m pretty novice when it comes to this whole UV-mapping thing.

[Joe_Kerr]

Like that? https://playground.babylonjs.com/#XDSW9Y#7

You can also play around with some of the values like for example:

[renku]

Thanks @Joe_Kerr, you are a savior!