Transparent thin instances blocking others

Questions
, ,
1

Hi there!

I’m sure it gets boring to be told by every newcomer that Babylon is great, but I definitely wanted to add my voice to the chorus of thanks :smiley:

I’m trying to render lots of boxes in a grid, using thin instances. Some boxes will be transparent and I’d like to see the ones behind them - but ideally I don’t have to re-order all of them each frame depending on the camera transform.

I’ve got an example playground here. In it, the REVERSE_ORDERING variable reverses the ordering of the instances, showing the behaviour I’m trying to avoid: when it’s true, the closest (transparent) box blocks everything directly behind it. When it’s false, everything looks okay from the initial camera angle, but the same problem exists when viewing from the opposite direction.

I’ve tried each Material transparency mode (none of which do what I’d like) and disabling material.forceDepthWrite (which then ignores depth completely). This also seems similar to:

  • This question, but I’d prefer to use a StandardMaterial than a ShaderMaterial (and I think the transparency mode should discard correctly anyway?)
  • This question, but I’m not worried about displaying behind the boxes.
  • This question is almost exactly the same, but setting scene.useOrderIndependentTransparency gives even stranger results…

I could believe this was a bug, but my confidence here is low enough that I’m assuming it’s a skill issue at the moment…

Thanks!

2

Welcome aboard, and thanks for the kind words!

The 3rd link is the answer to your question. OIT works, but only if alpha values are between 0 and 1 (see fix line 38):

3

Thanks for jumping in @Evgeni_Popov!

Looking back, I think I missed that because I get weird results for adjacent transparent boxes with OIT. I didn’t realise that was the issue so it’s not in the original playground, but I’ve updated it here so you can see it (changes in line 38 + updated camera angle in line 8).

Any idea what would cause the weird graphics around the closest (transparent) box at (x: 2.5, y: 2.5, z: -0.5)?

4

This is because the default value of 5 depth peeling passes is not sufficient to render this angle of view correctly. At least 7 passes are required:

1 Like
5

That’s it - working perfectly now.

Thanks @Evgeni_Popov!