Segmented colors with a gradient at the boundaries along a path

I have a unique usecase for utilizing shaders and gradients along a path that I am struggling to implement. I am attempting to connect several different examples I have seen here:

  1. Custom MeshLambertMaterial material like so
  2. Gradient at the border of the segmented colors similar to this
  3. Having the gradient at the border of the segmented colors follow a path like so

Attached is an example of what this would look like. Two caveats:

  1. The gradient at the color segmentation is not illustrated
  2. The gradient and segmentation should “wrap around” the inside of the mesh and be symmetrical

I’m not sure I understand the expected result, but a texture with a gradient might be sufficient for this … or not?

Simple sine function of ring’s height produces that wave shape :thinking: :

Demo: https://codepen.io/prisoner849/full/mdYxqEJ

3 Likes

Yes! This is what I’m going for. Thank you! Now, I just need to be able to “blur” the 2 colors together slightly. The idea was to use a gradient along the sine function. Is there a way to accomplish this?

I’ve got this result:

Demo: https://codepen.io/prisoner849/full/dyEmLxZ

4 Likes