World position from depth using webgpu/TSL

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.

3 Likes