0

I have a mesh, with gradient color using this type of code :

It's nice and beautiful, but I want to reduce the precision of the gradient and make it less smooth.

Here's an exemple

I've got data on a JSON, wich gave me coordinate for vertices 0, 2, 4 and 6. I calculate the other one after that. I've got a value on vertice 0, 2, 4 and 6, which I use to get the color value of that point, in HSL (like 0 is 0 in HSL and 1 is 240 in HSL)

With than given value, 1, 3, 5 and 7 have a color value depending of the vertice on the same line, and 8 got value from a pondered calculus.

If 0, 6 have a value of 0.5(green), and 2, 4 have a value of 1(red), then 7 is green, 3 is red, and 1, 8, 5 have a value of 0.75 (yellow).

With my material and colorVertex, the pixels between those point are calculated and can take a infity of value between 1 and 0.5.

Now, I want to now if it's possible to limit this infinity of values to fixed one, so it will look like that

I can't subdivise my mesh because the final one is really big and can't spend much more on calculus time. Is there a way to change the interpolation used by three.js so the pixel between my vertices have the colormap/color range that I want?

Thanks in advance

Community
  • 1
  • 1
Myakko
  • 45
  • 1
  • 8
  • 1
    Are you familiar with fragment shaders? You could write one which will map a range of colors to only 1 color. This will create the discrete gradient you want without having to subdivide the mesh. See here: http://stackoverflow.com/questions/25107870/gradient-with-fixed-number-of-levels – Matey May 04 '17 at 21:25
  • I'm not really used to it, but if it's the only way, I will explore it then ! Thank you ! – Myakko May 05 '17 at 21:44
  • If you're still here, and you have some cool link to learn basic shader use.. I've found some and I'm actually near a solution for only one square, but I've no idea of how it will work with my full mesh created with three.js and not in the custom shader – Myakko May 10 '17 at 09:15

0 Answers0