Three.js: Unable to implement Depth Peeling example without changing WebGLRenderer

[taphos]

This is a continuation of #19305, which got stuck at some point

I would like to contribute an order independent transparency rendering example using Depth Peeling algorithm. Implementation requires to render transparent objects multiple times + one render of opaque objects. Current WebGLRenderer.setTransparentSort is not enough for that.
It would be nice to have an option to set whole custom WebGLRenderLists.

Additionally extendable WebGLRenderer would open alot of new opportunities, i.e. progressive rendering, custom backgrounds.. you name it.

Some stuff can be done by rendering multiple passes using EffectComposer instead, but it adds unwanted CPU overhead and increases code complexity. I suppose composer should be used for posteffects, not customizing rendering pipeline.

[pailhead]

Is this related?

https://github.com/mrdoob/three.js/pull/15312

Not sure if there is much interest for OIT examples.

[taphos]

@pailhead 1 year old PR, damn. You made just a html example. I was thinking of something reusable, similar to postprocessing examples

[pailhead]

I’m making that as well. Unfortunately I don’t know how to make it into a plug-in since it requires a one line core modification.

[pailhead]

Also then possibly related:

https://github.com/mrdoob/three.js/pull/15490

[taphos]

@pailhead

requires a one line core modification.

Exactly. Thats what this ticket is about. Core requires a design change. OIT is just an example.

[pailhead]

My stencil depth peel implementation has been cleaned up, i want to publish it as an npm module, but i'm not sure how to handle this discrepancy. It simply does not work the way three encapsulates that render buffer. Forking some version of three that only has this modification would make for one very weird dependency for such a package, and i'm not sure what effect would having that modified version live in the same package have.

I'm open to suggestions, i'm concerned that because it seems fairly useless to publish such a package, this implementation is not gaining any visibility, so both you and i in different parts of the world may end up implementing the same solution, none of which we're able to share with the world :(

[gkjohnson]

You should be able to use DepthTexture for this, no? Granted it won't work with some hardware but it's the only real way to write to a depth buffer and then read from it. If you need to change render target depth buffers in order to achieve the effect then #19447 is relevant, as well.

No one said explicitly but my hunch is that the proposed API change didn't fit into three.js' pattern for creating and managing webgl buffers. I was thinking that maybe depth buffers / textures should be set up and stored in properties independently of render targets so it can be checked if the last depth buffer is different than the current one and rebind it.

[taphos]

@gkjohnson @pailhead This ticket is about WebGLRenderer design, please create a new thread for depth peeling implementation discussion.

[pailhead]

@taphos you should edit the title then not to mention some specific algorithm.