EffectComposer's depth buffer is not precise

I have a model that renders correctly when rendered directly on Canvas (default frame buffer).

(Captures of 2 consecutive draw calls)

But when it is rendered on a intermediate frame buffer of EffectComposer, the body part pops out of the cloth like this

I suspect the precision of the depth format is not good enough to decide which is upfront.

I tried specifying depth texture of EffectComposer like this

this.composer = new EffectComposer(
  renderer,
  new WebGLRenderTarget(
    width,
    height,
    {
      minFilter: LinearFilter,
      magFilter: LinearFilter,
      format: RGBAFormat,
      depthTexture: new DepthTexture(/* Tried various options here */)
    }
  );
)

but didn’t work.

It only happens on Safari, MacOS which uses WebGL 1.

Can anyone help me to fix it?

I’m afraid this line does not make sense. Try to replace it with type: FloatType and try again.

Related topic: Effect Composer Gamma Output Difference - #14 by Mugen87

Thank you for answering :grinning:

I tried setting type: FloatType but didn’t work. The result was the same.

  const parameters: WebGLRenderTargetOptions = {
    minFilter: LinearFilter,
    magFilter: LinearFilter,
    format: RGBAFormat,
    type: FloatType,
  };

and what I meant by the line

was that I tried setting the type of depth texture to more precise format like FloatType

  const parameters: WebGLRenderTargetOptions = {
    minFilter: LinearFilter,
    magFilter: LinearFilter,
    format: RGBAFormat,
    depthTexture: new DepthTexture(
      _width,
      _height,
      FloatType,
      undefined,
      undefined,
      undefined,
      LinearFilter,
      LinearFilter,
      2
    ),
  };

Additionally the symptom gets worse as camera moves far and better as camera gets close

What could it mean?

I tried to make EffectComposer to use more precise format for depth buffer but failed. I think it’s got to do with WebGL implementation of Safari which I can’t help with.

Instead I configured camera projection in a way that z-values can be distributed with more variance so the comparison can be achieved with poor precision. It involves increasing Near and FOV, reducing Far, and scaling the model.

Problem is solved but still I would like to know if there’s a way to use more precise depth format for EffectComposer.