Transparency of several crossing and overlapping objects

Questions
,
1

Hi folks. We are working on web-based platform that allows to analyse some seismic data. And we are using Babylon for 3D part of that system.
Users able to apply custom colorizing over some raw textures that we get from backend. In could be heights map or ground depth-slice. And user able to make some of pixels in texture to be partially or fully transparent. In addition, user able to apply global transparent to object.
So let say scenario is following:

  1. backend returns grayscale opaque image to browser
  2. then user applies colorizing to image from point 1 - it creates a new Blob or base64 png on the clien side, where some pixel are transparent
  3. that image applied to the plane
  4. user able to change commom opacity of plane by slider
  5. user able to change positions of objects in view

In view user have ground of heights map, 2 ground depth-slices and system grid with labels.
And the issue is that when all of objects have transparent pixels - blending-overlapping of objects totally incorrect. And while rotating camera - blending-overlapping changes during rotation process.

I was looking into Transparent Rendering | Babylon.js Documentation, and I didn’t found working solution.

  • alphaIndex/renderingOrder - we are not able to use it, as there at lest 3 objects that may crossing each other at the same time
  • useOrderIndependentTransparency - produces artefacts and makes performance really poor (on our project we have more data than in provided playground)
  • varios combination of needDepthPrePass/forceDepthWrite/separateCullingPass/transparencyMode/alphaMode does not produce expected result. There are still blending-overlapping changes during rotation process

Playground: Babylon.js Playground

2

Transparency is a hard problem indeed :sweat_smile: Maybe @sebavan or @CraigFeldspar or @Evgeni_Popov may have some pointers to you?

3

Unfortunately, aside of OIT I am not sure this would be possible :frowning: Would it be possible to subdivide your meshes, let s say each plane divide in 4 so you could be in control of the full rendering order ?

4

@sebavan, I thought about it. But it also not a way:

  1. There is a heights map (horizontal object), which have height differences. It would quite complicated to cut off 2 vertical planes into 8 pieces along the height difference. Also, probaly, it would also require to cut off horizontal object into 4 pieces too. But there could be more than 1 height map. And they may also cross each other. So cutting vertical planes may be difficult in case when there are, for example, 5 heights map which crossing each other and they cross vertical planes at different height. So vertical planes must be splitted more than into 4 pieces. It could be 4+ (10, 20, or even 100). And heights maps also must be cutted off into pieces between each other.

  2. There are labels along cube facets. And they (and facets too) randomly disappear when they behind some (or several) of transparent objects

  3. There could be some number of cylinders, also colored by gradient (some well’s logs data), which can be transparent too at some places and they may cross several heights maps, and 2 vertical planes at the same time