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个主题（最高==最佳）。

有这样的东西吗？
是否有任何合成技术可以使构建更加结构化/简单化？
是否有一种标准的方法/工具可以为three.js扩展MeshStandardMaterial？

此致

Answer 1

我通过将glsl顶点和片段着色器与glsl mix（）函数一起添加到html文档中来实现此目的，以添加多个透明png。 pngs加载了three.js纹理加载器系统并传递给片段着色器。

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

将ID颜色映射添加到three.js中的MeshStandardMaterial

1 个答案: