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

Questions
,
1

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!

2

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


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

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

3

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?

4

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

5

Thanks, here is the html code

Capture

6

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.

7

Also, have a look at this post:

and read all the thread to get the context of it :slight_smile:

8

I’ll try with that, thanks again!

9

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

10

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.

11

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 :slight_smile:

12

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

13

I figured out another way to do that, thx

14

Would be cool to see your approach :slight_smile: