I'm trying to figure out how to efficiently render millions of points on a website. I started using three.js, but I've faced challenges with progressively loading points based on the camera's position. I've managed to implement level of detail (LOD) rendering with an Octree, but it ends up showing noticeable "segments" at the node boundaries.
I've heard that Potree has great performance, but I need custom styles which are hard to modify. I found Potree Core, which seems more adaptable but isn't as widely supported. On top of that, there's CesiumJS which seems well-established and has big clients, but it isn't open source, and its UI is custom-built, making it less flexible than three.js.
Are there any other libraries or tools that could help me out?
4 Answers
If you’re looking for the most efficient way to render points, consider using WebGL directly. You can draw points by using `gl.drawArrays` and specifying `POINTS`. For each vertex output by the vertex shader, you can draw a square over that point, controlling its size with `gl_PointSize`. You could also use a fragment shader for custom styling!
Using an octree combined with frustum culling should work pretty well. Each octree node that is contained within or intersects the frustum can manage all the visible areas efficiently.
That approach makes sense, but it can lead to visual artifacts, like "blocks" where different level nodes are rendered. I found a detailed write-up that covers this issue, especially on page 41 of a thesis from Potree's GitHub.
Wait, what do you mean by Cesium not being open source? I've been using OpenLayers and Cesium to render millions of points!
I did mix up some things! CesiumJS and 3D Tiles are indeed open source, but Cesium Ion has a fee for commercial use. If we wanted to ditch Cesium Ion later, it could be a whole hassle to find a replacement.
Check out this Medium article on rendering 10 million small images on a webpage, it might give you some useful insights: https://medium.com/@vincent-bean/how-i-managed-to-render-10-million-small-images-on-a-webpage-590d75b81b4e
That sounds technically sound, but keep in mind there are practical concerns like fetching data efficiently based on proximity to the camera, adjusting point sizes for density, and avoiding gaps. I’m definitely on the lookout for libraries that simplify this!