3D-конфигуратор ювелирных изделий и AR-опыт

Покупателям ювелирных изделий премиум-класса нужно нечто большее, чем просто плоские изображения. Они хотят видеть, как золото отражает свет или как огранка бриллианта выглядит в реальности.

Мы с командой разработали готовую к эксплуатации eCommerce-платформу для клиента из ювелирной сферы. Мы создали 3D-конфигуратор и функцию примерки с использованием дополненной реальности (AR). Мы сделали так, чтобы всё это работало в мобильном браузере и не приводило к зависанию устройств.

Вот как мы выстроили технический процесс.

Конвейер подготовки ассетов

Ювелирные изделия изначально существуют в виде тяжелых CAD-файлов. Эти файлы часто весят более 50 МБ и содержат миллионы полигонов. Мы не можем использовать их в вебе, поэтому создали собственный конвейер оптимизации:

  • Ремешинг: Мы использовали Blender, чтобы уменьшить количество полигонов, сохраняя при этом четкость форм.
  • Запекание деталей: Мы преобразовали сложную геометрию в 2D-карты нормалей (Normal Maps). Это позволяет добиться детализированного освещения без использования тяжелых файлов.
  • PBR-текстурирование: Мы настроили специфические карты шероховатости (roughness) и металличности (metalness), чтобы поверхности выглядели реалистично.
  • Сжатие: Мы экспортировали ассеты в формат GLTF/GLB. Для уменьшения размера файлов с 50 МБ до менее чем 2 МБ мы использовали сжатие Google Draco.

Движок рендеринга

Мы использовали Three.js для прямого взаимодействия с GPU пользователя. Чтобы металлы выглядели премиально, мы использовали изображение с высоким динамическим диапазоном (HDRI) в качестве карты окружения (environment map). Это позволяет металлу отображать отражения в реальном времени, когда пользователь вращает кольцо.

Изменение материалов мы реализовали через код. Когда пользователь выбирает металл, мы обходим сцену GLTF и мгновенно обновляем значения цвета, шероховатости (roughness) и металличности (metalness).

Дополненная реальность (AR)

Мы внедрили двухдвижковый рабочий процесс для мобильных пользователей:

  • Android: Мы использовали интеграцию со Scene Viewer.
  • iOS: Мы использовали веб-стандарты для обеспечения кроссплатформенной поддержки.

Главный урок

Современная фронтенд-разработка заключается в построении эффективных конвейеров (pipelines). Вы должны преобразовывать тяжелые файлы в легковесные ассеты и обеспечивать работу высококачественного визуального опыта в стандартных мобильных браузерах.

Создавали ли вы интерактивные 3D-элементы или использовали WebXR в своих проектах? Расскажите о своих методах оптимизации в комментариях.

Источник: https://dev.to/tharul/engineering-a-3d-customizer-ar-experience-for-a-jewelry-ecommerce-web-app-2fn4