Beautiful, interactive WebGL globes have had something of a moment in the spotlight lately with both Stripe and GitHub featuring them prominently on their homepages. Each later went on to write a blog post about how they did so (Stripe’s is here and GitHub’s here if you’re curious).
Both globes are made up primarily of dots, which got me thinking about the various ways in which dots can be distributed across the surface of a sphere. Sphere packing is a complex puzzle under active deliberation by mathematicians so for the purposes of this article I’ve limited myself to laying out a few basic approaches and how to achieve them in WebGL.
Setting up the scene
Before going any further, we need to establish a basic WebGL scene in which to construct the sphere. I’m using Three.js as the de facto framework of choice for interacting with the WebGL API. I’ll aim to keep the code snippets in this article as concise and relevant as possible; explore any of the embedded Sandboxes for the full code.
After creating a scene, we establish a dotGeometries array which will eventually contain the geometries for all our dots. Then we create a blank vector, a 3D point in space inside the scene, the position of which will be reassigned each time we create a dot.