# InstancedBufferGeometry and transparency?

**URL:** <https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722>\
**Category:** Questions\
**Tags:** instancing, transparency\
**Created:** [October 29, 2018, 6:39am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722 "2018-10-29T06:39:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![navigator117](https://avatars.discourse-cdn.com/v4/letter/n/d26b3c/32.png) [@navigator117](https://discourse.threejs.org/u/navigator117)\
**Post date:** [October 29, 2018, 6:39am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722/1 "2018-10-29T06:39:26Z")

</div>

I already implement objects in my scene use InstancedBufferGeometry which will speed up my app’s FPS with a few draw calls. Now, i want to use transparent materials, I found the z order is not correct. AFAIK, threejs sort all transparent objects from back to front for us. What about transparent instanced objects with different z? Do I need “Order Independent Transparency” for this situation?

---

<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:** [October 29, 2018, 10:15am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722/2 "2018-10-29T10:15:17Z")

</div>

Your question is essentially a duplicate of:

> <https://stackoverflow.com/questions/43502415/transparency-within-instanced-shapes>

Yes, you have to do manual tasks if you want a more or less correct transparency. “Order Independet Transparency” might be one choice, another approach (sorting buffer attributes) is discussed at the stackoverflow thread.

---

<div class="post-metadata">

**Author:** ![navigator117](https://avatars.discourse-cdn.com/v4/letter/n/d26b3c/32.png) [@navigator117](https://discourse.threejs.org/u/navigator117)\
**Post date:** [October 30, 2018, 5:04am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722/3 "2018-10-30T05:04:04Z")

</div>

But I have large amount of instanced transparent shapes with different materials, the sort will be difficult. may OIT be my only choice?

---

<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:** [October 30, 2018, 8:22am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722/4 "2018-10-30T08:22:56Z")

</div>

> [@navigator117](#):
>
> may OIT be my only choice?

Possibly. TBH, I’m not aware of a “Order Independent Transparency” implementation for `three.js` although there was a frequent demand in the last years. Any chances you have a go on this task? 😇

---

<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:** [October 30, 2018, 10:22am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722/5 "2018-10-30T10:22:54Z")

</div>

I’ve implemented a depth peel. Even with two levels you can get pretty good results. It’s difficult to manage the depth maps and apply to arbitrary materials. I wish there was a better way to extend shaders 🙂

I lost this code when leaving my last job but i could set up a repo if anyone is interested.

---

<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:** [October 30, 2018, 11:07am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-and-transparency/4722/6 "2018-10-30T11:07:25Z")

</div>

I think it would be interesting for the community to see your approach.