aframe - 如何在不丢失 Material 信息的情况下合并 A 型框架中的几何图形？

Question

我有一大堆使用自定义几何图形的 block 对象，我希望将其合并为较少数量的较大几何图形，因为我相信这会降低渲染成本。

我一直在这里遵循指导:https://aframe.io/docs/1.2.0/introduction/best-practices.html#performance这让我找到了几何合并组件: https://github.com/supermedium/superframe/tree/master/components/geometry-merger/

A 框架文档说:“您可以使用几何合并，然后使用启用了顶点颜色的 Three.js Material 。 Three.js 几何体保留颜色、每个顶点的 UV 等数据。”

几何合并组件还表示:“如果使用顶点或面着色，因为仍然可以单独操纵各个几何体的颜色，因为该组件保留了面索引和顶点索引，所以很有用。”

但是我有几个问题。

1. 如果我在 Material 上设置 vertexColors(按照 A-Frame 文档的建议)，那么这会破坏我的 block 的外观。
2. 无论我是否在 Material 上设置 vertexColors，当几何图形合并时，所有 Material 信息似乎都会丢失，并且所有内容最终都会变成白色。

请参阅此故障以了解这两个问题的演示。 https://tundra-mercurial-garden.glitch.me/

我怀疑 A-Frame 几何合并组件无法满足我的需要，我需要使用底层的 Three.js 函数自己实现一些东西。

是这样吗？或者有没有办法可以使用几何合并来完成这项工作？

Answer 1

要使 vertexColors 正常工作，您需要为顶点着色:)
更具体地说 - BufferGeometry 需要每个顶点的 rgb 值数组 - 它将用作 Material 的颜色。

---

在这段代码中:

var geometry = new THREE.BoxGeometry();
var mat = new THREE.MeshStandardMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});
var mesh = new THREE.Mesh(geometry, mat);

除非几何体包含有关顶点颜色的信息，否则网格将为黑色:

// create a color attribute in the geometry
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(vertices_count), 3));
// grab the array
const colors = this.geometry.attributes.color.array;

// fill the array with rgb values
const faceColor = new THREE.Color(color_hex);
for (var i = 0; i < vertices_count / 3; i += 3) {
   colors[i + 0] = faceColor.r; // lol +0
   colors[i + 1] = faceColor.g;
   colors[i + 2] = faceColor.b;
}
// tell the geometry to update the color attribute
geometry.attributes.color.needsUpdate = true;

---

由于某种原因，我无法使 buffer-geometry-merger 组件工作，但它的核心似乎是有效的:

AFRAME.registerComponent("merger", {
  init: function() {
    // replace with an event where all child entities are ready
    setTimeout(this.mergeChildren.bind(this), 500);
  },
  mergeChildren: function() {
   const geometries = [];
   // traverse the child and store all geometries.
   this.el.object3D.traverse(node => {
     if (node.type === "Mesh") {
       const geometry = node.geometry.clone();
       geometry.applyMatrix4(node.parent.matrix);
       geometries.push(geometry)

       // dispose the merged meshes 
       node.parent.remove(node);
       node.geometry.dispose();
       node.material.dispose();
     }
   }); 
   // create a mesh from the "merged" geometry         
   const mergedGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);
   const mergedMaterial = new THREE.MeshStandardMaterial({color: 0xffffff, roughness: 0.3, vertexColors: THREE.FaceColors});
    
   const mergedMesh = new THREE.Mesh(mergedGeo, mergedMaterial);
   this.el.object3D.add(mergedMesh)
 }
})

您可以在this glitch查看。还有一个使用顶点颜色 here 的示例(source)。