Как разместить на сайте высокодетализированную модель?

Пример высокодетализированной 3D модели (более 22 млн. полигонов)

Пример высокодетализированной 3D модели (более 22 млн. полигонов)

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

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

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

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

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

  • Батчинг (Batching)

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

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

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

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

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

Исследование влияния характеристик модели на FPS до и после ускорения просмотра.Замеры производились на ноутбуке в среднем ценовом сегменте со стандартной встроенной видеокартой (CPU i7-11370H, 16 Gb RAM LPDDR4x, Intel Iris X Graphics).

Исследование влияния характеристик модели на FPS до и после ускорения просмотра.

Замеры производились на ноутбуке в среднем ценовом сегменте со стандартной встроенной видеокартой (CPU i7–11370H, 16 Gb RAM LPDDR4x, Intel Iris X Graphics).

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

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

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

Заключение

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

© Habrahabr.ru