Adding ID Color maps to MeshStandardMaterial in three.js

Question

I would like to add color ID maps to three.js, similar to the technique available in Substance Painter:

https://www.youtube.com/watch?v=5GqeyuZGOhc

The result must also be composited with the MeshStandardMaterial, such that the color map is added, then multiple layers of id maps are applied on top of that. (then the subsequent PBR elements added as standard).

I envisage that up to 4 id maps could be contained (per channel) in a single jpg image. Each channel being the alpha value of the applied color where 0x00 is invisible and 0xFF is fully visible. A color parameter would then be passed (per channel) and applied to the fragment shader, altering the color at runtime.

Here is some pseudo code for the API that might make sense:

// load an id map with 4 separate channels
IdMapTexture texture = (IdMapTexture)mTextureLoader.load(path, callback);

MeshStandardIdMapMaterial material = new MeshStandardIdMapMaterial();
material.idMaps[0] = texture;

// apply colors to the channel via the fragment shader
material.idMaps[0].color0 = new Color(0x336699);
material.idMaps[0].color1 = new Color(0xFF0099);
material.idMaps[0].color2 = new Color(0x640971);
material.idMaps[0].color3 = new Color(0x216647);

// apply the material to the mesh
mesh.material = material;

My question boils down to 3 main topics (Highest == best).

Is there anything like this already available?
Is there any compositing technique that could make building this more structured/simplistic?
Is there a standard way/tools for extending MeshStandardMaterial for three.js?

Regards

Such a request is worth to be at a site of freelancers. What have you tried so far? — prisoner849
@prisoner849 I actually have most of it done now. I really just wanted to know the approaches that might streamline my work. I have actually embedded the fragment and vertex shaders into the HTML and loaded 4 different pngs using a texture loader. I guess I just wanted the information quickly but now I have created a basic version and I will build on that. — Gary Paluk
IMO, this falls under category 4 of off-topic discussions (see here). — TheJim01
@TheJim01If so, please indicate how. As far as I can tell it doesn't fail to meet the requirements. At the time of writing the question I had not tried anything yet the question had direct goals, is well structured and indicates exactly what I was trying to achieve and therefore has an achievable goal which is not based on opinionated answers. Thanks — Gary Paluk

Gary Paluk Gary Paluk · Accepted Answer · 2017-10-30T20:37:38

I achieved this by adding glsl vertex and fragment shaders into the html document along with the glsl mix() function to add multiple transparent pngs. The pngs were loaded with the three.js texture loader system and passed to the fragment shader.

In the fragment shader I subsequently set the color of the fragments directly using a vec3. It is important to note that I needed to set the material transparent property to true and the blend function accordingly.

Adding ID Color maps to MeshStandardMaterial in three.js

1 Answers