CODEWITHSUNDEEP
javascriptthree.jsrenderingwebgl
BlackBox
BlackBox

Reputation: 2233

Stream drawing with Three.js

I'm looking for guidance towards the right object usage in Three.js which will allow me to read a large amount of data from a stream and render it without having to store the data in memory throughout the application lifetime.

From my understanding, in plain WebGL this would be accomplished through gl_drawArray, but which Three.js object represents this behaviour?

When using the ParticleSystem objects, data is placed into memory as I need to place all the points into a Geometry node before passing it to the ParticleSystem, so I don't think this is suitable.

Thanks for any assistance you can offer.

Edit: To clarify, I need to read a few million x,y,z entries and display each entry as a dot in space. The process I'm using at the moment is (in short):

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

Using this process, my memory consumption goes up approximately 1GB as the data persists in building the geometry object. Is there anyway to read this data from a file without making it persist in memory?

Upvotes: 3

Views: 1667

Answers (1)

BlackBox
BlackBox

Reputation: 2233

On the off-chance that this thread will get no more answers, the solution I've reverted to, is to use THREE.BufferGeometry instead of THREE.Geometry so that the GPU memory is used instead. Using this approach, approximately 300MB extra memory is used up by the GPU which is more preferable than the 1GB used up in RAM.

Other inputs are very welcome however, as GPU performance takes a FPS hit in comparison to the other approach.

Upvotes: 3

Related Questions