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?
Your question is essentially a duplicate of:
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.
1 Like
But I have large amount of instanced transparent shapes with different materials, the sort will be difficult. 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? 
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.
1 Like
I think it would be interesting for the community to see your approach.