Hello,
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
This is the original forum thread with source project.
You can see the difference here https://playground.babylonjs.com/#1DX9UE#523
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 https://playground.babylonjs.com/#EAVSEW#7 , 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:
container.style.zIndex = '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?
create a material for each object, but make sure to create the material for the plane first. Because the meshes are sorted according to their material id, the plane will be the first to be drawn after sorting: https://playground.babylonjs.com/#1DX9UE#655. Note that in the PG, I updated line 136 to make sure to use my material and not the one created by the CSS renderer
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:
Use rendering group IDs like this:
embeddedHtmlElement = 0 // Plane mesh
skybox = 1 // Box mesh
environment = 2 // 3D objects, avatars, etc.
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)
