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.
1 Like
Related:
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
It is possible, you need to hack in webgl 2 somehow. (If you want that specific implementation)
it’s possible use three.js and webgl2 in the same application to do it?
It is not easy but it is possible.
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]
To answer your question::
- The example you shared, does not implement/use depth peeling.
- That example implements the technique from this paper::
http://jcgt.org/published/0002/02/09/paper.pdf - In three.js(using webGL1) it is possible to implement the above example.
- It is also possible to do depth peeling in three.js without using webGL2.
1 Like
Can you give me one example in three.js where is implemented depth peeling? Thanks.
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.