# How to update color values when using a shader?

**URL:** <https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686>\
**Category:** Questions\
**Tags:** color\
**Created:** [April 25, 2021, 7:10pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686 "2021-04-25T19:10:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![portareset1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/portareset1/32/17865_2.png) [@portareset1](https://discourse.threejs.org/u/portareset1)\
**Post date:** [April 25, 2021, 7:10pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/1 "2021-04-25T19:10:47Z")

</div>

Hi, i’m trying to do this using three js  
[Etch-a-sketch (michalosman.github.io)](https://michalosman.github.io/etch-a-sketch/)

So I basically generated a 16x16 BoxBufferGeometry grid and added edges using a shader as pointed here: [How to render geometry edges? - Questions - three.js forum (threejs.org)](https://discourse.threejs.org/t/how-to-render-geometry-edges/5745)  
And got this:

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

Everything cool, but then i realized i don’t have a way to change the material color because im using a shader mesh, basically i want to change the colors of the squares when I click them using a raycaster but before achieving that i need a way to update the colors but i want to keep the black edges like this:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/eba0c9047d0c3c83e462a4293650898c7bc3fccf.jpeg)

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [April 26, 2021, 5:57am UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/2 "2021-04-26T05:57:54Z")

</div>

In general, color values are managed using uniforms eg.

```javascript
new ShaderMaterial({
  uniforms:{ myColor: { value: new Color() } } 
})

```

However, here you have many many colors. Perhaps it’s best to generate a texture representing this.

---

<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:** [April 26, 2021, 9:02am UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/3 "2021-04-26T09:02:58Z")

</div>

Or consider to use vertex colors for this use case.

---

<div class="post-metadata">

**Author:** ![portareset1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/portareset1/32/17865_2.png) [@portareset1](https://discourse.threejs.org/u/portareset1)\
**Post date:** [April 26, 2021, 1:26pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/4 "2021-04-26T13:26:49Z")

</div>

How is that doable? It’s the first time I use a shader sorry, I wanna be able to change the color of the boxes individually after the scene is rendered

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 26, 2021, 1:47pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/5 "2021-04-26T13:47:33Z")

</div>

I slightly modified my example, so an individual box has its own color: [https://jsfiddle.net/prisoner849/81rqxd20/](https://jsfiddle.net/prisoner849/81rqxd20/)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/2/324d4f8ad1b41dcf58f44039496f4076cce09039.png)

---

<div class="post-metadata">

**Author:** ![portareset1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/portareset1/32/17865_2.png) [@portareset1](https://discourse.threejs.org/u/portareset1)\
**Post date:** [April 26, 2021, 1:59pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/6 "2021-04-26T13:59:10Z")

</div>

THANKS, it worked very well, so from now on if i want to change the color it will be doable by using this box.material.uniforms.color.value.set?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 26, 2021, 2:01pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/7 "2021-04-26T14:01:27Z")

</div>

> [@portareset1](#):
>
> box.material.uniforms.color.value.set

Perfectly correct 🙂

---

<div class="post-metadata">

**Author:** ![portareset1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/portareset1/32/17865_2.png) [@portareset1](https://discourse.threejs.org/u/portareset1)\
**Post date:** [April 29, 2021, 11:29pm UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/8 "2021-04-29T23:29:43Z")

</div>

this is already closed and i just wanted to show my results after your tips:  
[3Dtch-a-Sketch (portareset1.github.io)](https://portareset1.github.io/3dtch-a-sketch/)  
im new to coding, started in february so is not that good

---

<div class="post-metadata">

**Author:** ![Sarthak950](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sarthak950/32/30402_2.png) [@Sarthak950](https://discourse.threejs.org/u/Sarthak950)\
**Post date:** [March 11, 2023, 7:30am UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/9 "2023-03-11T07:30:32Z")

</div>

how can i change the texture like that

---

<div class="post-metadata">

**Author:** ![pan\_ziki](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@pan\_ziki](https://discourse.threejs.org/u/pan_ziki)\
**Post date:** [January 17, 2024, 9:56am UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/10 "2024-01-17T09:56:59Z")

</div>

Sorry for digging up an old thread. I am trying this way, it works great, but for some reason the colours set are usually rendered in darker shade.

Eg. if I set white 0xffffff , this renders exactly as white, so does red 0xff0000. But other colours just render darker, eg. setting 0xaaaaaa renders as #676767, #dd0000 renders as #b90000 etc.

Is this the expected behaviour of the shader or how can I display exactly the color I set? Thanks so much.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 17, 2024, 10:51am UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/11 "2024-01-17T10:51:36Z")

</div>

@pan_ziki  
Does it work the same way with that new version (modified MeshBasicMaterial of r160)? [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/ghodp7wj/)

PS Use `.set()` instead of `.setHSL()` to set color via a CSS string, like “#dd0000”.

---

<div class="post-metadata">

**Author:** ![pan\_ziki](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@pan\_ziki](https://discourse.threejs.org/u/pan_ziki)\
**Post date:** [January 17, 2024, 11:47am UTC](https://discourse.threejs.org/t/how-to-update-color-values-when-using-a-shader/25686/12 "2024-01-17T11:47:35Z")

</div>

@prisoner849  
This is amazing! Thank you so much, works flawlessly 🤩