Depth sort problem with multiview (2 arc rotate cameras)

hey guys,

so i am still working on my little 3D demo thing with lots of transparent cubes…
now i implemented some kind of multiview. in other words, two differenct cameras viewing the same blue cube object but from kinda like 180° in degrees different direction where implemented. these are just two “Arc Rotate Cameras” (camera1 and camera2). implemented as 2 viewports in the browsers window object. one on the left, the other on the right side…
(see the screenshot above)

so i use the following code:
` camera1.viewport = new BABYLON.Viewport(0, 0, 0.5, 1);
camera2.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1);

scene.activeCameras.push(camera2);
scene.activeCameras.push(camera1);`

now the problem that i have is that i use depth sort in this demo, and it doesent work with both of my cameras. it seems to only work with one of the “active cameras” (see code above)… depending which of the camera objects where first or lasted “pushed” into the “activeCameras” array…

to make that a little bit more clear, because i have no playground provided here… you can see this problem in this image of my demo.

on the left side the cube is shown with this one side where the red square is in front. the yellow is in the back and is drawn not so intense because it is in the background (actually the backside of the blue cube) and there is a transparent mesh in between… everything correct here!

but when you look on the right side (the other viewport)… it’s the same blue cube object just shown from the opposite side, the yellow square is now seen as on the front side… but here you can see that it is not drawn correctly in terms of depth sort… the yellow square is in front and should be drawn more intense… the red one is on the back side of the blue cube and should be drawn more diffuse, but the opposite is the case.

to me it looks like the depth sort algorithm is getting its data only from one of the viewports… namely the one who was last pushed into the “active cameras” array it seems.

so my question is… can i change that, so the depth sort works correctly on both of the viewports… do i need to change a property that i am maybe not thinking of? or… if there are no other options… are there possible workarounds…?

thanks guys… .

in short: depth sort on the left viewport (camera1) correct but depth sort on the right viewport (camera2) not correct!

It’s difficult to say without a repro, it seems to me it should work as the meshes are collected/sorted per camera. But the sorting is done only for the meshes that the system considers as transparent. Do you have a live link that we could check?

thanks for your answer !

i finally did a reproduction of my demo (and the problem) in a playground:
you can check it out here:

https://playground.babylonjs.com/#3SD1I6#5

at this point i am thinking this could be some form of a “bug” or something that is not entirely implemented with this sort of configuration that i am using which is:

→ SPS with transparent blue boxes (vertexAlpha enabled, line 118) and box facets enabled.
→ backfaceCulling = false (line 114)
→ mustDepthSortFacets = true (line 116)
→ updating facet data (line 215)
→ convertToFlatShadedMesh()
→ and: multi viewport (2 cameras)

i want to mention again, that this depth sort problem only occurs when using more than one viewport and it seems to occur with every but not one camera.

to better highlight the problem i made this playground where you can see, that with a normal white plane (MeshBuilder.createPlane, alpha = 1) depth sort works corectly not only on camera 1 (left viewport) but also camera 2 (right viewport) where both white squares are on the back side of the blue big cube thing.
but with a box facet turned white it is not the right “depth color” on the right side. it kinda looks like it is not even on the back side of the blue thing…

off course in the playground you can change the camera perspective with the mouse…

it seems that the function updateFacetData does not take into account the different camera perspective in this multiple viewport configuration. and this seems to correspond with the chronology of the “activeCameras” array → only the last camera that is pushed into this array seems to work correctly in terms of depth sort (with this colored box facets in the vertex color buffer). notice that i pushed camera2 first and camera1 second in the activeCameras array.

would you agree with my assumptions? or am i maybe just overlooking something…

in any case thanks for this great libary and also the support!

Yes, same here. Although I do not use a viewport but just 2 cameras. When using ‘activeCameras’, the last Camera in array is the only one that is really ‘active’. It also seems that the order of Camera changes something to the way layers (layerMask) are used. As if the last Camera was considered ‘on top’ somehow disregarding the inputs for the layers?.. I’m still stuck with that and my topic is also still open.
https://playground.babylonjs.com/#XAQHTZ#5

By default, updateFacetData is sorting the facets based on the camera active the first time updateFacedData is called.

In your case, you need to call updateFacedData for each camera separately:

    scene.onBeforeCameraRenderObservable.add((cam) => {
        SPS.mesh.facetDepthSortFrom.copyFrom(cam.position);
        SPS.mesh.updateFacetData();
    });

facetDepthSortFrom must be set with the camera position so that the sorting is done correctly.

https://playground.babylonjs.com/#3SD1I6#11

1 Like