CODEWITHSUNDEEP
algorithmthree.jswebgl
pailhead
pailhead

Reputation: 5431

depth peeling invariance in webgl (and threejs)

I'm looking at what i think is the first paper for depth peeling (the simplest algorithm?) and I want to implement it with webgl, using three.js

I think I understand the concept and was able to make several peels, with some logic that looks like this:

render(scene, camera) {

    const oldAutoClear = this._renderer.autoClear
    this._renderer.autoClear = false

    setDepthPeelActive(true) //sets a global injected uniform in a singleton elsewhere, every material in the scene has onBeforeRender injected with additional logic and uniforms

    let ping
    let pong

    for (let i = 0; i < this._numPasses; i++) {
        const pingPong = i % 2 === 0

        ping = pingPong ? 1 : 0
        pong = pingPong ? 0 : 1

        const writeRGBA = this._screenRGBA[i]
        const writeDepth = this._screenDepth[ping]

        setDepthPeelPassNumber(i) //was going to try increasing the polygonOffsetUnits here globally, 

        if (i > 0) {
            //all but first pass write to depth
            const readDepth = this._screenDepth[pong]
            setDepthPeelFirstPass(false)
            setDepthPeelPrevDepthTexture(readDepth)
            this._depthMaterial.uniforms.uFirstPass.value = 0
            this._depthMaterial.uniforms.uPrevDepthTex.value = readDepth
        } else {
            //first pass just renders to depth
            setDepthPeelFirstPass(true)
            setDepthPeelPrevDepthTexture(null)
            this._depthMaterial.uniforms.uFirstPass.value = 1
            this._depthMaterial.uniforms.uPrevDepthTex.value = null
        }

        scene.overrideMaterial = this._depthMaterial 

        this._renderer.render(scene, camera, writeDepth, true)

        scene.overrideMaterial = null
        this._renderer.render(scene, camera, writeRGBA, true)
    }

    this._quad.material = this._blitMaterial
    // this._blitMaterial.uniforms.uTexture.value = this._screenDepth[ping]
    this._blitMaterial.uniforms.uTexture.value = this._screenRGBA[
        this._currentBlitTex
    ]

    console.log(this._currentBlitTex)

    this._renderer.render(this._scene, this._camera)

    this._renderer.autoClear = oldAutoClear
}

I'm using gl_FragCoord.z to do the test, and packing the depth into a 8bit RGBA texture, with a shader that looks like this:

float depth = gl_FragCoord.z;

vec4 pp = packDepthToRGBA( depth );

if( uFirstPass == 0 ){

    float prevDepth = unpackRGBAToDepth( texture2D( uPrevDepthTex , vSS));

    if( depth <= prevDepth + 0.0001) {
        discard;
    }

}

gl_FragColor = pp;

Varying vSS is computed in the vertex shader, after the projection:

vSS.xy = gl_Position.xy * .5 + .5;

The basic idea seems to work and i get peels, but only if i using the fudge factor. It looks like it fails though as the angle gets more obtuse (which is why polygonOffset needs both the factor and units, to account for the slope?).

I didn't understand at all how the invariance is solved. I don't understand how the mentioned extension is being used other than it seems to be overriding the fragment depth, but with what?

I must admit that I'm not sure even which interpolation is being referred to here since every pixel is aligned, i'm just using nearest filtering.

I did see some hints about depth buffer precision, but not really understanding the issue, i wanted to try packing the depth into only three channels and see what happens.

Having such a small fudge factor make it sort of work tells me that likely all these sampled and computed depths do seem to exist in the same space. But this seems to be the same issue as if using gl.EQUAL for depth testing? For shits and giggles i tried to override the depth with the unpacked depth immediately after packing it, but it didn't seem to do anything.

edit

Increasing the polygon offset with each peel seems to have done the trick. I got some fighting though with the lines but i think it's due to the fact that i was already using offset to draw them and i need to include that in the peel offset. I'd still love to understand more about the problem.

Upvotes: 2

Views: 901

Answers (1)

Ripi2
Ripi2

Reputation: 7198

The depth buffer stores depths :) Depending on the 'far' and 'near' planes the perspective projection tends to set the depths of the points "stacked" in just a short part of the buffer. It's not linear in z. You can see this on your own setting a different color depending on the depth and render some triangle that takes most of near-far distance.

A shadow map stores depths (distances to light)... calculated after projection. Later, in the second or following pass, you will compare those depths, which are "stacked", which makes some comparisons to fail due to they are very similar values: hazardous variances.

You can user a more fine-grained depth buffer, 24 bits instead of 16 or 8 bits. This may solve part of the problem.

There's another issue: the perspective division or z/w, needed to get normalized device coordinates (NDC). It occurs after vertex shader, so gl_FragDepth = gl_FragCoord.z is affected.

The other approach is to store the depths calculated in some space that doesn't suffer "stacking" nor perspective division. Camera space is one. In other words, you can calculate the depth undoing projection in the vertex shader.

The article you link to is for old fixed-pipeline, without shaders. It shows a NVIDIA extension to deal with these variances.

Upvotes: 2

Related Questions