Help: Preserving Bright White Canvas Background While Enabling Color Correction By Output Pass

Hello, Three.js community! :wave:

I’m currently working on a scene where I want the canvas background to remain a bright white color. However, when I enable Outpass for color correction, my background color shifts from a bright white to a dull white. This change impacts the overall look of my scene, and I’m struggling to preserve the original brightness of the background.

Image 1: Without PostProcessing (background White :ok_hand: )

Image2: Composer Enabled and Render Pass (background White :ok_hand: )

Image 3: Composer Enabled With Unreal Bloom (background White :ok_hand: )

Image 4: Composer With Output Pass for Color correction (background :bug: GREY LOST MY COLOR)

My PostProcessing Passes: Composer → RenderPass → Bloom Pass → SSAO → OutputPass → FXAA

Code Snippet:

constructor() {
this.instance = new WebGLRenderer({
canvas: this.canvas,
antialias: true,
alpha: false,
failIfMajorPerformanceCaveat: true,
powerPreference: “high-performance”,
preserveDrawingBuffer: true,
});

this.instance.setClearColor(0xffffff) //My White Color
this.instance.shadowMap.type = BasicShadowMap;
this.instance.toneMapping = NeutralToneMapping;
this.instance.toneMappingExposure = .5;
this.instance.pixelRatio = this.sizes.pixelRatio;
this.instance.outputColorSpace = SRGBColorSpace;

this.createComposer();

}

createComposer() {

//creating composer
this.postProcess.composer = new EffectComposer(this.instance);
this.postProcess.composer.setSize(this.sizes.width, this.sizes.height);
this.postProcess.composer.setPixelRatio(this.sizes.pixelRatio);

//Render Pass
this.postProcess.RenderPass = new RenderPass(this.experience.scene, this.camera.instance, null);
this.postProcess.RenderPass.enabled = true;
this.postProcess.composer.addPass(this.postProcess.RenderPass);

// bloom pass
this.postProcess.bloomPass = new UnrealBloomPass(new Vector2(this.sizes.width, this.sizes.height), .2, 0, .2);
this.postProcess.bloomPass.enabled = false;
this.postProcess.composer.addPass(this.postProcess.bloomPass);


// SSAO Pass
this.postProcess.SSAOPass = new SSAOPass(this.experience.scene, this.camera.instance, this.sizes.width, this.sizes.height);
this.postProcess.SSAOPass.enabled = false;
this.postProcess.composer.addPass(this.postProcess.SSAOPass);


//Outputpass
this.postProcess.outputPass = new OutputPass();
this.postProcess.outputPass.clear = true;
this.postProcess.outputPass.enabled = true;
this.postProcess.outputPass.renderToScreen = true;
this.gui.add(this.postProcess.outputPass, 'enabled').name("Output Pass")
this.postProcess.composer.addPass(this.postProcess.outputPass);

//fxaa
this.postProcess.fxaaPass = new ShaderPass(FXAAShader);
this.postProcess.fxaaPass.enabled = true;
this.gui.add(this.postProcess.fxaaPass, 'enabled').name("Fxaa Pass")
this.postProcess.fxaaPass.material.uniforms['resolution'].value.x = 1 / (this.experience.sizes.width * this.experience.sizes.pixelRatio);
this.postProcess.fxaaPass.material.uniforms['resolution'].value.y = 1 / (this.experience.sizes.height * this.experience.sizes.pixelRatio);
this.postProcess.composer.addPass(this.postProcess.fxaaPass);

}

Any help suggestion guys please …!