BJS 5.5.6 changed rendering order and broke CSS3DRenderer

we are using 3D embedded html element based on CSS3DRenderer. It worked great in BJS 5.5.5, but BJS 5.5.6 changed rendering order and broke it. I think :man_shrugging:

This is the original forum thread with source project.

You can see the difference here
Simply switch BJS version between 4 and 5.40 and watch the sphere and box overlapping the youtube html element. Unfortunately I don’t know how to switch to specific BJS version, but it works with BJS 4.

Our implementation is in TypeScript and I tried to port it back to the playground , but unfortunately my 3D objects are always behind the youtube html element. Guess I incorrectly setup html elements order.
The important code line is 171: = '0'

If I change it to -1 the iframe is not visible at all. But that’s different issue I think.

I suspect that the cause of the overlapping change lies in this bugfix PR but cannot confirm it. Could you please take a look? I may not understand the rendering pipeline correctly, perhaps you could give me more information?

Thank you

Here are screenshots with two BJS versions and z-index configurations:

BJS 5.5.5, CSSRenderer.zIndex -1
Works great

BJS 5.5.5, CSSRenderer.zIndex 0
iframe is always in front

BJS 5.5.6, CSSRenderer.zIndex -1
iframe is not visible at all

BJS 5.5.6, CSSRenderer.zIndex 0
iframe is always in front

Babylon.js does not draw meshes in the scene.meshes order anymore, but sort them per material instead, for speed optimization reasons.

The PG relies on the plane being drawn first to work.

There are several way to fix it:


Awesome, thank you! I’ll give it a try.

I chose to alter the rendering group IDs. It works great but there are few more steps needed if you are using more complex scenes with skybox:

  1. Use rendering group IDs like this:
embeddedHtmlElement = 0 // Plane mesh
skybox = 1 // Box mesh
environment = 2 // 3D objects, avatars, etc.
  1. When creating scene
// Needs to be transparent for underlaying htms/css content (iframe) to be seen
scene.clearColor = new Color4(0, 0, 0, 0)
// Skybox (its rendering group) must NOT clear buffers,
// otherwise rendering groups with higher id (3D environment) won't be visible
scene.setRenderingAutoClearDepthStencil(RenderingGroup.skybox, false, false, false)