在 Three.js 中将 Geometry 转换为 BufferGeometry 会增加顶点数吗？答案

【问题标题】：Does converting a Geometry to a BufferGeometry in Three.js increase the number of vertices?在 Three.js 中将 Geometry 转换为 BufferGeometry 会增加顶点数吗？
【发布时间】：2016-01-22 07:03:02
【问题描述】：

我一直在使用 fromGeometry 方法从常规 Geometry 对象生成 BufferGeometry 对象，并且我发现在转换过程中顶点的数量似乎增加了。例如，如果我这样做：

var geometry = new THREE.BoxGeometry(80,80,80,16,16,16);
var bGeometry = new THREE.BufferGeometry();
bGeometry.fromGeometry(geometry);
console.log(bGeometry.getAttribute('position'));
console.log(geometry.vertices.length);

我得到一个 Float32Array[27648]，除以 3 得到 9216，而几何有 1538 个顶点。我了解 THREE.BoxGeometry 合并了一些顶点，所以我怀疑这可能与它有关，但我是否更正 BoxGeometry 对象具有更多顶点？或者几何对象是否在 GPU 中“未压缩”，所以它们实际上具有相同数量的顶点，只是不在我的几何对象中？

我问的原因是我试图创建一个自定义属性，但是当我只迭代我的几何对象中的顶点数时我的数组太短，认为会有相同数量的顶点在两个对象中。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

让我们以BoxGeometry(80,80,80,1,1,1) 为例，对于盒子BufferGeometry，我们得到36 个顶点，对于盒子Geometry，我们得到8 个顶点。这怎么可能？让我们算一下：

要定义一个盒子，我们只需要 8 个顶点 来定义构成该形状的 12 个三角形；但是对于盒子的每个顶点，您有 6 个三角形共享它。请记住，立方体的每个面都有 2 个三角形。

如果您将框 Geometry 的所有三角形展开到框 BufferGeometry 中，您将拥有：6 faces x 2 triangles per face x 3 vertices per triangle x 3 floats per vertex = 108 个浮点数

【讨论】：

这听起来效率低下。只存储 8 个顶点（24 个浮点数），然后有一个指向每个面顶点的引用数组会不会更冗余？例如，face1 将由顶点 [0,1,2] face2: [0, 2, 3] 等组成？
你的建议是 IndexedGeometryBuffers 是什么。

【解决方案2】：

找出这些问题的答案的最佳方法就是查看three.js 代码。它非常容易上手，而且通常很容易理解。

首先我们可以查找BufferGeometry.fromGeometry方法：

fromGeometry: function ( geometry ) {

    geometry.__directGeometry = new THREE.DirectGeometry().fromGeometry( geometry );

    return this.fromDirectGeometry( geometry.__directGeometry );

}

你可以看到正在调用DirectGeometry.fromGeometry

fromGeometry: function ( geometry ) {
    // ...
    var vertices = geometry.vertices;
    // ...
    for ( var i = 0; i < faces.length; i ++ ) {
        // ...
        this.vertices.push( vertices[ face.a ], vertices[ face.b ], vertices[ face.c ] );
        // ...
    }
    // ...
}

在这里您可以清楚地看到它正在添加来自几何面属性的额外顶点。 gaitat 的回答给出了一个很好的例子来说明为什么会这样！

【讨论】：