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

Questions
1

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?

https://www.babylonjs-playground.com/#LXZPJK#185

Thank you so much for your help!

2

Hi

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

3

@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.

Jul-25-2019%2016-31-56
Jul-25-2019 16-31-56.gif998×658 656 KB

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

Jul-25-2019%2016-35-04
Jul-25-2019 16-35-04.gif998×658 1.57 MB

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

4

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

5

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
6

Thank you for your help! You guys are awesome!

1 Like