Search code examples
javascripthtmlcsswebglbabylonjs

Having Z-Fighting Issues


I am using Babylon.js to make a 3D game. My project is meant to be run on all browsers. However, when users run it in Firefox it seems as though there is a bit of Z-Fighting issues where some 3d objects will not render correctly or not at all! I also noticed that some textures would have striped seams running diagonally like so...

enter image description here

I did some research online and I found out about the z-index property for .css. I played around with this setting but it did not solve the issue for me. I am open to any suggestion(s) to help me fix this? Many thanks in advance!


Solution

  • Seeing as my comment proved useful, I'll just re-quote it here to allow this answer to be marked as accepted.

    To take a wild guess, the sharp edges is to do with anti-aliasing, and 3D is relatively new. Try changing any perspective values.