Na głównej stronie github można obejrzeć commity nałożone na model Ziemi.

Globus

GitHub to miejsce, w którym świat tworzy oprogramowanie - ponad 56 milionów programistów na całym świecie współpracuje ze sobą. Na głównej stronie projektu GitHub można teraz zobaczyć w jaki sposób rozwój oprogramowania open source przekracza granice, w których żyjemy, oraz wcielić się w programistę-podróżnika.

Globus jest utworzono na podstawie statystyk wystosowywania pull requestów. Pozwoliło to na wizualizację takich żądań otwieranych w jednej części świata i zamykanych w innej. Łuki jakie widać na głównej stronie to więc to jak przebiegają pull requesty. Oprócz tego po najechaniu myszką na dane miejsce na globie zobaczysz dane pull requesta ale także repozytorium, sygnaturę czasową, język i lokalizację. Każda linia jest klikalna – możesz od razu odwiedzić konkretne repozytorium.

Od strony graficznej

Świat jest renderowany za pomocą WebGL. Na najbardziej podstawowym poziomie kula ziemska działa w kontekście WebGL obsługiwanym przez skrypt JS three.js. Dane o ostatnich pull requestach, które zostały utworzone i scalone na całym świecie, są dostarczane za pomocą pliku JSON. Scena składa się z pięciu warstw: aureoli, kuli ziemskiej, regionów Ziemi, niebieskich kolców dla żądań otwarcia i różowych łuków dla połączonych żądań ściągnięcia. Nie są używane żadne tekstury: mamy jedynie cztery źródła światła skierowane kulę i około 12 000 pięciokątnych okręgów do renderowania regionów Ziemi. Do tego aureola rysowana za pomocą prostego, niestandardowego modułu cieniującego z tyłu kuli.

Upewnij się, że widzisz swoją lokalizację

Głównym działaniem globu jest oczywiście wizualizacja wszystkich otwieranych żądań ściągnięcia pliku. Kiedy wchodzisz na nową stronę główną GitHub, powinieneś widzieć swoją lokalizację, gdy pojawia się kula ziemska. Oznacza to, że GitHub musi się jakoś dowiedzieć gdzie na Ziemi jest dany internauta odwiedzający ich stronę. Chcieli dodatkowo osiągnąć ten efekt bez opóźniania pierwszego renderowania przez wyszukiwanie adresu IP, więc posłużyli się pewnym trickiem. Ustawili kąt początkowy kuli ziemskiej na środek (nad Greenwich), przyjrzeli się przesunięciu strefy czasowej urządzenia i przekonwertowali to przesunięcie na obrót wokół własnej osi kuli ziemskiej (w radianach):

const date = new Date ();
const timeZoneOffset = date.getTimezoneOffset () || 0;
const timeZoneMaxOffset = 60 * 12;
RotationOffset.y = ROTATION_OFFSET.y + Math.PI * (timeZoneOffset / timeZoneMaxOffset);

Wizualizacja ściągnięć

Różowe łuki to tak naprawdę scalony wynik pull requestów. Każdy taki scalony wpis żądania ściągnięcia ma dwie lokalizacje: gdzie został otwarty i gdzie został scalony. Następnie dochodzi do mapowania tych lokalizacji na model globu i rysowana jest krzywa Beziera między tymi dwoma lokalizacjami.

Sprawdź oferty pracy na TeamQuest

Twórcy przygotowali trzy różne orbity dla tych krzywych i im dłużej te dwa punkty są od siebie oddalone, tym mocniej wyciągają w przestrzeń łuk.

Strona główna i cały świat muszą dobrze działać na różnych urządzeniach i platformach, co na początku stanowiło źródło ograniczeń twórczych. Nie wszystkie współczesne komputery i tablety mogą renderować świat z szybkością 60 klatek na sekundę przy włączonym antyaliasingu. Ostatecznie zdecydowano się wyłączyć antialiasing i zoptymalizować grafikę pod kątem wydajności. W rezultacie otrzymaliśmy ostrą i pikselowaną linię biegnącą wzdłuż lewej górnej krawędzi kuli ziemskiej, gdy podświetlona krawędź kuli ziemskiej spotykała się z ciemniejszym kolorem tła.

Na blogu GitHuba można zapoznać się z bardziej szczegółowymi informacjami, w tym bardziej technicznymi tajnikami globu.