dubois
August 18, 2024, 7:49pm
47
Let me leave a few links too,
I’m experimenting with depth peeling using three.js.
I’ve struggled a bit with achieving the correct blending. I have two examples:
The first one, uses 4 buffers and composes two layers in the fragment shader in its own pass. Here i was a bit confused about alpha multiplication, but i ended up getting the correct blending with the background. Ie. when i switch between the normal mode and depth peel mode, boxes blend the same with the background and opaque objects underneath.
https://raw.githa…
Discussion for sharing stencil buffers, this is from 2018 (wow still open!!) not sure if things changed but there’s mention of depth textures. @gkjohnson is a collaborator I believe, maybe he can push it.
mrdoob:dev ← pailhead:own-depthstencil-target-buffer
opened 08:23PM - 29 Dec 18 UTC
### Problem
Multiple `WebGLRenderTarget` can't share the same depth / stenci… l render buffer because `WebGLRenderer` creates them in a private cache. This is possible to do with webgl, [but not with three.js. ](https://github.com/mrdoob/three.js/issues/15440)
### Proposal
Have the `WebGLRenderer` attempt to use an existing buffer if one is provided. And allow the targets to be used so:
```
targetA.ownDepthBuffer = buffer
targetB.ownDepthBuffer = buffer
```
### Use case
This [depth peel example](https://raw.githack.com/pailhead/three.js/depth-peel-stencil/examples/webgl_materials_depthpeel.html), goes from not being interactive to working on phones when stencil masking is used ([video](https://www.youtube.com/watch?v=nMfQeotbN8s)).
### Argument for
There are a few things in three.js that already work like this i think. `defines`, `customDepthMaterial` are the two that pop to mind - you could set them, and they would make `WebGLRenderer` do certain things, but were not present in documentation for a long time. This does not change the behavior of the renderer in any way, and allows WebGL to be fully utilized.
### Optional
Document it:
> Sets the render buffer on the target. If one is not provided, three creates one internally for this target. You can share render buffers between targets:
```
const gl = renderer.getContext()
const buffer = gl.createRenderBuffer()
targetA.ownDepthBuffer = buffer
targetB.ownDepthBuffer = buffer
```
### Future (if accepted)
Make an API:
```
const buffer = new THREE.RenderBuffer(config)
targetA.depthBuffer = buffer
targetB.depthBuffer = buffer
```
This was also proposed as an example, was stuck for a few years so I closed it:
mrdoob:dev ← pailhead:depth-peel-example
opened 12:01AM - 26 Nov 18 UTC
Hi, I've seen requests for something like this pop up in forums and on stack ove… rflow. 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.
I think that my demo is still the oldest, if any credit can be thrown my way it would be very much appreciated. I am having a really hard time proving that I know anything about threejs, and it’s hard to put food on the table.
1 Like