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