在 three.js 中将 ID 颜色贴图添加到 MeshStandardMaterial

Question

我想将颜色 ID 映射添加到 three.js，类似于 Substance Painter 中可用的技术：

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

结果还必须与 MeshStandardMaterial 合成，以便添加颜色贴图，然后在其上应用多层 id 贴图。（然后作为标准添加后续 PBR 元素）。

我设想在单个 jpg 图像中最多可以包含 4 个 id 映射（每个通道）。每个通道都是应用颜色的 alpha 值，其中 0x00 不可见，0xFF 完全可见。然后颜色参数将被传递（每个通道）并应用于片段着色器，在运行时改变颜色。

这是 API 的一些伪代码，可能有意义：

// 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;

我的问题归结为 3 个主要主题（最高 == 最佳）。

是否有类似的东西可用？
是否有任何合成技术可以使构建更多structured/simplistic？
是否有标准 way/tools 用于扩展 three.js 的 MeshStandardMaterial？

此致

Answer 1

我通过将 glsl 顶点和片段着色器添加到 html 文档以及 glsl mix() 函数来添加多个透明 png 来实现这一点。 png 使用 three.js 纹理加载系统加载并传递给片段着色器。

在片段着色器中，我随后直接使用 vec3 设置片段的颜色。重要的是要注意，我需要将 material 透明属性设置为 true 并相应地设置混合功能。

在 three.js 中将 ID 颜色贴图添加到 MeshStandardMaterial

Adding ID Color maps to MeshStandardMaterial in three.js

javascript

webgl

fragment-shader

three.js