Stunning Dot Spheres with WebGL
<p>Beautiful, interactive WebGL globes have had something of a moment in the spotlight lately with both <a href="https://stripe.com/en-gb" rel="noopener ugc nofollow" target="_blank">Stripe</a> and <a href="https://github.com/" rel="noopener ugc nofollow" target="_blank">GitHub</a> featuring them prominently on their homepages. Each later went on to write a blog post about how they did so (Stripe’s is <a href="https://stripe.com/blog/globe" rel="noopener ugc nofollow" target="_blank">here</a> and GitHub’s <a href="https://github.blog/2020-12-21-how-we-built-the-github-globe/" rel="noopener ugc nofollow" target="_blank">here</a> if you’re curious).</p>
<p>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.</p>
<h1>Setting up the scene</h1>
<p>Before going any further, we need to establish a basic WebGL scene in which to construct the sphere. I’m using <a href="https://threejs.org/" rel="noopener ugc nofollow" target="_blank">Three.js</a> 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.</p>
<p>After creating a scene, we establish a <code>dotGeometries</code> 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.</p>
<p><a href="https://medium.com/@whwrd/stunning-dot-spheres-with-webgl-4b3b06592017">Website</a></p>