# Get the right color encoding for texture in shader

**URL:** <https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301>\
**Category:** Questions\
**Tags:** textures, shaders\
**Created:** [December 2, 2021, 10:46am UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301 "2021-12-02T10:46:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aitor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitor/32/40250_2.png) [@aitor](https://discourse.threejs.org/u/aitor)\
**Post date:** [December 2, 2021, 10:46am UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/1 "2021-12-02T10:46:59Z")

</div>

I have my texture with RGB encoding:

```
texture.encoding = THREE.sRGBEncoding

```

The same for the render output:

```
renderer.outputEncoding = THREE.sRGBEncoding

```

It works for the `MeshStandardMaterial`:

 ![Captura de pantalla 2021-12-02 a las 11.33.44](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/609e03e7157644ba8e9845a367c3d2e781d8b3d3.jpeg)

When I replace `MeshStandardMaterial` for `ShaderMaterial` and provide the texture as uniform to shader the color get wrong again:

 ![Captura de pantalla 2021-12-02 a las 11.34.56](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4f692ed5d95746d2ea125e24d4a5b94374f22124.jpeg)

How can I set the right color encoding for the shader approach?

---

<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:** [December 2, 2021, 1:55pm UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/2 "2021-12-02T13:55:18Z")

</div>

You probably do not decode the sRGB encoded color values to linear color space. Use this code in your custom shader:

> <https://github.com/mrdoob/three.js/blob/13b67d960375a5e737e6c3d4997fe9d653b9bd27/src/renderers/shaders/ShaderChunk/encodings_pars_fragment.glsl.js#L16-L18>

---

<div class="post-metadata">

**Author:** ![aitor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitor/32/40250_2.png) [@aitor](https://discourse.threejs.org/u/aitor)\
**Post date:** [December 2, 2021, 3:16pm UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/3 "2021-12-02T15:16:34Z")

</div>

Thank you for the answer. I spent some time trying to implement that, but I’m shooting in the dark. I tried to include the shader chunk this way:

```javascript
//fragment.glsl

#include <encodings_pars_fragment>;

uniform sampler2D uTexture;
varying vec2 vUv;

void main()
{
    vec4 textureColor = texture2D(uTexture, vUv);

    vec4 textureColor = sRGBToLinear(textureColor);

    gl_FragColor = textureColor;
}

```

And I’m getting this error:

![Captura de pantalla 2021-12-02 a las 16.13.45](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/d/2dfe14d7e4182c1d52092ccf66474c6a1674f753.png)

---

<div class="post-metadata">

**Author:** ![aitor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitor/32/40250_2.png) [@aitor](https://discourse.threejs.org/u/aitor)\
**Post date:** [December 2, 2021, 3:25pm UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/4 "2021-12-02T15:25:54Z")

</div>

I have a fix. For the shader material approach just I have to remove:

```
texture.encoding = THREE.sRGBEncoding

```

And the color is fixed. Anyway, any thought about how to use the peviously mentioned ShaderChunk are welcome.

---

<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:** [December 2, 2021, 3:38pm UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/5 "2021-12-02T15:38:33Z")

</div>

The error messages say that `encodings_pars_fragment` is already included.

---

<div class="post-metadata">

**Author:** ![aitor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitor/32/40250_2.png) [@aitor](https://discourse.threejs.org/u/aitor)\
**Post date:** [December 2, 2021, 4:42pm UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/6 "2021-12-02T16:42:06Z")

</div>

Ok, thanks!

So, this works:

```javascript
uniform sampler2D uTexture;
varying vec2 vUv;
void main()
{
    vec4 textureColor = texture2D(uTexture, vUv);
    textureColor = sRGBToLinear(textureColor);
    gl_FragColor = textureColor;
}

```

---

<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:** [December 2, 2021, 4:46pm UTC](https://discourse.threejs.org/t/get-the-right-color-encoding-for-texture-in-shader/32301/7 "2021-12-02T16:46:47Z")

</div>

Looks good. I suggest you use this approach instead of not setting the `encoding` property to `THREE.sRGBEncoding`. With the above code, you have a correct color space workflow.