Модель, созданная для высококачественного рендера, не всегда подходит для сайта.
Офлайн-рендер может обрабатывать миллионы полигонов, большие текстуры и сложные материалы в течение нескольких минут или часов.
Браузер должен отображать модель в реальном времени, часто на смартфоне с ограниченной памятью, батареей и графической производительностью.
Оптимизация уменьшает техническую нагрузку, сохраняя важное визуальное качество.
Почему 3D-модели нужно оптимизировать
Сцена для рекламного рендера может содержать:
— Миллионы полигонов
— Модификаторы subdivision
— Скрытую геометрию
— Внутренние компоненты
— Десятки материалов
— Текстуры 4K или 8K
— Сложные стеклянные шейдеры
— Большие анимационные файлы
— Неиспользуемые камеры
— Неиспользуемые источники света
— Дублированные объекты
— Данные для офлайн-рендера
Эти элементы могут быть допустимы в производственной сцене, но неэффективны для сайта.
Какова цель оптимизации?
Цель не состоит в получении минимального файла любой ценой.
Чрезмерно сжатая модель может быстро загружаться, но выглядеть неточно и непрофессионально.
Нужно найти баланс между:
Визуальным качеством
Товар должен сохранить узнаваемый силуэт, материалы и важные детали.
Скоростью загрузки
Файл должен загружаться за разумное время, включая мобильные сети.
Производительностью
Модель должна плавно вращаться и стабильно работать на целевом устройстве.
Шаг 1. Определите сценарий использования
Перед обработкой модели нужно понять, как она будет использоваться.
Просмотрщик товара
Покупатель вращает объект и изучает детали.
WebAR
Модель размещается в реальном пространстве в правильном масштабе.
Конфигуратор
Пользователь меняет цвета, материалы или компоненты.
Техническая презентация
Модель содержит анимацию, подписи, exploded view или съемные детали.
Разные сценарии требуют разных решений.
Например, внутренняя геометрия не нужна для обычного просмотра мебели, но необходима для технической анимации.
Шаг 2. Оптимизируйте геометрию
Удалите невидимую геометрию
Удалите поверхности и детали, которые пользователь никогда не увидит.
Например:
— Внутренние стенки
— Скрытые винты
— Закрытые механические детали
— Невидимые нижние поверхности
— Дублированные объекты
— Геометрию, оставшуюся после модификаторов
Не удаляйте внутренние элементы, если товар прозрачный, открывается или используется в exploded-анимации.
Уменьшите плотность полигонов
Чрезмерное количество полигонов увеличивает размер файла и нагрузку.
Наиболее заметно можно оптимизировать:
— Плоские поверхности
— Цилиндры с избыточным количеством сегментов
— Скрытые компоненты
— Очень мелкие фаски
— Резьбу
— Плотные сканы
Важные силуэты и изгибы необходимо сохранить.
Используйте ретопологию
Автоматическое уменьшение может создавать растянутые треугольники, неровные края и ошибки сглаживания.
Контролируемая ретопология дает более чистую сетку.
Она особенно полезна для:
— AI-моделей
— 3D-сканов
— Фотограмметрии
— Скульптов
— CAD-моделей
— Поврежденной топологии
Запекайте мелкие детали
Мелкие элементы можно передавать текстурами вместо геометрии.
Например:
— Швы
— Текстура ткани
— Маленькие винты
— Рельеф поверхности
— Гравировка
— Тонкие линии панелей
— Незначительные фаски
Normal Map сохраняет видимость детализации без тысяч дополнительных полигонов.
Рекомендуемое количество полигонов
Универсального лимита не существует.
Производительность также зависит от материалов, текстур, прозрачности, анимации, освещения и числа объектов.
Практические ориентиры для одной товарной модели:
Простой товар
Примерно 20 000–50 000 треугольников.
Товар средней сложности
Примерно 50 000–120 000 треугольников.
Детализированный товар
Примерно 120 000–200 000 треугольников с обязательным тестированием.
Это отправные точки, а не жесткие стандарты.
Хорошо организованная модель с большим количеством треугольников может работать лучше маленькой модели с десятками материалов и тяжелыми текстурами.
Шаг 3. Проверьте нормали и сглаживание
Ошибочные нормали вызывают:
— Темные пятна
— Поврежденное освещение
— Невидимые поверхности
— Неожиданную прозрачность
— Видимые швы
— Резкие переходы
— Искаженные отражения
Перед экспортом проверьте:
— Направление полигонов
— Vertex Normals
— Сглаживание
— Sharp Edges
— Дублированные вершины
— Открытые поверхности
— Отрицательный масштаб
— Непримененные трансформации
— Non-manifold-геометрию
— Перекрывающиеся полигоны
После экспорта сглаживание необходимо проверить повторно в целевом просмотрщике.
Шаг 4. Подготовьте UV-развертку
UV-развертка определяет размещение двумерных текстур на трехмерной поверхности.
Хорошая веб-развертка должна иметь:
— Минимум случайных пересечений
— Достаточные отступы
— Равномерную плотность текстуры
— Эффективное использование пространства
— Правильное направление материала
— Отсутствие слишком маленьких важных островов
— Минимум пустого пространства
— Предсказуемое размещение этикеток
Перекрывающиеся UV могут использоваться для симметричных деталей, но не подходят для уникальных надписей или запеченного освещения.
Шаг 5. Преобразуйте материалы в PBR
Офлайн-рендеры используют сложные материалы, которые не всегда совместимы с веб-просмотрщиками.
Для real-time-графики материалы обычно преобразуются в PBR.
Base Color
Определяет основной цвет поверхности.
Metallic
Определяет металлические свойства.
Roughness
Управляет четкостью отражений.
Normal
Добавляет мелкие детали без дополнительной геометрии.
Ambient Occlusion
Добавляет контактные тени в углублениях.
Emissive
Определяет светящиеся участки.
Процедурные материалы обычно необходимо запекать в изображения.
Шаг 6. Уменьшите количество материалов
Каждый отдельный материал увеличивает нагрузку на отрисовку.
CAD-модель или сцена для рендера может содержать множество почти одинаковых материалов.
Где это возможно:
— Объединяйте дублирующиеся материалы
— Используйте общие материалы
— Создавайте текстурные атласы
— Удаляйте пустые material slots
— Объединяйте совместимые каналы
— Избегайте лишней прозрачности
Атласы полезны, когда части объекта не должны изменяться независимо.
Для конфигуратора отдельные материалы могут быть необходимы.
Шаг 7. Оптимизируйте текстуры
Текстуры часто занимают больше места, чем геометрия.
Они также потребляют память устройства после загрузки.
1K
Подходит для небольших объектов и второстепенных деталей.
2K
Обычный выбор для основной товарной модели.
4K
Используется, когда крупные планы действительно требуют такой детализации.
8K
Обычно избыточен для мобильного сайта и должен быть обоснован.
Дополнительные методы:
— Обрезать пустое пространство
— Удалить неиспользуемые изображения
— Убрать ненужные alpha-каналы
— Использовать эффективное сжатие
— Объединять совместимые карты
— Заменять однотонные текстуры параметрами материала
— Повторно использовать текстуры одинаковых деталей
Текст на упаковке нужно проверять после уменьшения разрешения.
Шаг 8. Проверьте прозрачность
Прозрачность повышает нагрузку и может вызывать ошибки сортировки.
Используйте ее только при необходимости.
Используйте непрозрачные материалы, если
— Поверхность твердая
— Прозрачность не видна
— Внешний вид можно передать отражением
— Приоритетом является мобильная производительность
Используйте прозрачность, если
— Товар содержит настоящее стекло
— Внутренние детали должны быть видны
— Дизайн зависит от полупрозрачного материала
— Целевой просмотрщик надежно поддерживает прозрачность
Стекло необходимо проверять на всех целевых устройствах.
Шаг 9. Настройте масштаб, origin и ориентацию
Даже правильная модель может некорректно работать в AR из-за неправильного масштаба или pivot.
1. Примените масштаб и вращение.
2. Используйте реальные размеры.
3. Поставьте модель на уровень пола.
4. Установите логичный pivot.
5. Проверьте ось вверх.
6. Проверьте направление вперед.
7. Удалите ненужные Empty.
8. Проверьте Bounding Box.
9. Убедитесь, что вдали от origin нет геометрии.
10. Проверьте размещение в AR.
Для мебели pivot обычно размещается в центре нижней контактной поверхности.
Для дверей, крышек и вращающихся деталей pivot должен совпадать с петлей.
Шаг 10. Оптимизируйте анимацию
Удалите:
— Неиспользуемые действия
— Пустые ключевые кадры
— Дублирующиеся дорожки
— Лишние кости
— Невидимые анимированные объекты
— Чрезмерно плотные ключевые кадры
Циклическая анимация должна иметь плавный переход между первым и последним кадрами.
Скелет и веса необходимо проверить после экспорта.
Шаг 11. Экспортируйте правильные файлы
Для большинства сайтов подготавливается GLB.
Для Apple AR Quick Look создается USDZ.
Исходную сцену или мастер-файл необходимо хранить отдельно.
Исходный файл
Используется для будущего редактирования.
GLB
Используется для сайта и совместимых real-time-сценариев.
USDZ
Используется для AR на совместимых устройствах Apple.
Шаг 12. Оптимизируйте загрузку на сайте
Даже оптимизированную модель необязательно загружать сразу.
Можно использовать:
— Постер
— Lazy Loading
— Загрузку по нажатию
— Индикатор прогресса
— Кэширование
— CDN
— Мобильное качество
— Отложенные скрипты
— Сжатые ресурсы
— Fallback-изображение
Постер показывает товар до загрузки модели.
Это улучшает первоначальный вид страницы и предотвращает лишнюю загрузку, если посетитель не взаимодействует с 3D.
Рекомендуемый размер GLB
Практические ориентиры:
До 5 МБ
Легкая модель с быстрой загрузкой.
5–15 МБ
Разумный диапазон для многих детализированных товаров.
15–30 МБ
Требует внимательного мобильного тестирования.
Более 30 МБ
Вероятна медленная загрузка через мобильную сеть.
Это не жесткие стандарты.
Большой файл иногда оправдан, но его ценность должна быть очевидна.
Геометрия или текстуры: что сильнее влияет на скорость?
Фактор · Основное влияние
Количество полигонов · Нагрузка на GPU и сложность модели
Размер текстур · Размер загрузки и потребление памяти
Количество материалов · Draw Calls и нагрузка на рендер
Прозрачность · Сложность рендера и сортировка
Анимация · Размер файла и вычисления
Количество объектов · Управление сценой
Тени · Нагрузка на GPU
Сжатие · Размер загрузки
Производительность устройства · Итоговая плавность
Скорость интернета · Время первой загрузки
Производительность определяется всей моделью, а не одним числом.
Итоговый чек-лист
Геометрия
— Правильный масштаб
— Чистая топология
— Корректные нормали
— Нет дублированных поверхностей
— Удалена скрытая геометрия
— Подходящая плотность полигонов
— Логичная структура объектов
Материалы и текстуры
— PBR-совместимые материалы
— Разумное разрешение
— Нет отсутствующих изображений
— Нет неиспользуемых текстур
— Проверена прозрачность
— Оптимизировано количество материалов
— Надписи остаются читаемыми
Сайт и AR
— GLB проверен
— USDZ проверен
— Проверена мобильная производительность
— Корректное размещение в AR
— Добавлен постер
— Проверена загрузка
— Добавлен fallback
Часто задаваемые вопросы
Как уменьшить размер GLB?
Уменьшите лишнюю геометрию, оптимизируйте текстуры, удалите неиспользуемые данные, упростите материалы и примените подходящее сжатие.
Что важнее: полигоны или текстуры?
Важны оба параметра. На скорость также влияют материалы, прозрачность, анимация и структура сцены.
Можно ли оптимизировать модель автоматически?
Автоматические инструменты помогают, но результат необходимо проверить вручную.
Почему модель выглядит по-разному в Blender и браузере?
Программы используют разные системы освещения, управления цветом и материалов. Модель всегда нужно проверять в конечном просмотрщике.
Заключение
Оптимизация 3D-модели для сайта и WebAR — это не просто экспорт в GLB.
Процесс включает уменьшение геометрии, ретопологию, преобразование материалов, оптимизацию текстур, исправление масштаба и тестирование.
Я оптимизирую 3D-модели для сайтов, интернет-магазинов, конфигураторов и дополненной реальности. Работа может включать ретопологию, UV-развертку, PBR-материалы, оптимизацию GLB и экспорт USDZ.