There are a few tools for dealing with this…
But they are all kinda hacks since transparency itself is a hack.
So in no particular order:
setting depthTest:false – disables depth test… making the mesh always render
or depthWrite: false – mesh renders but doesn’t write its own depth to the depth buffer, so a later mesh will overwrite it…
setting .renderOrder on the meshes to control which one renders first…
blueMesh.renderOrder = 1
redMesh.renderOrder = 2
there is also:
using side:THREE.BackSide - only render back faces…
and/or then on a clone of the mesh using side THREE.FrontSide - only render front faces…
and finally…
breaking the meshes into smaller chunks that can then be depthSorted correctly by the default transparency depth sort which sorts by center point iirc.
and lastly, if you’re Really looking for a struggle…
the “depth peeling” rabbit hole:
1 Like