Problem with rendering order on iOS Safari

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.

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

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: !

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

1 Like

At a first glance it looks like a precision issue on the depth buffer. You are playground example actually works on ios (iphone 8):

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

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

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

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

fixed it for me :slight_smile: !

1 Like