Разработчик запустил проект Git City — веб-визуализацию GitHub-профилей, где активность программистов превращается в 3D-город в стиле пиксель-арта. Каждый разработчик становится отдельным зданием, а статистика профиля определяют его форму.
Источник: https://github.com
Сервис использует публичную статистику GitHub и генерирует виртуальный город прямо в браузере.
Как GitHub-активность превращается в здания
Алгоритм генерации домов очень понятный:
- количество коммитов определяет высоту здания;
- число репозиториев влияет на ширину основания;
- светящиеся окна показывают недавнюю активность.
В результате получается город из тысяч построек, где более активные разработчики строят небоскрёбы.
Как это работает в браузере
Под капотом проекта — React Three Fiber, библиотека для работы с Three.js в React.
Главная техническая проблема — рендеринг огромного количества объектов. Один город может содержать десятки тысяч зданий, каждое с анимацией окон.
Чтобы браузер не превращался в реактивный двигатель, автор использовал два приёма:
- GPU instancing — рендер множества одинаковых объектов одним вызовом;
- динамическую смену уровня детализации (LOD) в зависимости от расстояния камеры.
Визуализация даёт взглянуть на свой GitHub немного иначе: если коммитов мало — у вас не небоскрёб, а маленький домик на окраине города.
