Getting ugly color Effect while Using Post-Processing

Questions
1

I was using v0.110.0 earlier where I was using GammaFactor but I think in latest version is been deprecated.

I am using React with Threejs.
Here is the SandBox : Post Processing test - CodeSandbox

I am trying to use Temporal Anti-Aliasing(TAA) for anti-aliasing

 const taaRenderPass = new TAARenderPass(scene, camera);
 taaRenderPass.unbiased = true;
 taaRenderPass.sampleLevel = 4;
 composer.addPass(taaRenderPass);

I know I am using too high sampleLevel but its not just with this its happening with any shader/renderPass the scene get Darker.

I had set alpha:true otherwise using TAA make scene black. I think is due to SSAA, it has some
clearAlpha option to get rid of this black background.

image

To Fix this I used GammaCorrectionShader as

const gammaCorrection = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaCorrection);

which helps but I am getting these band of colors as shown below

image

Increasing the Ambient light surely remove this issue … in most cases I wolud use HDR for Lighting .

I am not sure why this is Happening and I am new to Threejs post porcessing .
Any post or explaination would be helpful .

Thankyou

2

renderer.outputEncoding = THREE.sRGBEncoding

Try this outputEncoding setting? Especially when you use GLTFLoader.

3

Thankyou for Replying ,
but I am already using these options
image

4

Oh, I neglected. Because of using post-processing, should set WebGLRenderTarget's encoding & format instead of WebGLRenderer's.

2 Likes