# SSAA postprocessing affects contrast

**URL:** <https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089>\
**Category:** Questions\
**Tags:** ssaa, post-processing\
**Created:** [August 17, 2023, 5:38pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089 "2023-08-17T17:38:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 17, 2023, 5:38pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/1 "2023-08-17T17:38:43Z")

</div>

As suggested by @Mugen87 [here](https://discourse.threejs.org/t/ssaa-gammacorrection-dark-colors-issue/15321/24) starting a new thread to discuss issues with SSAA once again.

I am facing the issue affecting a resulting image contrast when using SSAA with Gamma. I did try using suggestions described [here](https://github.com/mrdoob/three.js/issues/20681), however, in my case passing `{type: FloatType}` doesn’t have any effects.

Here on the picture below left is RenderPass + SSAA + Gamma, right is RenderPass + Gamma.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/2/f2c325fd6dc5167cf336fe36f92487ffe98866c2.jpeg)

I tried to reproduce my issue in this fiddle: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/ws67qpb8/104/) but for some reason the shader throws an error 🙂 (I will try to update it a bit later to make it work), but at least you can see what I am doing. The general idea is that I use GLTF model paired with HDR light. Once light is loaded I am updating models EnvMaps and changing scene environment.

I do really need SSAA and I am hoping you can help me to fix the issue with colors.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 17, 2023, 8:12pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/2 "2023-08-17T20:12:40Z")

</div>

Here is the fixed fiddle: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/6zf1nbq2/2/)

There were multiple minor issues in the code. The most important one:

- Use `OutputPass` instead of `GammaCorrectionShader` to get color space conversion _and_ tone mapping right.
- Use `Scene.background` to define a background color. If you define a raw clear color value without `THREE.Color`, you bypass the internal color management meaning you have to define colors in the correct color space on app level.
- `PMREMGenerator` is now integrated in the renderer. When using environment maps, you don’t have to work with it on app level anymore.

So to clarify, your issue was related to mismatched color spaces and missing tone mapping.

BTW: It’s best to check out the [official examples](https://threejs.org/examples/) if you need a code template since they are always based on the latest API.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 17, 2023, 8:26pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/3 "2023-08-17T20:26:35Z")

</div>

> [@Mugen87](#):
>
> OutputPass

Thanks! I am trying it now and for some reason my TS project doesn’t see `OutputPass` in the `postprocessing` folder, even though it is there. All other passes and shaders are visible.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/6/36fc01dec222baf2e81fff80259a41f6e650bdca.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 17, 2023, 8:29pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/4 "2023-08-17T20:29:37Z")

</div>

Maybe the type declarations are not yet created for this file. They are maintained here:

> **[GitHub - three-types/three-ts-types: TS type library for the popular webgl...](https://github.com/three-types/three-ts-types)**
>
> TS type library for the popular webgl library threejs - GitHub - three-types/three-ts-types: TS type library for the popular webgl library threejs

Consider to file an issue at this repository.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 17, 2023, 8:35pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/5 "2023-08-17T20:35:26Z")

</div>

Thanks a lot! It was actually there, but I didn’t install the dependency. I will test the color issue once again and let you know.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 17, 2023, 8:54pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/6 "2023-08-17T20:54:43Z")

</div>

It is much better, but now it is too bright 🙂  
Please see the example below. Left side is just render pass, while right is SSAO + Output.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/4/34ab1ea98ac7fccd5f5ce0d0dc319a2e434afc80.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 17, 2023, 10:06pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/7 "2023-08-17T22:06:51Z")

</div>

I think a live example like before would be helpful in order to investigate the issue. Maybe updating the fiddle from earlier posts ([Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/6zf1nbq2/2/)) would be best.

> [@new](#):
>
> SSAO + Output.

BTW: Do you mean SSAA here?

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 18, 2023, 2:33am UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/8 "2023-08-18T02:33:22Z")

</div>

Yes, sorry, I meant SSAA.

My (TS) code looks almost identical to the original fiddle I provided here, however, it works in contrast with the fiddle. I do not understand why the fiddle doesn’t work since it is almost the same. The only difference is that I use `loadAsync` for textures instead of `load` in my code.

