Главная проблема разработки WebAR (дополненной реальности внутри браузера) — это вес 3D-моделей. Мобильные устройства пользователей не обладают ресурсами мощных ПК, а сотовые сети не всегда идеальны. В этой статье команда Plinar делится техническими советами о том, как ужать тяжелую модель с 2 миллионов полигонов до идеальных 10 MB без видимой потери качества.
Полигональная сетка (Ретопология и Децимация)
Если к нам попадают CAD-чертежи от заказчика, то напрямую загрузить их в браузер не получится. Инженерные модели слишком точные и избыточные для визуализации. Наш пайплайн:
- Удаление внутренних деталей: покупателю снаружи шкафа не нужно видеть каждый отдельный винтик жесткости внутри. Всё скрытое от глаз беспощадно удаляется.
- Децимация: мы используем алгоритмы автоматического схлопывания близких вершин там, где геометрия плоская, оставляя полигоны только на изгибах. Оптимальное количество треугольников (tris) для одной модели в WebAR: 50 000 — 100 000.
Запекание текстур (Baking)
В WebAR лучше всего работает шейдер PBR (Physically Based Rendering). Но использовать 5 разных материалов с отдельными материалами — плохая идея (большое количество Draw Calls грузит процессор). Мы запекаем все слои в одну развертку UV (через Substance Painter или Blender). Идеальная связка:
- BaseColor (с вшитым Ambient Occlusion для фейковых теней)
- Normal Map (чтобы сымитировать рельеф сэкономленных полигонов)
- ORM Map: склеенные в каналы R, G, B текстуры (Occlusion, Roughness, Metallic) — это экономит вес в 3 раза!
Компрессия и форматы
Для браузеров и Android стандартом является .glb / .gltf, а для AR Quick Look (iOS) необходим .usdz. Перед экспортом мы обязательно прогоняем файлы через Draco-компрессию, а текстуры пережимаем в KTX2 или WEBP. Это позволяет сократить вес финального ресурса с сотни мегабайт до комфортных для загрузки 5-10 MB.