Shapes z-order renderOrder polygonOffset

Questions
1

Hello,

I am rendering a lot of shapes on a plane. They all should have the same z-index.
Now I have the problem that one specific mesh is rendered below another which was not my indended order of “z-index”. But the adding of the mesh is done later. So it should be on top? One is transparent one not. Could this be possible? I thought what is added to the scene later is rendered on top?

What would be the solution? I have tried renderOrder and polygonOffset but both need transparent material and I have also shapes with opacity 1.

Here is a thread for polygonOffset: https://github.com/mrdoob/three.js/issues/2593

Thank You.

2

Is it possible for you to demonstrate the issue with a live example?

Objects are primarily sorted by their depth. However, if objects have the same depth value other factors determine the final render order. Object3D.renderOrder provides the possibility to overwrite the default rendering order of the scene graph.

In any event, opaque objects are definitely drawn before transparent ones. Even setting Object3D.renderOrder does not change this fact.

3

Its really hard to make a standalone live example but I will try it.

In my case I am adding an opaque group after an transparent group. But the result is the transparent is on top of the opaque. How could this be and how can I change this?

4

I’m sorry the app is too complex I cannot create a simple case. But perhaps we can discuss in theory?

5

I’m afraid it’s not possible to change the basic render order of WebGLRenderer. Transparent objects are always drawn after opaque ones. So if all objects have the same depth, the transparent object will always be blended on top.

6

What is the difference between renderOrder and polygonOffset?
I found this thread but its a little bit confusing: https://stackoverflow.com/questions/49096626/three-js-what-is-more-efficient-to-layer-and-resolve-z-fighting-using-polygono
Please can someone explain a little bit the terms?
We have:
renderOrder
polygonOffset: true
polygonOffsetUnits: 1
polygonOffsetFactor: -rectCount
depthTest: true
depthWrite: false

Then we also have other approaches:
logDepthBuffer
sortingGroups

How to combine best and solve the problem?