I compared our fiddles and it seems that apart of differences in loading and changing envMaps, there is also a difference in the HDR files we are using. My one was generated by HDRLightStudio and exported with the following settings:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6f0996914b2aa68e9cce6c2232a07738844cafa.png)

When I use this file in your fiddle it also crashes with the following error (like my original one):

```javascript
Program Info Log: Fragment shader is not compiled.
FRAGMENT
ERROR: 0:477: 'assign' : cannot convert from 'const int' to 'highp float'

```

Because of this HDR file, in my code I had to traverse all meshes and update their envMap. If I don’t update their envMap metallic surfaces become black. While in your fiddle you simply specified `texture.mapping = THREE.EquirectangularReflectionMapping;` and it worked well.  
To be honest, I am a bit lost… I will investigate further.

Another problem is that I need to have a transparent background in my project, but setting `scene.background` kills the transparency. You mentioned that I need to define color space on app level, do you have an example of how to do it?

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 18, 2023, 7:39pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/9 "2023-08-18T19:39:32Z")

</div>

Hi @Mugen87. I was finally able to reproduce my issue in the fiddle: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/SSopin/0yk794wz/10/). I am using SSAA + OutputPass on MouseUp and RenderPass on MouseDown.  
Also, I’m setting `scene.background` as you suggested and I removed `PMREMGenerator`.  
Please suggest if I am missing something?

Also, I want my background to be transparent. How can I achieve this? You mentioned that I need to set the background, otherwise I “have to define colors in the correct color space on app level”. Could you please suggest when I can read about it?

Thank you for your help!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 18, 2023, 8:25pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/10 "2023-08-18T20:25:09Z")

</div>

> [@new](#):
>
> Please suggest if I am missing something?

You are not setting up the render target for the effect composer correctly. It should be a half float render target but you are using `THREE.UnsignedByteType`. This breaks the entire HDR workflow.

TBH, I recommend you only setup the composer in this way if you really know what you are doing. There is no need to manually setup the render target for the composer anyway for your use case as well as manually set the size of each pass. Please don’t do that since this makes no sense.

It also makes no sense to configure MSAA for render targets if you use SSAA. You have done this by defining a value for the `samples` parameter.

Here is the updated fiddle with some cleaned up code: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/sew785z4/)

> [@new](#):
>
> You mentioned that I need to set the background, otherwise I “have to define colors in the correct color space on app level”. Could you please suggest when I can read about it?

Have you already checked this guide? [Color Management in three.js](https://threejs.org/docs/index.html#manual/en/introduction/Color-management)

Transparent backgrounds tend to be problematic. They are not always required since a pure WebGL solution is often possible. Do you mind explaining your use case?

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 18, 2023, 8:59pm UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/11 "2023-08-18T20:59:42Z")

</div>

> TBH, I recommend you only setup the composer in this way if you really know what you are doing. There is no need to manually setup the render target for the composer anyway for your use case as well as manually set the size of each pass. Please don’t do that since this makes no sense.

Thank you very much! It works now!

> Have you already checked this guide? [Color Management in three.js](https://threejs.org/docs/index.html#manual/en/introduction/Color-management)

I have checked it some time ago, but I will do it once again.

> Transparent backgrounds tends to be problematic. They are not always required since a pure WebGL solution is often possible. Do you mind explaining your use case?

I am building a 3D viewer that can be embedded into other sites. Depending on the design of these sites, I can enable or disable a transparent background. This feature is quite important. In addition we offer an augmented reality feature that also needs a transparent background. Are there any specific best practices I should consider when developing transparent backgrounds?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 19, 2023, 9:16am UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/12 "2023-08-19T09:16:48Z")

</div>

Here is the above fiddle with a fully transparent background: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/ums0nq5b/)

As long as you use `0x000000` as the clear color value you don’t have to worry about color spaces.

---

<div class="post-metadata">

**Author:** ![new](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/new/32/25580_2.png) [@new](https://discourse.threejs.org/u/new)\
**Post date:** [August 20, 2023, 1:28am UTC](https://discourse.threejs.org/t/ssaa-postprocessing-affects-contrast/55089/13 "2023-08-20T01:28:42Z")

</div>

Thank you very much!