Система порционной доставки тяжёлого контента для веба: сцены и изображения режутся на чанки на этапе сборки, в браузере собираются обратно — по приоритету, с эффектом и с честным замером. Первый кадр за долю секунды вместо пустого экрана. Ниже две подборки живых демо; в каждом — HUD с телеметрией (сворачивается кнопкой ─), симуляция 3G и кнопка «пересобрать».
Пространство, в котором стоишь ты, а вокруг висят девять проектов. Смотришь по сторонам мышью (на телефоне — поворачивая сам телефон), выбираешь баннер — и влетаешь внутрь: дворфы у башни, карта Deployment сверху, подземная арена MechaPulse, детская комната Micro Racer, монтаж камеры PigeonHole. Каждый мир собирается из чанков на глазах.
Процедурный мини-город. 16 бинарных чанков геометрии, кварталы слетаются из ниоткуда волной от центра, окна зажигаются точками.
2 363 реальных здания из OpenStreetMap с реальными высотами (все три башни Marina Bay Sands на месте). 16 тайлов, волна застройки от залива, бегущая строка имён.
Фотопанорама у моста Хеликс (та самая точка «встал и отсканировал»). 72 тайла; первыми приезжают те, куда направлен взгляд. Матрица-проявление. A/B: чанки против монолита.
Обычный лендинг, где каждая картинка порезана на куски: ленивая очередь по скроллу, матрица-проявление, декод заголовков, карточки вылетают. Счётчик байт в шапке.
Ответ на главный вопрос «а где видно, что грузится по кускам?»: здесь мир не загружен заранее вообще — тайлы качаются только в окне впереди по маршруту и выгружаются позади (счётчики «в памяти / выгружено» в HUD). Камера едет вдоль дороги, в красивых точках делает круговой облёт. Внутри: живой трафик, работающие светофоры и датчик PigeonHole на столбе — exploded-вид начинки, конус «куда смотрит камера» и живая панель аналитики с рамками детекций. Эффекты проявления: Голограмма (скан-фронт) и Треугольники — мир буквально выстраивается по треугольникам. Сцены собраны из моделей, которые ты скинул (Sketchfab): конвейер режет GLB на пространственные тайлы по треугольникам, квантует в int16 и выкидывает лишние текстуры.
Ночной каньон с биллбордами: 1.26 млн треугольников, 36 тайлов, голограммная сборка. Самая тяжёлая сцена — и именно тут стриминг решает.
Game-ready квартал с вывесками и зебрами. Датчик на светофоре смотрит на перекрёсток, машины ждут красного, панель показывает поток за 60 секунд.
Узкие улицы, балконы, зелень, фонари. Кольцевой маршрут по кварталу, сборка из треугольников, датчик у перекрёстка со школой.
Гибрид демо 3 и датчика: реальная фото-панорама (72 тайла, скайбокс) + цифровой слой поверх — дорога, живой трафик, светофор с PigeonHole. Слой материализуется над фото; облёт датчика, зум вплотную, тап по детали.
Точка заказчика в Сингапуре: перекрёсток Orchard Rd и Scotts Rd, реконструкция по открытым референсам. На фонарном столбе — счётный бокс PigeonHole на высоте 4.2 м, камера облетает его. День/ночь, стоп-кадр для осмотра, зум вплотную.
Та же сцена, что A1, но камера никуда не едет: она стоит у датчика на фиксированной дистанции и облетает его. Кнопка «Стоп» останавливает вращение, зум и тап по детали — как в режиме осмотра.
Та самая точка заказчика, но фоном идёт настоящая фотопанорама: 8 уличных кадров KartaView (CC BY-SA), снятых на перекрёстке Orchard Rd × Scotts Rd, сшиты в 360° и нарезаны на 32 тайла. Поверх — столб с боксом PigeonHole, камера облетает устройство.
Настоящий 3D-фотореал перекрёстка Orchard × Scotts × Paterson (Google Photorealistic 3D Tiles, внутренний показ): текстурированные ТЦ, дорога с разметкой — 741 тайл собирается кольцами от столба. Бокс по производственному чертежу, монтаж в 3 патентных шага, крышка открывается. Ещё два режима: блокаут OSM (основа пака моделера) и фото-панорама точки.
Тот же перекрёсток со светом, посчитанным заранее: тень солнца и затенение земли запечены в Blender и лежат в двух каналах одного лайтмапа, AO фасадов — в вершинном цвете, под машинами спрайт-тени, карта теней рисуется один раз вместо каждого кадра. Картинка та же, кадр вдвое дешевле.
| Сценарий | Монолит: первый кадр | StreamForge: первый кадр | Выигрыш |
|---|---|---|---|
| Стрит-вью 360° (2.54 МБ контента) | 4.2 с — экран пуст, пока не доедет всё | 1.6 с — резкий базовый слой (превью ~1.1 с) | ×2.6 · на Slow 3G расчётно ×10 |
| three.js r160 (доставка движка) | 671 КБ · 3.15 с (Flask, без gzip) | 169 КБ · 1.54 с (nginx + gzip) | ×2.0 · −75% трафика |
| Чанк геометрии .sfc (Марина Бэй, тайл 0) | 85 КБ · 1.46 с (как отдавалось до) | 28 КБ · 1.10 с (gzip, int16-квантование жмётся) | −67% байт по проводу |
| Начало стройки 3D-сцены | ждать весь файл сцены | 1.1 с — первый тайл уже растёт на экране | сцена «живая» с первой секунды |
Методика: медианы 3 холодных прогонов curl из Дананга до VPS (RTT+TLS ≈ 0.9–1.1 с в каждой цифре), 31.08.2026. «Первый кадр» — первое осмысленное изображение; «монолит» — тот же контент одним файлом того же качества. Живые цифры конкретно твоей сети — в HUD каждого демо (плюс симуляция 3G там же). HTTP/2 включён на сервере (ALPN h2 подтверждён) — 72 тайла панорамы мультиплексируются в одном соединении.
Карта и панорамы никогда не грузятся целиком: пирамида уровней детализации, видимые тайлы первыми. У нас так работают демо 3 и 4: превью → базовый слой → тайлы по направлению взгляда.
Города стримятся пространственными тайлами с приоритетом по камере и бюджетом на кадр. Демо 1 и 2 — та же идея: сетка тайлов, приоритет по расстоянию, догрузка без блокировки рендера.
Продакшн жмёт геометрию квантованием и спец-кодеками, текстуры — GPU-форматами. Наш .sfc — квантование позиций в int16 + палитра цветов uint8: города по 0.3–1.7 МБ без кодеков.
Браузеру важно не «скачать всё», а скачать нужное первым. Наш лоадер держит очередь с динамическими приоритетами: повернул камеру — очередь пересортировалась.
Пока едет полное изображение, показывают крошечное размытое превью (2–4 КБ). У нас превью зашито прямо в манифест (base64) — первый пиксель появляется одновременно с манифестом.
В Unity тот же принцип: контент бьётся на бандлы, грузится по ключу/лейблу с зависимостями. В проекте Site восстановлен наш нарезчик картинок под Addressables — этот же конвейер, но для Unity WebGL; веб-демо и Unity-порт делят одну идеологию манифестов.
44 байта заголовка + позиции int16 (квантование в bbox) + цвета uint8 + канал задержек uint8 для анимации сборки + индексы uint32. Парсинг — три TypedArray, без JSON и без ожидания.
Один вершинный шейдер, встраиваемый в любой материал three.js: каждый кусок стартует разбросанным по XZ и прижатым к земле, восстаёт с overshoot и вспышкой. На CPU — ноль работы.
HUD меряет то, что видит пользователь: байты, чанки, время первого кадра, полную сборку и FPS. Симуляция 3G душит канал до 1.4 Мбит/с / 400 Кбит/с прямо в лоадере — можно щупать на быстром Wi-Fi.