0

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!

mmangual83
  • 151
  • 1
  • 2
  • 11
  • We need some code to go on really, if possible use the [babylon playground](http://www.babylonjs-playground.com/) and link us to it. To take a wild guess, the sharp edges is to do with anti-aliasing, and 3D is relatively new. Try changing any perspective values. – jaunt Sep 09 '15 at 17:14
  • @jaunt YESS! I found the .js class that handles everything that has to do with the camera setting. I played a bit with some of the values and it seems that it is starting to fix some of that z-fighting issue. I'll get it fixed in no time now. Thank you! – mmangual83 Sep 09 '15 at 17:19
  • [this answer might help you understand z-fighting issues](http://stackoverflow.com/a/21106656/128511) – gman Sep 10 '15 at 23:50

3 Answers3

1

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.

jaunt
  • 4,978
  • 4
  • 33
  • 54
1

This may also be a firefox bug related here 2 days ago. When you set antialias:false, firefox also needs stencil:true to enable the 24-bit depth buffer.

Mouloud85
  • 3,826
  • 5
  • 22
  • 42
0

z-fighting (in 2020)

BABYLON.js evolved since 2015, so here are my suggestions on what to try to fight the z-fighting:

  1. material.useLogarithmicDepth = true; for all meterials in your scene. See this how to.

  2. Adjust material.zOffset (negative values enforce depth-shift towards camera). See this playground.

Note that z-index and css as asked in the question in general have no effect on the 3D scene. It lives in its own world inside of the <canvas> element. 3D objects are not DOM elements, each engine (BABYLON, THREE, etc.) represents them in it's own way.

Community
  • 1
  • 1
Isolin
  • 845
  • 7
  • 20