Models look dark after applying SSAO

Questions
,
1

Hi everyone,

I am trying to apply Ambient Occlusion (SSAO paired with SSAA) post-processing, however, for some reason it makes the model look very dark. Here is the part of the code that applies post processing:

function initPostprocessing(
  composer: EffectComposer,
  renderer: WebGLRenderer,
  scene: Scene,
  camera: PerspectiveCamera,
  width: number,
  height: number
) {
  const ssaoPass = new SSAOPass(scene, camera, width, height);
  ssaoPass.kernelRadius = 1;
  ssaoPass.minDistance = 0.0001;
  ssaoPass.maxDistance = 0.02;
  composer.addPass(ssaoPass);

  const ssaaRenderPass = new SSAARenderPass(scene, camera);
  composer.addPass(ssaaRenderPass);

  composer.setPixelRatio(1);

  ssaaRenderPass.clearAlpha = renderer.getClearAlpha();
  ssaaRenderPass.sampleLevel = 0;
  ssaaRenderPass.unbiased = true;
  ssaaRenderPass.enabled = true;

  /**
   * DEBUG
   */
  // Init gui
  const gui = new GUI();
 
  gui.add(ssaoPass, 'kernelRadius').min(0).max(32);
  gui.add(ssaoPass, 'minDistance').min(0.001).max(0.02);
  gui.add(ssaoPass, 'maxDistance').min(0.01).max(0.3);
}

And then I render it as follows:

      renderer?.setAnimationLoop(() => {
        controls.update();
        renderer.render(scene!, camera!);
        composer.render();
      });

Screenshots with and without post-processing:

image
image1510×1102 62.9 KB

image
image1344×1256 74.5 KB

I tried different things, but couldn’t make it look normal with Ambient Occlusion. Any help is appreciated.

Best regards,
Sergii

2

adding GammaCorrectionShader should solve the problem.

3

It does, but then the effect of SSAO becomes completely invisible.

4

does it work when you remove SSAA Render Pass from the composer?

ssaaRenderPass.sampleLevel = 0; tells me there is no SSAA.

5

SSAA pass doesn’t have any effect there, so it can be removed and the result will be the same (which I did).

6

Also, when you have composer.render(); in your code, you don’t need renderer.render(scene!, camera!);.