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:
https://vanruesc.github.io/postprocessing/public/demo/#depth-of-field
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
});
this.camera.position.set(-18, 15, -18);
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.target = new THREE.Vector3(-16.4265, -0.6513, -1.6365);
this.camera.lookAt( this.target);
// postprocessing recommended settings for the render pass:
renderPass() {
// passes:
this.depthOfFieldEffect = new DepthOfFieldEffect(this.camera, {
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.camera));
this.effectA = new EffectPass(this.camera, 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
this.composer.render(this.clock.getDelta());