How to achieve render order independent outline rendering?

Hello community,

I need to render the outline of several objects, which will partially occlude each other. I tried using Mesh.renderOutline, which works fine except one issue:

Depending on the order in which objects are rendered, some objects miss parts of their outline. See in the linked example, when the yellow sphere is in the back, it’s perfect, but when it is in the front, a part is missing.

https://www.babylonjs-playground.com/#B21PEK

I have tried setting the visibility to a value < 1 to make them alpha blended and thus sorted, but then the issue is there in both cases.

I assume this is not a bug and works as intended. However, is there a way to achieve my desired result without writing a custom shader?

Thanks in advance!

===

EDIT:

Okay, I did some more digging and found that it works properly, if I change in the following lines material.needAlphaBlending to material.needAlphaBlending().


1 Like

I have created a pull request: Fix check if material needs alpha blending in OutlineRenderer by mkmc · Pull Request #6610 · BabylonJS/Babylon.js · GitHub

That is a fantastic fix!!! THANKS A LOT

1 Like