Postprocessing | DepthOfFieldEffect | does not work correctly, missing depth

First of all would like to say thank you to the author of the postprocessing library for three.js, very easy to use, especially custom effects. I am not sure if this is the proper forum to ask help with postprocessing library, but I was not able to find a space where to ask a question on authors github page.

I am trying to setup DepthOfFieldEffect Using this example:

It looks like by some reason my Depth is empty and is not taken in the account.
Also I think DepthEffect should create depth map, but if I set blending mode from SKIP to NORMAL to see it, it is just a white screen. Also I do not understand how this depth map would be transferred to the CoC material but I can’t find any reference, basically, if you remove DepthEffect completely nothing will break or change in my example. So I feel something is wrong with my depth. I am using NPM manager so I do not know how to place this code to the codepen, hope code snippets will be enough, but if not I will try to create simpler example with my problem on the codepen. Also I am not using antialiasing like in the example, I just do not need antialiasing on high res screens (MacBook, iPhone, iPad…)

Here is my code pieces:

this.renderer = new THREE.WebGLRenderer({
powerPreference: “high-performance”,
antialias: false,
stencil: false,
depth: false
});, 15, -18);
this.controls = new OrbitControls(, this.renderer.domElement); = new THREE.Vector3(-16.4265, -0.6513, -1.6365);;

// postprocessing recommended settings for the render pass:

renderPass() {

// passes:

this.depthOfFieldEffect = new DepthOfFieldEffect(, {
focusDistance: 0.02,
focalLength: 0.058,
bokehScale: 2.0,
height: 1080,

this.depthEffect = new DepthEffect({
blendFunction: BlendFunction.SKIP


this.cocTextureEffect = new TextureEffect({
blendFunction: BlendFunction.SKIP,
texture: this.depthOfFieldEffect.renderTargetCoC.texture

this.composer = new EffectComposer(this.renderer);
this.composer.addPass(new RenderPass(this.scene,;
this.effectA = new EffectPass(, this.depthOfFieldEffect, this.cocTextureEffect, this.depthEffect );
this.composer.addPass (this.effectA)


const cocMaterial = this.depthOfFieldEffect.circleOfConfusionMaterial;

// GUI settings

   "edge blur kernel": this.depthOfFieldEffect.blurPass.kernelSize,
     "focus": cocMaterial.uniforms.focusDistance.value,
     "focal length": cocMaterial.uniforms.focalLength.value

// renderloop


effects that rely on depth often need narrow near/far planes, or you enable logarithmicDepthBuffer. if the depthbuffer is white it indicates a problem, you should see near objects appearing black, fading out in distance. i have an example where i use dof without changing near/far planes and it worked anyway, maybe you can check the focus and focal values: