Oleksandr Kuzmenko, РедакторОпубліковано 5 хв читанняЗа участі AI · перевірено редактором
TL;DR
- Середній FPS маскує проблеми з кадровою синхронізацією; завжди перевіряйте графік часу кадру у профайлері
- Щільні воксельні сітки WebGL викликають стрибки затримки до 120 мс у разі блокування головного потоку
- Відокремлюйте оновлення сцени від циклу рендерингу за допомогою OffscreenCanvas та Web Workers
Ключові факти
- Зафіксована середня частота
- Близько 30 FPS (Chrome на RTX 3080 Ti Mobile)
- Стрибки тривалості кадру
- До 120 мс між оновленнями
Браузерна воксельна картографія
Розробник Пьотр Мігдал представив проєкт Warsaw in Voxels — інтерактивну 3D-карту центру Варшави на базі вокселів. Сервіс дозволяє досліджувати міські квартали та пам'ятки на кшталт хмарочоса Złota 44 безпосередньо у браузері без встановлення сторонніх розширень.
Проблеми WebGL та нестабільність кадрової частоти
Аналіз продуктивності у спільноті Hacker News показав, що обробка вокселів у браузері часто зазнає деградації навіть на потужному апаратному забезпеченні:
- Стрибки часу кадру: Профілювання на ноутбуці з
NVIDIA RTX 3080 Ti Mobileу браузері Chrome показало, що за середнього показника близько 30 FPS реальний час кадру стрибав до 120 мс через паузи між оновленнями. - Блокування потоку рендерингу: Користувачі з дискретними GPU повідомили про відчутні підвисання, викликані оновленням буферів геометрії у головному потоці WebGL.
Архітектурні висновки для веб-розробників 3D
Створення швидких тривимірних веб-інтерфейсів потребує жорсткого керування пам'яттю. Для рендерингу воксельних сцен обов'язковим є використання просторового розбиття (октодерев), відсікання невидимих об'єктів (frustum culling) та винесення важких розрахунків у Web Workers.
Коли використовувати
- Візуалізація стилізованих об'ємних 3D-даних та географічних моделей у браузері
- Бенчмаркінг меж рушія WebGL під час динамічного завантаження щільних воксельних чанків
Коли НЕ варто
- Промислові геоінформаційні системи (ГІС), що вимагають високої точності та плавності на мобільних пристроях
- Низькопродуктивні середовища без оптимізованого апаратного прискорення WebGL
Що зробити сьогодні
- Перевірте цикл WebGL через вкладку Performance у Chrome DevTools на наявність сплесків понад 100 мс
- Впровадьте рівні деталізації (LOD) та відсікання невидимих вокселів у тривимірних веб-сценах
Назви кроків узяті з блоку «Що зробити сьогодні».
Назви кроків узяті з блоку «Що зробити сьогодні». Перевірте цикл WebGL через вкладку Performance у Chrome DevTools на наявність сплесків понад 100 мс. Впровадьте рівні деталізації (LOD) та відсікання невидимих вокселів у тривимірних веб-сценах
- Перевірте цикл WebGL через вкладку Performance у Chrome DevTools на наявність сплесків понад 100 мс
- Впровадьте рівні деталізації (LOD) та відсікання невидимих вокселів у тривимірних веб-сценах
Що каже спільнота
It's almost unusably slow on my laptop. 3080ti mobile, windows 11, chrome. I opened the profiler and the update appears to be fast enough; roughly hitting 30fps... actual frame time seems to be about 120ms.
Unusable because of (lack of) performance. I have a laptop with a dedicated GPU...
The voxel version of Złota 44 doesn't do it justice. I mean, just look at this thing: https://en.wikipedia.org/wiki/Z%C5%82ota_44