Colors based on several metrics

I need to make a simple viewer to represent 3D models for engineering purposes. These models would contain the geometry and several metrics that would be assigned to every vertex.
For example, one file could contain a 3D model of a pipe, and metrics for the average temperature along the pipe surface, the pressure, etc.
In the end, it would look similar to this. However, instead of changing the colour palette and keeping the vertices values, what I would need to do is to change the vertices values map.
I haven’t found anything like that among the examples or in the docs. I don’t even know what file formats would support this kind of feature (gltf doesn’t seem to have support for several colour maps for example).
So my questions would be:

  1. Is there any file format that supports this natively?
  2. Do you know any documentation or tutorial that explains how to use the MaterialLoader to open a file that contains a colour map? I don’t even know if that is possible :frowning:

I am starting to think that three js is not the right tool for this.

By “colour map” and “vertices values map” … do you mean a texture lookup table (LUT) mapping from values in the vertex data, to colors displayed on screen?

I’m not aware of a 3D file format that has such a concept. glTF would allow you to store any number of vertex color sets, or other custom vertex attributes, but has no concept of a LUT in its material definitions.

Similarly, three.js itself doesn’t have that concept in built-in materials, which is why the example overwrites the vertex data each time the LUT changes. A custom shader would work as well.

Do you need for these LUTs to be embedded in the 3D file itself? Could those be provided by your viewer instead, for example? That seems like the challenge here … if it’s OK for the 3D file to just provide the vertex data, and the viewer provides the LUT that maps vertex data to displayed colors, then this is easier.


There is a draft proposal for glTF, KHR_texture_procedurals, that would allow embedding a LUT texture or a custom shader mapping vertex data to colors. But I think it’s too early for that proposal to save you time here, and in any case its implementation in three.js will require THREE.WebGPURenderer and THREE.NodeMaterial.

1 Like

Thank you so much for your answer.

About the words I have used, I am not a expert on this field, so they probably do not make any sense. Sorry for that.

About the LUT, it would be ideal to have everything embedded in the 3D files. I was thinking on including the different LUTs (this is, the vertices values) in the gltf buffers, but I don’t know how to add them to the buffer URI. My idea is to filter and don’t visualize this LUTs when loading the file, so the user can choose the LUT they need to visualize in a dropdown selector. This would also update the values of the color table to adapt the colors in the table (and therefore the colours in the 3D mesh) to the new range of values.

It sounds simple, but I am pretty sure that this will be so hard to do.

In my mind, the vertex data contains everything that is known about a vertex (raw data), and the Lookup Texture (LUT) is just a texture that maps raw data in a vertex attribute to the color that should be shown for that vertex on screen. A common LUT texture might be just a simple gradient, for example:

Screenshot 2024-05-09 at 9.36.49 AM

Just to clarify what I’m assuming here. It’s fine if you have something else in mind. :slight_smile:


It’s certainly possible to dump all of that data into a glTF file, so it’s there and self-contained… But it’s not possible to represent the semantic meaning you’re describing, there’s nothing in glTF that will tell a viewing application that “the user can choose the LUT they need to visualize in a dropdown selector.” You would have to implement that behavior in your own viewing application, and it will not work elsewhere… to a general-purpose viewer, this data would just be unused textures and vertex attributes for some unknown purpose.

Thank you for the clarification, I am learning how this work and get confused quite often :sweat_smile:

You would have to implement that behavior in your own viewing application, and it will not work elsewhere… to a general-purpose viewer, this data would just be unused textures and vertex attributes for some unknown purpose

That’s not an issue since this will be a web app for internal use in my project. But, for the moment, I will be using a separate file for these vertices values. As you said, putting everything inside the gltf might be a challenge, and with my current level is not viable.