I am using three.js to render results from physics simulations. A common approach to visualize the results is to assign a color from an HSL color map to each vertex and interpolate the colors. Red usually indicates a large number, and blue indicates a low number. We keep the saturation and lightness constant (usually 1 and 0.5 respectively), and just assign varying hues to each vertex, depending on the result value. See Geometry / Colors / Lookup Table for an example.
For the most part this works great, however, since the colors in the shaders are represented in RGB the individual RGB components are interpolated and we can get some unwanted side effects, such as colors with different saturation and lightness values, or no visualization of the varying degrees of hues. For instance, if two vertices on a face are red (hsl(0, 1, 0.5)) and one is blue (hsl(2/3, 1, 0.5)), what we’d prefer is the colors on the face to interpolate on just the hue component, resulting in a rainbow effect from red to blue. But instead, we just get a linear interpolation in RGB space from red to blue.
Here is an example using PlaneGeometry, with two faces, where the geometry on the left uses the standard color interpolation, and the one of the right is using a version of three.js I modified to interpolate in HSL space.
I have two questions:
Is there already a way in Three.JS to achieve this effect, without adding more faces to the geometry and without using ShaderMaterial? I’d like to continue using Geometry and MeshLambertMaterial, because they are so easy to work with.
If the answer to #1 is no - is this something that would be valuable in three.js? I’ve already done a simple implementation in my three.js fork. If this is something that could get merged into mrdoob’s repo, I’d be happy to work up some examples and create a pull request.
With the change I made you can even see some differences in the Lookup Table example on some of the larger faces: