Hi,
I’m trying to apply a BokehPass to my scene. When I added the pass, my sRGB encoding was gone.
To compensate this, I added a gamma correction shader. But unfortunately the shader made my clear color and baked shadows appear a little too bright.
Do you have any ideas I can try to make my scene look like the original but with a BokehPass?
My code:
setInstance() {
this.instance = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true,
alpha: false,
})
this.instance.outputEncoding = THREE.sRGBEncoding
this.instance.setClearColor('#F5EFE6', 1)
this.instance.setSize(this.sizes.width, this.sizes.height)
this.instance.setPixelRatio(this.sizes.pixelRatio)
}
setPostProcess() {
this.postProcess = {}
/**
* Render pass
*/
this.postProcess.renderPass = new RenderPass(this.scene, this.camera.instance)
/**
* Bokeh pass
*/
this.postProcess.bokehPass = new BokehPass(
this.scene,
this.camera.instance,
{
focus: 21.50,
aperture: 0.001,
maxblur: 0.005,
}
)
//Gamma Correction
this.postProcess.gammaCorrection = new ShaderPass(GammaCorrectionShader)
/**
* Effect composer
*/
const RenderTargetClass = this.sizes.pixelRatio >= 2 ? THREE.WebGLRenderTarget : THREE.WebGLMultisampleRenderTarget
//const RenderTargetClass = THREE.WebGLRenderTarget
this.renderTarget = new RenderTargetClass(
this.sizes.width,
this.sizes.height,
{
generateMipmaps: false,
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
encoding: THREE.sRGBEncoding
}
)
this.postProcess.composer = new EffectComposer(this.instance, this.renderTarget)
this.postProcess.composer.addPass(this.postProcess.renderPass)
//this.postProcess.composer.addPass(this.postProcess.gammaCorrection)
this.postProcess.composer.addPass(this.postProcess.bokehPass)
this.postProcess.composer.setSize(this.sizes.width, this.sizes.height)
this.postProcess.composer.setPixelRatio(this.sizes.pixelRatio)
}