Рассмотрим способы ускорения показа высокополигональных 3D моделей в браузере, и каких результатов при этом можно добиться.

Проблема показа детализированных 3D моделей

При размещении на сайте 3D модели часто требуется, чтобы она была приближена к реальным объектам, или же просто стоит задача показа именно нужной степени детализации. В этом случае мы сталкиваемся с проблемой демонстрации «тяжелых» моделей (в данной статье это модели, у которых свыше 1 млн. полигонов), особенно на слабых устройствам (часто это мобильные телефоны и планшеты в среднем и бюджетном сегментах).

Оптимизация просмотра 3D моделей

Для решения задачи демонстрации высокодетализированных моделей применяют различные алгоритмы, например:

• Батчинг (Batching)

• Запекание освещения (Baking)

• Отсечение (Occlusion Culling)

• Скрытие элементов, которые занимают слишком мало места на экране

• Упрощение модели во время вращения и масштабирования (например, показ только каркаса)

Рассмотрим эффективность применения подобных методов оптимизации на примере сервиса Site3D Configurator, созданного на основе библиотеки three.js. Сравним алгоритмы данной платформы с онлайн средством просмотра gltf-viewer.donmccurdy.com. Далее приведем наиболее показательные результаты сравнения.

Как видим, оптимизация дает примерно в 2 раза лучший показатель FPS (число отрисовок сцены в секунду) по сравнению со стандартным сервисом просмотра.

Еще мы наблюдаем у тестируемой платформы намного более низкие значения FPS при отключении алгоритмов оптимизации по сравнению с обычным средством просмотра. Вероятно, это связано с более реалистичной графикой внутри Site3D Configurator (например, детализированные тени).

Также мы видим рост эффективности алгоритмов для моделей с большим количеством элементов, в том числе и одинаковых.

Заключение

Исходя из данного эксперимента можно сделать вывод, что благодаря современным сервисам просмотра 3D моделей, таких как Site3D Configurator, демонстрация достаточно высоконагруженных моделей доступна уже сейчас для массового использования.