I am interested in incorporating color ID maps into three.js, inspired by the method found in Substance Painter:
The desired outcome involves compositing the color map with the MeshStandardMaterial, followed by layering multiple id maps on top. Additional PBR elements are then added as standard.
I envision a scenario where a single jpg image contains up to 4 id maps (per channel). Each channel represents the alpha value of the applied color - 0x00 being invisible and 0xFF fully visible. A color parameter would be passed (per channel) and implemented in the fragment shader to adjust the color dynamically during runtime.
Below is a hypothetical API code snippet that could potentially work:
// 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 inquiry revolves around 3 main points (Ranked from highest to best):
- Is there existing functionality similar to this?
- Are there compositing techniques that could simplify the implementation?
- What are the accepted methods/tools for extending MeshStandardMaterial in three.js?
Thank you