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
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.
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?
I’m sorry the app is too complex I cannot create a simple case. But perhaps we can discuss in theory?
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.
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?
Then we also have other approaches:
How to combine best and solve the problem?