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

**URL:** <https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164>\
**Category:** Questions\
**Tags:** opacity, transparency\
**Created:** [April 16, 2024, 3:42pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164 "2024-04-16T15:42:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ling](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ling/32/35490_2.png) [@Ling](https://discourse.threejs.org/u/Ling)\
**Post date:** [April 16, 2024, 3:42pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/1 "2024-04-16T15:42:17Z")

</div>

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

```javascript
 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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/4/a489db984ead9ecca63581a8557ef28c8ef08466.png)  
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/3/83c093bfac3f1581f995d883e4432994e42c13fe.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [April 16, 2024, 4:17pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/2 "2024-04-16T16:17:40Z")

</div>

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](https://threejs.org/examples/?q=alpha#webgl_materials_alphahash)

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

```

ps [no need for attach=material](https://docs.pmnd.rs/react-three-fiber/api/objects#attach), no need for new THREE.Color either, it accepts arrays.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 16, 2024, 4:24pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/3 "2024-04-16T16:24:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ling](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ling/32/35490_2.png) [@Ling](https://discourse.threejs.org/u/Ling)\
**Post date:** [April 16, 2024, 7:06pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/4 "2024-04-16T19:06:28Z")

</div>

> [@drcmda](#):
>
> `alphaHash`

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

---

<div class="post-metadata">

**Author:** ![Ling](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ling/32/35490_2.png) [@Ling](https://discourse.threejs.org/u/Ling)\
**Post date:** [April 16, 2024, 7:16pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/5 "2024-04-16T19:16:24Z")

</div>

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 😿

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [April 17, 2024, 5:50pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/6 "2024-04-17T17:50:58Z")

</div>

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](https://raw.githack.com/pailhead/three.js/depth-peel-stencil/examples/webgl_materials_depthpeel.html)

---

<div class="post-metadata">

**Author:** ![Ling](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ling/32/35490_2.png) [@Ling](https://discourse.threejs.org/u/Ling)\
**Post date:** [April 17, 2024, 7:30pm UTC](https://discourse.threejs.org/t/how-to-solve-the-rendering-order-for-random-meshes-to-get-proper-transparence/64164/7 "2024-04-17T19:30:09Z")

</div>

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