How do I prevent texture flickering when zooming in and out here?

Hello amazing Babylon.js experts!

I have this quad with a transparent texture on it, but when I zoom in and out, I’m not sure if it is light reflection or zfighting, but it is flickering with some artifacts. How can I prevent this from happening?

Thank you so much for your help!


I don’t get any flickering with using mouse wheel to zoon in/out under Edge, Chrome or Firefox. How can I repro that?

@Cedric Here’s the recorded video of the issue. I see this issue on Mac High Sierra Chrome 75.0. The white flickering region is actually more smoothly blended in than how it looks in GIF, but it is definitely noticeable. I recorded this with giphy capture app from app store.

Here’s another angle where you can see the flicker:

It looks like the flicker is split along where the triangles of a quad are split.

The problem went away when I used sideOrientation: BABYLON.Mesh.FRONTSIDE for the plane!

I can see it on my Mac with Chrome or Safari. It looks like a second rendering path with lighting with zfighting.

If I change the plane mode to BABYLON.Mesh.SINGLESIDE instead of DOUBLESIDE, I don’t get the zfighting but I can see the specular lighting.

Invert the plane so you won’t see the lighting:

var sourcePlane = new BABYLON.Plane(0, 0, 1, 0);
1 Like

Thank you for your help! You guys are awesome!

1 Like