Problem with rendering order on iOS Safari

Bugs
1

We are developing a game and recently switched from Three.js to Babylon.js because we were amazed by the great documentation, active community and the cool playground and we are very happy with this decision. The game looks good on all test devices, except our iOS device (iPhone 7) using the Safari browser (OSX Safari is completely normal). It seems to me like that there is a problem with the rendering Order.

image
image.jpg668×750 216 KB

We build the gamefield by

  1. loading the gltf mesh
  2. disable it
  3. create instances along the rows and cols

I tried to rebuild a minified simple example in the playground https://www.babylonjs-playground.com/#JUKXQD#159

Is there a known issue or a workaround which helps us to deal with this issue ?

Thanks a lot for any kind of help :slight_smile: !

2

I will look into it ASAP, it sounds like another win for iOS…

1 Like
3

At a first glance it looks like a precision issue on the depth buffer. You are playground example actually works on ios (iphone 8): https://www.babylonjs-playground.com/#JUKXQD#163

Is it only happening on iPhone 7 ?

If it is a precision issue, could you try changing the camera minZ and maxZ to be as close as you can from your scene bounding values. This should increase the precision.

1 Like
4

Thanks for your replies I will check that immediately ! :blush:

5

Wow, you were absolutely right! :metal::champagne:

Setting:
camera.minZ = 0;
camera.maxZ = 100;

fixed it for me :slight_smile: !

1 Like