我可以跳过正常语法并使用three.js中的几何缓冲区来提高性能吗？

Posted 2021-05-03

我是几何生成和操纵领域的新手，我打算在复杂和大规模的范围内这样做。我知道这样做的基本方法就像它显示了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点（在缓冲区的情况下，扁平化）一个1D类型的数组）我知道在GPU上使用着色器处理时，这种大规模操作的速度有多快。

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

基本上我问是否有类似canvas的get.mages方法的three.js几何。

答案

正如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);

请注意，结果几何体将不具有索引数组，只是一个脱节三角形的列表（因为它首先表示为！）

希望有所帮助！