Aaand I figured it out shortly after!
The solution was using the built-in getViewPosition()
from the three/tsl library in order to get view. Many thanks to this comment.
For anyone interested, this is the final piece of relevant code:
export const getWorldSpaceFromDepth = Fn(() => {
// Sample depth from depth texture
const depth = viewportDepthTexture(screenUV).r;
// clip -> view
const viewPos = getViewPosition(screenUV.xy, depth, cameraProjectionMatrixInverse);
// view -> world
const worldPos = cameraWorldMatrix.mul(viewPos);
return worldPos.xyz
});
which returns the correct, camera-independent, world position of geometry withing my box (just added some alpha calcs to mask out unneeded parts with infinite depth):
p.s. It is still not clear to me why my initial approach did not work, not sure if I was doing something wrong or if there are some webgpu quirks that elude me.