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

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
    image
    image

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
image

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
image

I am not sure what I am doing Wrong.
Thankyou

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.

1 Like

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.

1 Like