# \[resolved\]How to solve the sRGB problem

**URL:** https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315
**Category:** Questions
**Tags:** post-processing
**Created:** [May 8, 2023, 10:13am UTC](https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315 "2023-05-08T10:13:07Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![qmz13579](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qmz13579/32/43618_2.png) [@qmz13579](https://discourse.threejs.org/u/qmz13579)
#### Post date: [May 8, 2023, 10:13am UTC](https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315/1 "2023-05-08T10:13:07Z")

</div>

I understand that when EffectComposer is enabled, the sRGB encoding of the renderer output is disabled, and using the GammaCorrectionShader causes abnormal gradients, noticeable textures, and insufficient smooth transitions. How can this be resolved? Thanks.

 ![A](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/2/724fcb2107f5732f18e1e1c316d64b5b1c18393b.jpeg)  
Render output in sRGB encoding mode

 ![B](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/f/3ff7f0f3d3aeb2a0d4d1e84dcdec351da08409b7.jpeg)  
Enable EffectComposer and use GammaCorrectionShader

 ![C](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/a/da80ef87d5beee6207194ca66b1fcb25f5d70259.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: [May 8, 2023, 11:11am UTC](https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315/2 "2023-05-08T11:11:46Z")

</div>

Create your effect composer like so for now:

```js
const renderTarget = new WebGLRenderTarget( width, height, { type: THREE.HalfFloatType } );
const composer = new EffectComposer( renderer, renderTarget );

```

The banding happens because of the default `THREE.UnsignedByteType` of render targets. Using `THREE.HalfFloatTyp` fixes this and also supports HDR workflows.

---

<div class="post-metadata">

### Author: ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)
#### Post date: [May 8, 2023, 1:45pm UTC](https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315/3 "2023-05-08T13:45:39Z")

</div>

Storing the UnsignedByteType render target with sRGB encoding can avoid the banding too, but unfortunately has a [major bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1329199&q=&can=2) on some macOS devices. In any case, if your effects require HDR workflows, you’ll need at least half float targets.

---

<div class="post-metadata">

### Author: ![qmz13579](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qmz13579/32/43618_2.png) [@qmz13579](https://discourse.threejs.org/u/qmz13579)
#### Post date: [May 9, 2023, 1:10am UTC](https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315/4 "2023-05-09T01:10:05Z")

</div>

Solved, thank you

---

<div class="post-metadata">

### Author: ![qmz13579](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qmz13579/32/43618_2.png) [@qmz13579](https://discourse.threejs.org/u/qmz13579)
#### Post date: [May 9, 2023, 1:10am UTC](https://discourse.threejs.org/t/resolved-how-to-solve-the-srgb-problem/51315/5 "2023-05-09T01:10:45Z")

</div>

Okay, thank you