# How to assign multiple colors for tubeGeometry? How to use the ShaderMaterial to assign pixel color?

**URL:** <https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [January 14, 2019, 8:41pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728 "2019-01-14T20:41:45Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 8:41pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/1 "2019-01-14T20:41:46Z")

</div>

I need to create a tube geometry, I have several 3d points. I already used the build-in tubeBufferGeometry by creating the curve first. But I want to have layered colors on one entire tube. I think it has to be done using custom shaderMaterial. Could someone help me with steps to do that? Thx!

---

<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 14, 2019, 8:46pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/2 "2019-01-14T20:46:20Z")

</div>

Hi!  
Have a look at this SO answer (the option with uv coordinates, the first one):

> <https://stackoverflow.com/questions/52614371/apply-color-gradient-to-material-on-mesh-three-js/52615186#52615186>

  
and also read the answer from @pailhead in that thread.

Nice example with gradients in a fragment shader:  
[https://www.shadertoy.com/view/4dsSzr](https://www.shadertoy.com/view/4dsSzr)

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 9:02pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/3 "2019-01-14T21:02:59Z")

</div>

Thank you so much! !  
but for example if I have used 4 points to define the curve tube, and I also want go color gradient between each two points. Do you think that still can be done by using Coordinates-based method?  
I need to split the coordinates to assign each gradient-color in the vertex shader code, am I saying right?

---

<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 14, 2019, 9:05pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/4 "2019-01-14T21:05:34Z")

</div>

🙂Could you provide a working live code example of what you have? jsfiddle, codepen, a link to repo

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 9:15pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/5 "2019-01-14T21:15:42Z")

</div>

> [@prisoner849](#):
>
> jsfiddle

Thanks, here is the html code

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/candiceLLL/cg6u1dj9/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/783451394d9dea171e6634594e1e605e5331bba3.png)

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 9:17pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/6 "2019-01-14T21:17:35Z")

</div>

and, this is how it look like right now. For each tube I used two to five points to draw, and since I need different rgb values on each of those points, I need to several color-gradient.

---

<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 14, 2019, 9:22pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/7 "2019-01-14T21:22:24Z")

</div>

Also, have a look at this post:

> [@\[SOLVED\] Gradient to TextGeometry](https://discourse.threejs.org/t/solved-gradient-to-textgeometry/1603/8):
>
> [StopColorsGradient] [https://jsfiddle.net/prisoner849/k3895nho/](https://jsfiddle.net/prisoner849/k3895nho/) Okay, as you, at least, try to do something +1, there’s the function which applies a gradient to a geometry slight_smile Maybe there is another, better, approach. I came up with that one slight_smile var geom = new THREE.TorusKnotGeometry(2.5, .5, 100, 16); var rev = true; var cols = [{ stop: 0, color: new THREE.Color(0xf7b000) }, { stop: .25, color: new THREE.Color(0xdd0080) }, { stop: .5, color: new THREE.C…

and read all the thread to get the context of it 🙂

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 9:24pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/8 "2019-01-14T21:24:12Z")

</div>

I’ll try with that, thanks again!

---

<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 14, 2019, 9:27pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/9 "2019-01-14T21:27:46Z")

</div>

Just keep in mind, that all the stuff I’ve provided here is just concepts, not ultimate solutions 🙂

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 10:22pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/10 "2019-01-14T22:22:10Z")

</div>

Sorry for bothering you with one more question.  
I check your function and that’s really really useful for me! Do you think I can change the axis parameter to the 3d curve line that I just defined for tube? The requirement of uniformly linear color-gradient along entire tube really bothering me right now.

---

<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 14, 2019, 10:28pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/11 "2019-01-14T22:28:29Z")

</div>

Yes, you can change the function to use it with uv.y coordinate of a geometry instead of y-coofdinate of a vertex. I plan to rework this function to use it with a buffer geometry, but I can’t say when exactly it will happen 🙂

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 11:08pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/12 "2019-01-14T23:08:01Z")

</div>

I create another tubeBufferGeometry just for getting the uvs, this’s what I changed.  
[https://jsfiddle.net/candiceLLL/whbemcvq/](https://jsfiddle.net/candiceLLL/whbemcvq/)  
Do you think there’s something wrong? I’m really sorry for keeping asking you questions…

---

<div class="post-metadata">

**Author:** ![Candice\_Li](https://avatars.discourse-cdn.com/v4/letter/c/e19b73/32.png) [@Candice\_Li](https://discourse.threejs.org/u/Candice_Li)\
**Post date:** [January 14, 2019, 11:26pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/13 "2019-01-14T23:26:00Z")

</div>

I figured out another way to do that, thx

---

<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 15, 2019, 1:48pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-colors-for-tubegeometry-how-to-use-the-shadermaterial-to-assign-pixel-color/5728/14 "2019-01-15T13:48:34Z")

</div>

Would be cool to see your approach 🙂