Texture are Darker on Initial Load (while using post-processing).what am I missing here?

[SeeOn]

I am using same Gltf/glb model twice for my simplicity I am using Sphere model

1. The initial load with texture from gltf/glb
2. Traversing through the gltf/glb and applying the same texture
   by doing this
   
   

Here is the JSFiddle Code: Darker Color - JSFiddle - Code Playground

Scenario 1:
simply loading model and basic post processing setup (coz I want to use Anti-aliasing)

the Left sphere is original model with prebuilt texture and on Right one I am applying same texture .
the square in center is the original Texture

Scenario 2:
Now I am adding TAA( Temporal anti-aliasing) with these setting

which makes the scene Darker. so the issue is initial load of model is always dark

to Fix this issue I am adding GammaCorrectionShader as

this is good for loading model with texture (Left Sphere) …but when I apply texture again which result in more fade in color(Right Sphere) and also changes Background color

here is the Renderer setting

I am not sure what I am doing Wrong.
Thankyou

[Mugen87]

When doing post-processing, you normally should not alter the outputEncoding and tone mapping properties of the renderer. Color space conversion and tone mapping should be applied via additional passes like in three.js webgl - adaptive tone-mapping. Besides do not change the encoding property of render targets for EffectComposer.

As a rule of thumb, keep everything in linear space until you reach the end of your rendering pipeline. Then apply tone mapping first, then color space conversion.

[SeeOn]

Thank you for replying @Mugen87. I did structure the code the way you have mentioned.
I found out the issue was the texture I was applying, I was not setting its map.encoding=THREE.sRGBEncoding as you mention should happen at the end.
And it’s working and both look the same.

[Anish_Kumar]

@Mugen87 @SeeOn
Hey, I am also adding some post-processing effects on my Three.js Scene to add depth of feild effects,
but here I am getting the same issue. The scene or maybe model is getting darker and the whole scene is looking darker. How can I overcome this issue. The below I provided the code.

init() {
        console.log("Initializing EffectComposer!")

        // EffectComposer
        this.composer = new EffectComposer(this.renderer);
		this.composer.setSize(this.sizes.x, this.sizes.y);
		this.composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

        // Passes
        this.bokehPass = new BokehPass(this.scene, this.camera, {
            focus: 1.0,
            aperture: 0.025,
            maxblur: 0.006,
        });
    
        this.gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);  
        
        // Adding Passes to EffectComposer
        this.composer.addPass(new RenderPass(this.scene, this.camera));
        this.composer.addPass(this.bokehPass);
        this.composer.addPass(this.fxaaPass);
        this.composer.addPass(this.gammaCorrectionPass);
    }

Before Adding Post-Processing:

After Adding Post-Processing: