How to solve the rendering order for random meshes to get proper transparence

Questions
,
1

Hello,
I have 3 meshes, three are rendered randomly, How can I ensure that transparent objects are visible from both the positive and negative Z-axis directions
The code is very simple

 return (
      <meshStandardMaterial
        attach="material"
        color={new THREE.Color(meshColor[0], meshColor[1], meshColor[2])}
        roughness={1.0}
        opacity={0.5}
        transparent={true}
        side={THREE.DoubleSide}
      />
    );

This picture is showing the rending order is mesh1, mesh2, mesh3, position of mesh1 = [0,0,10] ,
position of mesh2 = [0,0,5], position of mesh3 = [0,0,0], it seems not transparent from the view of +z direction. See the picture below
image
But they are transparent from the view of -z direction. I want to see all transparent no matter which Z direction and no mater what render order. Thanks

image

2

this is not trivial and more of a fundamental issue with webgl. threejs has recently merged alphaHashing, this will do it but you will have to accept some noise. see three.js examples

  return (
    <meshStandardMaterial
      alphaHash
      color={meshColor}
      roughness={1.0}
      opacity={0.5}
      side={THREE.DoubleSide} />
  )

ps no need for attach=material, no need for new THREE.Color either, it accepts arrays.

3

I think you could improve the results in this example with depthWrite={false} as well, but as @drcmda says, there is no general solution for this problem with alpha blending, without sorting all of your individual triangles based on the viewing direction, or adding additional render passes, and both cost a lot on performance.

4

Thank you so much. I deleted the useless code. And alphaHashing indeed works, but there is too much noise.

5

Thank you a lot. I apply depthWrite={false}, it looks transparent from the view of -z direction and +z direction, but it gives me a wired view, the last rendering is always on the top no matter what value of z.
Sorting lots of meshes are really cost :crying_cat_face:

6

Here is an approach that was mentioned at the cost of many draw calls. This was done before multiple targets so it renders the scene twice with every pass.
On top of that, in order to reduce the search space it’s sharing a depth buffer between two render targets which I’m not sure if it’s still impossible to do off the shelf (I had to modify the renderer). It’s involved but doable.
https://raw.githack.com/pailhead/three.js/depth-peel-stencil/examples/webgl_materials_depthpeel.html

1 Like
7

This is what I want. Could you share parts of your code related to this ? Thanks