gltfLoader 顶点颜色问题

Question

我正在使用 glTF-transform 创建 GLB（由 gltf-pack 压缩），并且在 THREE.GLTFLoader 中遇到了奇怪的行为。

我正在使用顶点颜色并以这种方式传递它们

我的管道看起来像：创建 Glb -> gltfpack -> 使用 gltfLoader -> mergeBufferGeometry -> render() 在 fragmentShader

中使用不透明度加载到三个

const primitive = doc
            .createPrimitive()
            .setAttribute('POSITION', position)
            .setIndices(indices);
          const positionArr = position.getArray();
          if (positionArr) {
            const colors = [];
            const colorAccessor = doc
              .createAccessor()
              .setType('VEC4')
              .setBuffer(buffer);
            const rgba = this.toRGBAColor(Number.parseInt(sPrim.c));
            for (let i = 0; i < position.getCount(); i++) {
              colors.push(rgba[0], rgba[1], rgba[2], rgba[3]);
            }
            colorAccessor.setArray(new Float32Array(colors));
            primitive.setAttribute('COLOR', colorAccessor);
          }
          mesh.addPrimitive(primitive);

在这种情况下，颜色是正确的，RGBA 从 0 到 1

console.log(primitive.getAttribute('COLOR')?.getArray());
-> Float32Array(16) [
   0.4627451002597809, 0.27450981736183167,
  0.20000000298023224,                   1,
   0.4627451002597809, 0.27450981736183167,
  0.20000000298023224,                   1,
   0.4627451002597809, 0.27450981736183167,
  0.20000000298023224,                   1,
   0.4627451002597809, 0.27450981736183167,
  0.20000000298023224,                   1
]

但是，当我将模型加载到 gltfLoader 中时，颜色属性数组变为 Uint8Array（即使对于 alpha，值也为 0-255）

那么，传递顶点颜色的正确方法是什么？

Answer 1

COLOR_0（不是 COLOR）是顶点颜色属性的预期名称——模型可以有多个顶点颜色集。 gltfpack 正在“规范化”float32 颜色，这意味着它将 [0, 1] 中的 float32 值替换为 [0, 255] 中的 uint8 值，需要减少约 75% space。 three.js 两者都可以支持。

gltfLoader 顶点颜色问题

gltfLoader vertexColors issue

three.js

gltf