Position from depth

Help & Support
1

So I’ve been trying to reconstruct the position from depth, with no success …

This is how I construct inverse projection matrix:

        var vm = this.camera.camera.viewMatrix.clone();
        var pm = this.camera.camera.projectionMatrix.clone();
        var f = new pc.Mat4();
        f.mul2(pm, vm);
        f.invert();
        scope.resolve("invViewProj").setValue( f.data );

These are my shader functions:

float unpackFloat(vec4 rgbaDepth) {
    const vec4 bitShift = vec4(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0);
    return dot(rgbaDepth, bitShift);
}

vec3 depthToWorld(float depth, vec2 texcoord) {
    // get screen-space position
    vec4 pos;
    pos.xy = texcoord * 2.0 - 1.0;
    pos.z = depth * 2.0 - 1.0;
    pos.w = 1.0;

    // get world-space position
    pos = invViewProj * pos; // or pos * mat, depends on the matrix-representation
    pos /= pos.w;

    vec3 worldPos = pos.xyz;

    return worldPos;
}

And the output:

gl_FragColor = vec4( depthToWorld(unpackFloat(depth), vUv0), 1 );

Tried many different combinations / inversions, all leads to rainbows, but not the correct result.
Any ideas?
link: https://playcanvas.com/editor/scene/425968

2

So I’ve managed to render a light frustum, finally.
Yet I’m still strugglin to reconstruct world position from depth. Is the depth already linear after its unpacked? because it looks like it is, but the result is completely wrong. Screen to world function works as intended, tested it by setting max depth and ray marching from screen direction into the light volume.

float unpackFloat(vec4 rgbaDepth) {
    const vec4 bitShift = vec4(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0);
    return dot(rgbaDepth, bitShift);
}

float linearizeDepth(float depth) {
    float f = 100.0;
    float n = 1.0;
    float z = (2.0 * n) / (f + n - depth * (f - n));
    return z;
}


/**
  *  m = inverse projection  matrix.
  *  Transforms screen x,y,z to world space position.
  */
vec3 screenToWorld(mat4 m, vec3 v)
{
    vec3 sPoint = vec3(v.x, v.y, 1.0 - v.z) * 2.0 - 1.0;  
    
    vec4 wPoint = m * vec4(sPoint, 1); 
    wPoint /= wPoint.w;
    
    return wPoint.xyz;
}

/**
  *  m = projection * view 
  *  Transforms a point in world position, to screen space x,y coordinates.
  */
vec2 worldToScreen(mat4 m, vec3 v)
{
    vec4 tPoint = m * vec4(v, 1);
        
    vec2 screenCoord = vec2(tPoint.x, tPoint.y);
    screenCoord.x = (screenCoord.x / tPoint.w + 1.0) * 0.5;
    screenCoord.y = (screenCoord.y / tPoint.w + 1.0) * 0.5;

    return screenCoord;
}