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!
How to assign multiple colors for tubeGeometry? How to use the ShaderMaterial to assign pixel color?
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:
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?
Could you provide a working live code example of what you have? jsfiddle, codepen, a link to repo
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.
Also, have a look at this post:
and read all the thread to get the context of it
I’ll try with that, thanks again!
Just keep in mind, that all the stuff I’ve provided here is just concepts, not ultimate solutions
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.
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
I create another tubeBufferGeometry just for getting the uvs, this’s what I changed.
Do you think there’s something wrong? I’m really sorry for keeping asking you questions…
I figured out another way to do that, thx
Would be cool to see your approach