GitHub

How we built the GitHub globe

Dec 21, 2020Tobias Ahlin
How we built the GitHub globe
SummaryAI, from the source post

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.

More from the Homepage Globe Data Pipeline trail