我可以跳过正常语法并使用 three.js 中的几何缓冲区以获得更快的性能吗？答案

【问题标题】：Can I skip the normal syntax and work with geometry buffers in three.js for faster performance?我可以跳过正常语法并使用 three.js 中的几何缓冲区以获得更快的性能吗？
【发布时间】：2018-11-09 15:05:28
【问题描述】：

我是几何生成和操作领域的新手，我正计划在复杂和大规模上进行此操作。我知道这样做的基本方法就像显示in the answer to this question.。

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

object.position.z = -100;//move a bit back - size of 500 is a bit big
object.rotation.y = -Math.PI * .5;//triangle is pointing in depth, rotate it -90 degrees on Y

scene.add(object);

但我确实有直接使用 GPU 上的类型化数组图像缓冲区进行图像处理的经验，这与处理 3D 点基本相同，因为颜色本质上是 2D 网格上的 3D 点（在缓冲区，展平为一维类型数组），我知道在 GPU 上使用着色器进行处理时，这种大规模操作的速度有多快。

所以我想知道是否可以直接作为类型化数组缓冲区访问 three.js 中的几何图形。如果是这样，我可以使用 gpu.js 在 GPU 而不是 CPU 上对其进行操作，并以指数方式提升性能。

基本上我是在问是否有类似 canvas 的 getImageData 方法用于three.js 几何体。

【问题讨论】：

请查看the documentation，特别是BufferGeometry 作为关联对象。 BufferGeometry 是未来之道，因为WebGL2Renderer 将仅支持BufferGeometry。

标签： javascript three.js

【解决方案1】：

正如评论中提到的ThJim01，THREE.BufferGeometry 是要走的路，但如果你坚持使用THREE.Geometry 来初始化你的三角形列表，你可以使用BufferGeometry.fromGeometry 函数从Geometry 生成BufferGeometry你最初制作的。

var geometry = new THREE.Geometry();
// ... initialize verts and faces ...

// Initialize the BufferGeometry
var buffGeom = new THREE.BufferGeometry();
buffGeom.fromGeometry(geometry);    

// Print the typed array for the position of the vertices
console.log(buffGeom.getAttribute('position').array);

请注意，生成的几何图形不会有索引数组，而只是一个不相交的三角形列表（因为它最初是这样表示的！）

希望有帮助！

【讨论】：