How we built the GitHub globe
Dec 21, 2020Tobias Ahlin

Summary
This post details the engineering effort behind the rendering of the GitHub globe using WebGL and the three.js library. It explains the scene composition with five layers (halo, globe, Earth's regions, open PR spikes, merged PR arcs), the use of CircleBufferGeometry and InstancedMesh for rendering Earth's regions by mapping circles to a world map PNG, and the visualization of pull requests using CubicBezierCurve3 and TubeBufferGeometry with setDrawRange for animation. It also covers centering the globe based on the device's timezone offset and the use of custom shaders for a halo effect to hide pixelation and reduce moiré patterns.