BufferGeometry vs Points



I’ve gotten the basics of working with Three.js down, and I’m now working on a project where I want to render a large number of interactive planes (1,000,000) that are static (it’s for a data visualization).

It seems to me that using THREE.Points is the easiest way to render a large number of objects by using a PointsMaterial and a sprite map. I’m guessing that the way to make this interactive is by creating a raycaster for mouseover events. The alternative approach I had in mind was using BufferPlaneGeometry to generate 1,000,000 BufferPlaneGeometry objects.

Which would be a more performance-optimized (loading time is important) approach? Using THREE.Points or using BufferPlaneGeometry?


BufferGeometry vs Points

It’s actually better to call the title “Meshes vs. Points” since you use BufferGeometry for both types of primitives.

No. You would create a single PlaneBufferGeometry object and reuse it for your meshes. But this approach would have a bad performance since you issue for each mesh object a draw call. A single Points object is rendered with just one draw call instead.

When using meshes you can avoid this problem by merging the geometry of all meshes (like in this example) or by using instanced rendering. I suggest you start with a Points object and see if it works for your particular use case.


Got it - thanks for clarifying and the response!