使用Three.js进行流式绘制

Stream drawing with Three.js

本文关键字：绘制 Three js 使用      更新时间：2023-09-26

我正在寻找Three.js中正确使用对象的指导，这将使我能够从流中读取大量数据并进行渲染，而无需在整个应用程序生命周期中将数据存储在内存中。

根据我的理解，在普通的WebGL中，这将通过gl_drawArray来实现，但哪个Three.js对象表示这种行为？

当使用ParticleSystem对象时，数据被放入内存中，因为我需要在将所有点传递给ParticleSystem之前将其放入Geometry节点，所以我认为这不合适。

感谢您提供的任何帮助。

编辑：为了澄清，我需要阅读几百万个x,y,z条目，并将每个条目显示为空间中的一个点。我现在使用的流程是（简而言之）：

var geometry = new THREE.Geometry();
while( hasMoreData ){
    var vertex = new THREE.Vector3(x,y,z);
    geometry.vertices.push( vertex );
}
sphere = new THREE.ParticleSystem( geometry, shaderMaterial );
scene.add(sphere);

使用这个过程，我的内存消耗增加了大约1GB，因为在构建几何体对象时数据仍然存在。有没有办法从文件中读取这些数据而不使其在内存中持久存在？

关于这个线程不会得到更多答案的可能性，我恢复到的解决方案是使用THREE.BufferGeometry而不是THREE.Geometry，这样就可以使用GPU内存。使用这种方法，GPU会消耗掉大约300MB的额外内存，这比RAM中消耗掉的1GB更可取。

然而，其他输入非常受欢迎，因为与其他方法相比，GPU性能会受到FPS的影响。

相关文章：