How to update color values when using a shader?

Questions
1

Hi, i’m trying to do this using three js
Etch-a-sketch (michalosman.github.io)

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)
And got this:

image
image1169×799 80.6 KB

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
image1033×691 137 KB

2

In general, color values are managed using uniforms eg.

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

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

2 Likes
3

Or consider to use vertex colors for this use case.

2 Likes
4

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

5

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

изображение
изображение854×864 109 KB

4 Likes
6

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?

7

Perfectly correct :slight_smile:

1 Like
8

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

1 Like
9

how can i change the texture like that

10

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.

11

@pan_ziki
Does it work the same way with that new version (modified MeshBasicMaterial of r160)? Edit fiddle - JSFiddle - Code Playground

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

2 Likes
12

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