# Render order issue with with materials with lower opacity not being transparent when animating

**URL:** <https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177>\
**Category:** Questions\
**Tags:** transparency, materials\
**Created:** [June 11, 2022, 6:37pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177 "2022-06-11T18:37:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [June 11, 2022, 6:37pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/1 "2022-06-11T18:37:01Z")

</div>

**-----------**  
**Update:**

I seem to have found some more information about my problem.

I made a video to summarize my issues: [three render order issue - YouTube](https://youtu.be/YR5RT0T798w)

Basically, depending on the order at which I load in my instances, it will cause either the red or the blue slices to render correctly. If I load all of the blue instances on the screen, set the opacity to zero, then do the same with the red, the blue will work while the red will not (vice versa).

**-----------**

**Original Post:**

Hello,

I am working on a three JS animation where multiple instances will be changing opacity as the render in to create slicing affect.

I created a video to showcase this: [Rendering Issue 1 - YouTube](https://youtu.be/e_orUdH76Ys)

In this video, you can see how I have two separate animations going on: one to slice in the red boxes and one to slice in the blue. Each of these animations are composed of multiple instance meshes, one for each slice, that have different opacity timings. This creates a interlocking animation between the two colors with no overlaps.

Each work on their own, but when I attempt to combine both together, I end up getting a issue with the opacity not working.

If I attempt to make the blue slices transparent with zero opacity: [rendering issue 2 - YouTube](https://youtu.be/fUVrzrJKob4)

Now they just turn up black and are not.

Each slice has the following material:

In this case, the opacity is zero (useCustom is true), and later animates to one.

```javascript
 new three.MeshPhongMaterial({
   transparent: true,
   receiveShadow: true,
   opacity: useCustom ? this._threeModelAnimationOptions.animationMesh.custom[groupItem].opacity : this._threeModelOptions[groupItem].opacity,
   color: new three.Color(useCustom ? this._threeModelAnimationOptions.animationMesh.custom[groupItem].color : this._threeModelOptions[groupItem].color)
 })

```

Material property of the instance mesh. Each slice is added to the scene and has the opacity set to zero. When it animates it, it is set to one.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ff058006fd42a80c9d4765f2686a90eb52c020bb.png)

The code: [maze3d-world/maze3d-es.js at 9ab1e50befa03fea3b7bd929a9b423970d9f54c6 · michaelnicol/maze3d-world · GitHub](https://github.com/michaelnicol/maze3d-world/blob/9ab1e50befa03fea3b7bd929a9b423970d9f54c6/views/maze3d-es.js)

Line 103 starts the settings. min and max opacity is what it starts at to the opacity it animates to.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/f/bf9e5267b818e5d3ed2cf79c26e5ec534c4ea190.png)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 11, 2022, 7:26pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/2 "2022-06-11T19:26:49Z")

</div>

```javascript
var renderer = new three.WebGLRenderer({
            transparent:true,
            shadowMap: {
                enabled: true
            }
        });

```

---

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [June 11, 2022, 8:01pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/3 "2022-06-11T20:01:04Z")

</div>

Thank you for the response,

Using the code you provided does not fix on the problem from testing I have done.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 12, 2022, 8:52am UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/4 "2022-06-12T08:52:13Z")

</div>

@Chaser_Code The code snippet you have shared is wrong. The renderer has no context parameters `transparent` and `shadowMap`.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 12, 2022, 9:20am UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/5 "2022-06-12T09:20:21Z")

</div>

Then that code from another github example

---

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [June 12, 2022, 3:11pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/6 "2022-06-12T15:11:56Z")

</div>

Hello Mungen87,

Thank you for the clarification,

I seem to have found some more information about my problem and have been able to narrow it down to the render order.

I made a video to summarize my issues: [three render order issue - YouTube](https://youtu.be/YR5RT0T798w)

Basically, depending on the order at which I load in my instances, it will cause either the red or the blue slices to render correctly. If I load all of the blue instances on the screen, set the opacity to zero, then do the same with the red, the blue will work while the red will not (vice versa).

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 13, 2022, 2:52pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/7 "2022-06-13T14:52:26Z")

</div>

Can you please create you transparent objects with the `depthWrite` option setting to `false`? Does this mitigate the issue?

The sorting in context of transparency is tricky and sometimes you need a completely different rendering technique to get transparency right (more or less). However, disabling depth writing is _normally_ something you want to do when setting `transparent` to `true`.

---

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [June 13, 2022, 3:28pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/8 "2022-06-13T15:28:56Z")

</div>

I edited the depthWrite of each of the Mesh Phong Materials. It seems to get close to looking correct as I can see both red and blue, but I am still having issues.

Video outlining this: [depth false issue - YouTube](https://youtu.be/EOsfcHbv-5U)

The way my program loads these objects is:

1. Load all the instances on the screen. Either load the red or the blue first depending on the users settings. Each instance material has a opacity of 1.0 to start.
2. Play all 48 animation mixers at once. Sets all of the materials to 0, and then at the right time set the opacity to 1 in order to create the slice in effect.

Does the order at which they are loaded onto the screen initially - `scene.add(slice_instance)` - correspond with the render order?

What rendering techniques can I use to mitigate this problem? I can write a function to accept the users renderer and apply the required properties if needed to get future renders to work properly. I am not knowledgeable in these settings however.

**Edit:**

I ended up just setting the alpha test to 0.5 and it solved it, but it isn’t a good solution. This is because now the animation doesn’t work if the user wants to animate start the animation from below 0.5 opacity for that slice. It also has odd affects where the opacity is either 0 or 1, it can’t be 0.6.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 13, 2022, 3:49pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/9 "2022-06-13T15:49:35Z")

</div>

The render order depends on many factory. The depth order is one of the most important. However, since objects are ordered based on their position in world space, rendering transparency is often not as expected. For best quality, you have to sort on fragment level. Order-Independent-Transparency tries to solve this issue but this approach is not trivial and not yet supported in `three.js`.

The issue you are facing is complex and sometimes it’s best to avoid transparency at all if possible.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 13, 2022, 4:06pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/10 "2022-06-13T16:06:22Z")

</div>

Maybe without transparent. Use alphaTest and pixelated texture to see boxes through holes  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/7/27384254d9ee8830188c2a12e32aed770380224c.jpeg)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 13, 2022, 5:43pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/11 "2022-06-13T17:43:06Z")

</div>

Fat wireframe [three.js examples](https://threejs.org/examples/?q=wire#webgl_lines_fat_wireframe)

---

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [June 13, 2022, 7:39pm UTC](https://discourse.threejs.org/t/render-order-issue-with-with-materials-with-lower-opacity-not-being-transparent-when-animating/39177/12 "2022-06-13T19:39:10Z")

</div>

Thank you for the clarification.

I’ll just avoid this issue altogether by not using fade-in as a animation option for my program. It will just instantly appear or slide in.

Update me if you ever implement Order-Independent-Transparency. It does sound like a complex issue.