Depth Texture Precision

[KallkaGo]

Is there any way to improve the precision of the depth texture? I tried passing in the depthtexture myself or getting it from the pipeline, but when I converted it to Linear01, I saw obvious banding ？

[vanruesc]

Judging depth precision by the visible banding on screen is not a reliable approach. Banding only occurs because you're rendering depth to an 8-bit buffer.

Possible ways to improve depth precision are using reverseDepthBuffer and pushing out the near plane of the camera to something like 0.3 or 1.0.

[KallkaGo]

These bands affect my calculations when I use the sobel operator to calculate edges

float LinearEyeDepth(float depth) {
  float x = 1. - uCameraFar / uCameraNear;
  float y = uCameraFar / uCameraNear;
  float z = x / uCameraFar;
  float w = y / uCameraFar;
  return 1.0 / (z * depth + w);
}


float SobelSampleDepth(sampler2D s, vec2 uv, vec3 offset) {
  float pixelCenter = LinearEyeDepth(texture2D(s, uv).r);
  float pixelLeft = LinearEyeDepth(texture2D(s, uv - offset.xz).r);
  float pixelRight = LinearEyeDepth(texture2D(s, uv + offset.xz).r);
  float pixelUp = LinearEyeDepth(texture2D(s, uv + offset.zy).r);
  float pixelDown = LinearEyeDepth(texture2D(s, uv - offset.zy).r);

  return abs(pixelLeft - pixelCenter) +
    abs(pixelRight - pixelCenter) +
    abs(pixelUp - pixelCenter) +
    abs(pixelDown - pixelCenter);
}


void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {

  vec4 outlineColor = vec4(0.0, 0.0, 0.0, 1.0);

  vec3 texel = vec3(1. / resolution.x, 1. / resolution.y, 0.0);

  float sobelDepth = SobelSampleDepth(uDepthTexture, uv, texel);

  sobelDepth = pow(abs(clamp(sobelDepth * uOutLineDepthMul, 0.0, 1.0)), uOutLineDepthBias);

  outputColor = vec4(vec3(sobelDepth ),1.);
}

By the way, the LinearEyeDepth and LinearEyeDepth is Unity converts to linear 01 or Camera space depth function

in unity source code:

// Z buffer to linear 0..1 depth
inline float Linear01Depth( float z )
{
    return 1.0 / (_ZBufferParams.x * z + _ZBufferParams.y);
}

// Z buffer to linear depth
inline float LinearEyeDepth( float z )
{
    return 1.0 / (_ZBufferParams.z * z + _ZBufferParams.w);
}

about _ZBufferParams:

The reason I judged the accuracy was not enough was that I used the same shader to sample in Babylon , but there I could choose set force32bitsFloat is true to fix

in threejs:

in Babylon:

Is this a problem due to lack of precision? Or am I missing something?

[vanruesc]

Try enabling the stencil buffer to force 24bit depth:

const composer = new EffectComposer(renderer, { stencilBuffer: true, ... });

[vanruesc]

Oh that's strange, CSB didn't update the URL after I forked it. Here's the correct link:
https://codesandbox.io/p/devbox/sobel-fixed-pwz43r

[KallkaGo]

Oh great you fixed it, I saw that you used the depthbuffer in the pipeline and set stencilBuffer to true, the bands disappeared, when I used my own depthBuffer, even if I set stencilBuffer to true, there are still bands, so if I want to use my own depthBuffer, what changes should I make?

[KallkaGo]

I found that you replaced the function in LinearEyeDepth with the function of threejs packing, which corresponds to Linear01Depth in unity.

        float Linear01Depth(float depth) {
		float x = 1. - cameraFar / cameraNear;
		float y = cameraFar / cameraNear;
		float z = x / cameraFar;
		float w = y / cameraFar;
		return 1.0 / (x * depth + y);
	}

If it is converted to Linear 01, the banding can indeed be eliminated. If it is converted to Linear Space (View Space), there will indeed be banding. I guess it may be caused by too large a change and insufficient precision. Thank you for your demo. After comprehensive consideration, it is better to perform the Sobel operator in Linear 01 to eliminate the influence of banding. Thank you

[vanruesc]

when I used my own depthBuffer, even if I set stencilBuffer to true, there are still bands

The stencilBuffer setting of the composer doesn't affect custom depth textures. It just switches to the sized UnsignedInt248Format for the internal depth texture which guarantees 24 bits of precision on devices that would only use 16 bits for UnsignedIntType.

If you want to render your own depth texture, you could just use FloatType. However, rendering the scene depth requires you to render the entire scene a second time whereas the internal depth texture in postprocessing is rendered by the RenderPass for free. You can also override Effect.setDepthTexture(depthTexture, depthPacking = BasicDepthPacking) if you want to do something else with that depth texture, like passing it into a subpass.

[KallkaGo]

Ok thanks, now I know how to fix it