An Interest In:
Web News this Week
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
- March 12, 2024
- March 11, 2024
GitHub Globe with Three.JS
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 were living in and to tell our product story through the lens of a developers journey.
Now that its live, we would love to share how we built the homepage directly from the voices of our designers and developers. In this series, well 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 theres 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 Earths regions, blue spikes for open pull requests, and pink arcs for merged pull requests. We dont use any textures: we point four lights at a sphere, use about 12,000 five-sided circles to render the Earths regions, and draw a halo with a simple custom shader on the backside of a sphere.
Original Link: https://dev.to/santosharron/github-globe-with-threejs-adk
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To