javascript - 使用 Three.js 进行流式绘图

标签 javascript three.js rendering webgl

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

根据我的理解,在普通的 WebGL 中,这将通过 gl_drawArray 完成,但是哪个 Three.js 对象代表这种行为?

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

感谢您提供的任何帮助。


编辑: 为了澄清,我需要读取几百万个 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。

关于javascript - 使用 Three.js 进行流式绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18534946/

相关文章:

javascript - 如何修复 Google 美化 HTML 转义序列的处理

javascript - Angular 4 : Build to prod: Property is private and only accessible within class

javascript - Three.js 对象上的多种 Material 通过 OBJMTLLoader 加载

javascript - 从用户上传设置 Three.js 背景

javascript - Threejs - 使用 MeshDepthMaterial 绘制透明纹理

c++ - OpenGL 单个 VBO 与多个 VBO

html - 在标准模式下渲染有什么好处(除了更可预测的渲染)?

javascript - ES6 : Conditional use of spread operator

javascript - 如何在不知道元素 ID 的情况下单独替换元素?

opengl - 我可以有两个统一的缓冲区指向 OpenGL 中的同一个 block 吗?