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

#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):

#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

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
https://jsfiddle.net/candiceLLL/cg6u1dj9/

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

#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

#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

#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