Three.js: SSAARenderPass affects color and contrast when increasing the sampleLevel

[Fluqz]

Describe the bug

SSAARenderPass will affect color on dark materials. I suppose it should only do antialiasing. Using the gammaCorrection as well, increases the effect drastically.
The problem seems to be the sampleLevel property. When set to 1, it is not noticable, but when increasing the value, pretty fast contrast increases as well

To Reproduce
https://jsfiddle.net/em3crz91/2/

  SSAA = new THREE.SSAARenderPass(scene, camera, 0x000000, 0);
  SSAA.sampleLevel = 4;

Expected behavior

Should not affect any color or material. Its for antialiasing only

• Device: Desktop
• OS: Windows, MacOS
• Browser: Chrome, Firefox, Safari
• Three.js version: r122

[mrdoob]

Please, use the provided template for reporting bugs.

[Mugen87]

This precision related issue is caused by render target's default texture type . You can mitigate it by strictly using THREE.FloatType. Check out the difference here:

https://jsfiddle.net/wh9kojde/

This issue was also discussed at the forum: https://discourse.threejs.org/t/effect-composer-gamma-output-difference/12039

[Fluqz]

https://discourse.threejs.org/t/ssaa-gammacorrection-dark-colors-issue/15321/11

[gkjohnson]

@Mugen87 Should the SSAAPass example be updated to use a float type rendertarget, then?

[Mugen87]

Floating point render targets might not be necessary for all use cases. In context of depth textures, we also use not the best quality texture type but the one with the broadest support (UnsignedShortType). So for now, I would keep the example as it is.

[gkjohnson]

@Mugen87

I'm just suggesting that the SSAARenderPass example may be a bit misleading. It side steps this problem a bit by using a textured mesh basic material whereas this issue is most prominent with rendering that has smooth gradients. The examples should demonstrate the best practices for common use cases, no? Here's what the example looks like using a lit sphere and different sample levels:

| 4 samples | 8 samples | 16 samples | 32 samples |
| --- | --- | --- | --- |
| | | | |

Using a float type or a half float type fixes this issue (unsigned short type seems to not be supported by webgl with RGBA format). Alternatively there's an unbiased flag that seems to mitigate the issue with 8 bit buffers, as well:

https://github.com/mrdoob/three.js/blob/ffa72a4e66af7a96bb2bf8c24c1eb7388b51c9f9/examples/jsm/postprocessing/SSAARenderPass.js#L115-L124