# Order independent transparency

**URL:** <https://discourse.threejs.org/t/order-independent-transparency/2810>\
**Category:** Discussion\
**Tags:** transparency, geometry, shaders\
**Created:** [May 11, 2018, 10:03am UTC](https://discourse.threejs.org/t/order-independent-transparency/2810 "2018-05-11T10:03:10Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [May 11, 2018, 10:03am UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/1 "2018-05-11T10:03:10Z")

</div>

Hello guy, I would like porting my opengl application on the web. I would like know if it’s possibile implement a depth peeling in three.js, I need to render a scene with multiple transparent overlap objects.  
If this it’s possible please let me a source example or a link.  
Thanks.

---

<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:** [May 11, 2018, 1:11pm UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/2 "2018-05-11T13:11:29Z")

</div>

Related:

> <https://github.com/mrdoob/three.js/issues/9977>

---

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [May 11, 2018, 3:45pm UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/3 "2018-05-11T15:45:18Z")

</div>

thanks for reply. what’s are you need to know? I ask me if it’s possibile implement in three.js this:  
[https://tsherif.github.io/webgl2examples/oit.html](https://tsherif.github.io/webgl2examples/oit.html)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 11, 2018, 4:54pm UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/4 "2018-05-11T16:54:54Z")

</div>

It is possible, you need to hack in webgl 2 somehow. (If you want that specific implementation)

---

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [May 11, 2018, 11:04pm UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/5 "2018-05-11T23:04:48Z")

</div>

it’s possible use three.js and webgl2 in the same application to do it?

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 11, 2018, 11:12pm UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/6 "2018-05-11T23:12:04Z")

</div>

It is not easy but it is possible.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 11, 2018, 11:13pm UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/7 "2018-05-11T23:13:28Z")

</div>

Why do you need this to be done in WebGL 2? Depth peeling can be done perfectly fine with WebGL 1, i know, i’ve done it.

How are you porting your app if you are asking about something like this. Doesn’t your openGL already implement some kind of depth peeling? Depending on what algorithm is used, you can or cannot do it with webgl]

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [May 12, 2018, 1:12am UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/8 "2018-05-12T01:12:07Z")

</div>

To answer your question::

1. The example you shared, does not implement/use depth peeling.
2. That example implements the technique from this paper::  
[http://jcgt.org/published/0002/02/09/paper.pdf](http://jcgt.org/published/0002/02/09/paper.pdf)
3. In three.js(using webGL1) it is possible to implement the above example.
4. It is also possible to do depth peeling in three.js without using webGL2.

---

<div class="post-metadata">

**Author:** ![ale211734](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ale211734/32/5146_2.png) [@ale211734](https://discourse.threejs.org/u/ale211734)\
**Post date:** [May 12, 2018, 8:27am UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/9 "2018-05-12T08:27:09Z")

</div>

Can you give me one example in three.js where is implemented depth peeling? Thanks.

---

<div class="post-metadata">

**Author:** ![spidersharma](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@spidersharma](https://discourse.threejs.org/u/spidersharma)\
**Post date:** [May 14, 2018, 6:06am UTC](https://discourse.threejs.org/t/order-independent-transparency/2810/10 "2018-05-14T06:06:28Z")

</div>

There is no example in three.js.  
But, it isn’t too hard to capture the depth layers in different render targets.  
In the first pass render the depth and set the depth function such that(GREATER) the farthest depths are written.  
In the next pass in addition to the above, also compare it with the depth captured in the previous pass. That way in each pass you are writing only the depths which are less than previously captured depth, but since the depth function is GREATER, you also are making sure that the farthest depths are written.  
Hope it helps.