Skip to content

Conversation

@pailhead
Copy link
Contributor

@pailhead pailhead commented Nov 26, 2018

Hi, I've seen requests for something like this pop up in forums and on stack overflow. This is my naive implementation of depth peeling. I need to do more research on this myself but this shows the basic idea of the approach. I was wondering if it could be a useful example?

https://raw.githack.com/pailhead/three.js/depth-peel-example/examples/webgl_materials_depthpeel.html

I'm also not entirely sure if i even handled the blending correctly, since it is a bit different than the default behavior, but i can't tell is it because it's missing pieces below whats being rendered.

@mrdoob
Copy link
Owner

mrdoob commented Nov 26, 2018

Looking good!

I would rename defaultMode to enabled. And... how's monochrome related to this feature?

@pailhead
Copy link
Contributor Author

pailhead commented Nov 26, 2018

monochromatic was just left there from debugging, to see the effect different. I was thinking of adding a more complex mesh (i struggled with transparency on mechanical parts, like plates with holes) but is it needed? Ie. any other thoughts? Some comments in the code or a description on the page might also be useful.

@mrdoob mrdoob added this to the r100 milestone Nov 27, 2018
@pailhead
Copy link
Contributor Author

Actually it's fairly self explanatory. All i can think of from my naive approach is trying to write to the main buffer instead of an off screen one. I'll remove the [wip].

@pailhead pailhead changed the title [wip] depth peel example depth peel example Nov 27, 2018
@pailhead
Copy link
Contributor Author

This one's really messy but it does it with less buffers, and stencil i hope might speed things up a bit. I'm struggling getting the same blending though:

https://raw.githack.com/pailhead/three.js/depth-peel-stencil/examples/webgl_materials_depthpeel.html

@mrdoob mrdoob modified the milestones: r100, r101 Dec 31, 2018
@pailhead
Copy link
Contributor Author

pailhead commented Jan 1, 2019

Any concerns on landing this?

@stur86
Copy link

stur86 commented Jan 24, 2019

I'm following this too. Where is the best place to get the most up-to-date code right now, so I can try and see if I can make my own implementation?

@pailhead
Copy link
Contributor Author

Most up to date code for what?

@stur86
Copy link

stur86 commented Jan 24, 2019

Most up to date code for what?

Your example. Should I just rip the files from the githack?

@pailhead
Copy link
Contributor Author

pailhead commented Jan 24, 2019

Ah yes. It’s all contained within that example file. Unfortunately the other approach doesn’t work, because threejs locks the render buffers to render targets :(

So the second link won’t work for you unless you also use the build from that branch. The first one will but it’s not very fast.

@mrdoob mrdoob modified the milestones: r101, r102 Jan 31, 2019
@mrdoob mrdoob modified the milestones: r102, r103 Feb 28, 2019
@mrdoob mrdoob modified the milestones: r103, r104 Mar 27, 2019
@mrdoob mrdoob modified the milestones: r104, r105 Apr 24, 2019
@mrdoob mrdoob modified the milestones: r105, r106 May 30, 2019
@mrdoob mrdoob removed this from the r106 milestone Jun 26, 2019
@mrdoob mrdoob added this to the r136 milestone Nov 26, 2021
@mrdoob mrdoob modified the milestones: r136, r137 Dec 24, 2021
@mrdoob mrdoob modified the milestones: r137, r138 Jan 26, 2022
@mrdoob mrdoob modified the milestones: r138, r139 Feb 23, 2022
@mrdoob mrdoob modified the milestones: r139, r140 Mar 24, 2022
@mrdoob mrdoob modified the milestones: r140, r141 Apr 30, 2022
@mrdoob mrdoob modified the milestones: r141, r142 May 26, 2022
@mrdoob mrdoob modified the milestones: r142, r143 Jun 29, 2022
@mrdoob mrdoob modified the milestones: r143, r144 Jul 28, 2022
@mrdoob mrdoob modified the milestones: r144, r145 Aug 31, 2022
@mrdoob mrdoob modified the milestones: r145, r146 Sep 29, 2022
@mrdoob mrdoob modified the milestones: r146, r147 Oct 27, 2022
@Mugen87
Copy link
Collaborator

Mugen87 commented Nov 7, 2022

Closing in favor of #24903.

@trusktr
Copy link
Contributor

trusktr commented May 9, 2025

This one has significantly better visual results than #24903 depending on the use case. It would be nice if multiple OIT methods could be accepted, with differing API names, rather than only a single one.

Having this as just an example would be great, until someone else can take it further to integrate it as a feature in a renderer and/or material.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants