GitHub is where the world builds software. More than 56 million developers around the world build and work together on GitHub. With our new homepage, we wanted to show how open source development transcends the borders we’re living in and to tell our product story through the lens of a developer’s journey.
Now that it’s live, we would love to share how we built the homepage directly from the voices of our designers and developers. In this series, we’ll discuss:
The main goals we set out to achieve in the design and development of the globe were:
An interconnected community. We explored many different options but ultimately landed on pull requests. It turned out to be a beautiful visualization of pull requests being opened in one part of the world and closed in another.
A showcase of real work happening now. We started by simply showing the pull requests’ arcs and spires, but quickly realized that we needed “proof of life.” The arcs could quite as easily just be design animations instead of real work. We iterated on ways to provide more detail and found most resonance with clear hover states that showed the pull request, repo, timestamp, language, and locations. Nat had the idea of making each line clickable, which really up-leveled the experience and made it much more immersive. Read more here.
Attention to detail and performance. It was extremely important to us that the globe not only looked inspiring and beautiful but that it performed well on all devices. We went through many, many iterations of refinement, and there’s still more work to be done.
Rendering the globe with WebGL:-
At the most fundamental level, the globe runs in a WebGL context powered by three.js. We feed it data of recent pull requests that have been created and merged around the world through a JSON file. The scene is made up of five layers: a halo, a globe, the Earth’s regions, blue spikes for open pull requests, and pink arcs for merged pull requests. We don’t use any textures: we point four lights at a sphere, use about 12,000 five-sided circles to render the Earth’s regions, and draw a halo with a simple custom shader on the backside of a sphere.
Top comments (0)