Creating point cloud with a points stream from server


In my program, I use THREE.Points and THREE.BufferGeometry to create a point cloud. I have all of my points with me(send by backend server) before I use these APIs.

Now, requirement has changed and backend server may stream the points rather than sending entire data in a single lump. So, now I need to render the points progressively, ie points would keep on adding to the point cloud as and they arrive from backend.

How can this be achieved in Three.js?

There is no loader than can stream such data from the backend. Besides, even if you stream the geometric data (e.g. with the Streams API) you still need the know from the very beginning how much data you are going to render. This is necessary because you can’t resize a BufferAttribute. You have to create them with the final size.

After that, you can progressively enhance the data of a BufferAttribute by pushing more data into the buffer and then set needsUpdate to true. You might also set the updateRange property accordingly so you only render the relevant part of the buffer with WebGL.


So, if i create a buffer geometry with let’s say 1000 entities and all of then at the begining are transparent, can i get the color values from a stream and update the corresponding entities?

I’ve never used the Streams API so far but any approach should work as long as you now in advance how large your buffers are going to be. It won’t work well if you have to dynamically extend buffers (which is technically not possible since typed arrays and thus buffer attributes are fixed sized).