Git City превращает GitHub-профиль в 3D-город

Разработчик запустил проект Git City — веб-визуализацию GitHub-профилей, где активность программистов превращается в 3D-город в стиле пиксель-арта. Каждый разработчик становится отдельным зданием, а статистика профиля определяют его форму.

Источник: https://github.com

Сервис использует публичную статистику GitHub и генерирует виртуальный город прямо в браузере.

Как GitHub-активность превращается в здания

Алгоритм генерации домов очень понятный:

• количество коммитов определяет высоту здания;
• число репозиториев влияет на ширину основания;
• светящиеся окна показывают недавнюю активность.

В результате получается город из тысяч построек, где более активные разработчики строят небоскрёбы.

Как это работает в браузере

Под капотом проекта — React Three Fiber, библиотека для работы с Three.js в React.

Главная техническая проблема — рендеринг огромного количества объектов. Один город может содержать десятки тысяч зданий, каждое с анимацией окон.

Чтобы браузер не превращался в реактивный двигатель, автор использовал два приёма:

• GPU instancing — рендер множества одинаковых объектов одним вызовом;
• динамическую смену уровня детализации (LOD) в зависимости от расстояния камеры.

Визуализация даёт взглянуть на свой GitHub немного иначе: если коммитов мало — у вас не небоскрёб, а маленький домик на окраине города.