Разные платформы — разные судьбы: руководство по выбору сжатия
Предыдущие четыре статьи охватили инструменты сжатия вершин и текстур. Но знать, как пользоваться инструментами — одно; а какой использовать и в каком сценарии — совсем другое. Эта статья отвечает на этот вопрос и призвана позволить вам принять решение в момент окончания чтения.
После неё вы сможете ответить: на какой платформе работает мой проект, узкое место первого рендера — это загрузка или VRAM, и какую схему использовать для текстур и вершин соответственно.
Задаём тон: сценарий определяет выбор, а не инструмент
Вся статья строится на одном главном принципе, который серия неизменно подчёркивает:
Не существует «лучшей» схемы сжатия — есть только «наиболее подходящая для сценария» схема.
Три переменные, определяющих выбор:
- Платформа/устройство: десктопный ПК, мобильный браузер, VR-шлем, Mini Program — радикально разные возможности
- Использование: одноразовый показ (страница товара в e-commerce) или длительное погружение (VR-игра)
- Основное узкое место: медленная загрузка, недостаточно VRAM или декодирование, задерживающее первый рендер
Сначала определите узкое место, а затем возвращайтесь к выбору инструментов. Матрица ниже фиксирует эту логику.
Основная матрица решений: платформа × рекомендуемая схема
Это самая важная таблица в статье. По платформам она даёт рекомендуемую схему для текстур и вершин с обоснованием.
| Платформа / сценарий | Схема текстур | Схема вершин | Основное узкое место | Ключевая причина |
|---|---|---|---|---|
| Десктопный веб (браузер ПК) | KTX2 или WebP | MeshOpt / квантизация | Скорость загрузки | VRAM в избытке; фокус на маленьких файлах, быстрой загрузке |
| Мобильный веб (браузер телефона) | KTX2 (обязательно) | MeshOpt | VRAM | VRAM на телефоне ограничен; текстуры должны быть блочно сжаты |
| WebXR / VR-шлем | KTX2 (обязательно) | MeshOpt + LOD | VRAM + частота кадров | Взрыв VRAM вызывает краш; пропуск кадров вызывает тошноту |
| WeChat Mini Program | KTX2 / WebP | MeshOpt / простая квантизация | Пакет + совместимость | Размер пакета ограничен; избегайте тяжёлых декодеров |
| E-commerce (показ товаров) | WebP (лёгкий) / KTX2 (точный) | MeshOpt | Скорость первого рендера | Нужна мгновенная загрузка; жертвуем размером ради скорости |
| Крупные сцены / цифровые двойники | KTX2 (обязательно) | MeshOpt + Draco + LOD | VRAM + draw calls | Много текстур, большие модели; сжимаем по всем фронтам |
Несколько выводов, которые стоит запомнить:
- Когда VRAM является узким местом, KTX2 обязателен (мобильные, VR, крупные сцены — все подходят)
- Когда узкое место — загрузка, а VRAM в избытке, WebP достаточно (десктоп, e-commerce)
- В средах, чувствительных к размеру пакета, как Mini Programs, предпочтительнее MeshOpt перед Draco — меньший декодер, лучшая совместимость
- Draco стоит рассматривать только для очень крупных моделей; для подавляющего большинства моделей малого и среднего размера MeshOpt более сбалансирован
Сравнение форматов текстур по всем измерениям
Знать «используйте KTX2» недостаточно. Для форматов текстур конкретно нужно рассмотреть все измерения:
| Формат | Размер файла | Использование VRAM | Скорость загрузки | Совместимость | Качество | Применение |
|---|---|---|---|---|---|---|
| PNG | Большой | Большой (после распаковки) | Медленная | Очень широкая | Без потерь | Требуются точные значения/альфа или унаследованный фоллбэк |
| JPG | Крошечный | Большой (после распаковки) | Медленная | Очень широкая | С потерями | Цветовые карты, веб-ориентированный |
| WebP | Очень маленький | Большой (после распаковки) | Медленная | Достаточно широкая | Высокое | Десктопный веб, погоня за скоростью загрузки |
| AVIF | Ещё меньше | Большой (после распаковки) | Медленная | Постепенная | Высокое | Новые платформы, экстремальное сжатие |
| KTX2 (ETC1S) | Маленький | Крошечный | Быстрая | Требует транскодирования | Среднее (цвет в порядке) | Цветовые карты, мобильные/VR |
| KTX2 (UASTC) | Средний | Маленький | Быстрая | Требует транскодирования | Высокое | Карты нормалей/данных |
Обратите внимание: первые три строки (PNG/JPG/WebP/AVIF) показывают VRAM как «большой» — каким бы маленьким ни был размер на диске, в VRAM все распаковываются обратно в сырые пиксели. Это фундаментальное ограничение традиционных форматов.
Смешанная стратегия распространена: основные цветовые карты используют KTX2 для обеспечения VRAM; вспомогательные карты (например, небольшая эмиссия) используют WebP для удобства. Не обязательно переходить полностью на KTX2; распределяйте по узким местам.
Блок-схема выбора: определяем пошагово
Матрица — это результат; блок-схема показывает, как к нему прийти.
Где работает ваш проект?
│
├─ Десктопный веб (VRAM в избытке)
│ └─ Первый рендер медленный?
│ ├─ Да → WebP (или AVIF) + MeshOpt [гоним скорость загрузки]
│ └─ Нет, но много моделей → KTX2 + MeshOpt [оставляем запас]
│
├─ Мобильный веб / VR / крупные сцены (VRAM ограничен)
│ └─ Текстуры должны использовать KTX2 (цветовые ETC1S, данные UASTC)
│ └─ Вершины сверхплотные?
│ ├─ Да → + Draco [максимальный коэффициент, допустима медленная декодировка]
│ └─ Нет → + MeshOpt [сбалансированный]
│
└─ Mini Program / ограниченная среда выполнения
└─ Чувствительность к размеру пакета?
├─ Да → простая квантизация или MeshOpt + WebP [нулевой/маленький декодер]
└─ Нормально → MeshOpt + KTX2 [стандартная комбинация]
Сжатие вершин vs текстур: куда инвестировать
Распространённый вопрос: бюджет ограничен, что оптимизировать в первую очередь? Посмотрите на состав модели:
| Характеристика модели | Приоритет инвестиций | Причина |
|---|---|---|
| PBR-персонаж/продукт (много карт) | Сжатие текстур | Текстуры — 80%+; низкая отдача от вершин |
| CAD/скан-модель (сверхплотные вершины, мало карт) | Сжатие вершин | Вершины — основная масса |
| Анимированный персонаж (скелет + скинг) | Инвестировать в оба, но вершины в приоритете сверх Draco | Данные анимации тоже занимает много места; Draco слабо работает с анимацией |
| Здание/сцена (крупная, среднее количество карт) | Текстуры + LOD | Текстуры экономят VRAM; LOD экономит draw calls |
Примерный рейтинг доходности: текстуры KTX2 > вершины MeshOpt/квантизация > упрощение геометрии (LOD) > вершины Draco. Начните с наиболее доходных.
Смешанная стратегия: основные карты — KTX2, вторичные — WebP
Не каждая карта стоит сжимать в KTX2. Типичный PBR-материал имеет 5-6 карт; сжимать все в KTX2 — это много инженерных усилий и иногда избыточно.
Практическое разделение:
- Обязательно KTX2: альбедо (крупная, цвет), нормали (чувствительна к точности), шероховатость/металличность (влияют на освещение)
- Может быть WebP/JPG: эмиссия (обычно маленькая), AO (средне-низкие частоты), детальная карта нормалей (если есть)
Критерий оценки: велика ли карта, является ли она высокочастотной деталью, будет ли она часто выбираться. Всё три → KTX2; ничего из этого → традиционный формат проще.
Автоматизация: gltf-transform делает всё за один раз
Команда optimize в gltf-transform — это серебряная пуля для большинства сценариев — она автоматически определяет типы текстур, сжимает текстуры по рекомендуемой стратегии и опционально обрабатывает вершины.
# Установка
npm install -g @gltf-transform/cli
# Стандартная оптимизация: текстуры KTX2 + вершины MeshOpt + дедупликация
gltf-transform optimize model.glb model-optimized.glb \
--texture-compress basisu \
--meshopt
Справочник параметров:
| Параметр | Эффект | По умолчанию |
|---|---|---|
--texture-compress basisu | Сжатие текстур в KTX2 (автоматически ETC1S/UASTC) | Выключен |
--meshopt | Включение сжатия вершин MeshOpt | Выключен |
--simplify | Упрощение геометрии (уменьшает количество вершин, с потерями) | Выключен |
--weld | Объединение дублирующихся вершин | Включён |
--prune | Удаление неиспользуемых узлов/материалов | Включён |
Комбинация «сильного сжатия» для мобильных устройств:
gltf-transform optimize model.glb model-mobile.glb \
--texture-compress basisu \
--meshopt \
--simplify --simplify-ratio 0.5 \
--prune --weld
Комбинация «мягкого» десктопного сжатия (сохраняет детали, сжимает только текстуры и вершины):
gltf-transform optimize model.glb model-desktop.glb \
--texture-compress webp \
--meshopt
Не хотите писать скрипты? Используйте онлайн-компрессор Any3D
Не хотите устанавливать Node и настраивать инструменты локально? Онлайн-компрессор Any3D работает целиком в вашем браузере — выберите GLB, визуально настройте параметры для платформы (мобильный/десктоп/VR), и ваша модель никогда не покидает ваше устройство (обработка полностью локальная). Экспорт сжатых версий в один клик. Под капотом — тот же движок gltf-transform, нулевая настройка. Следующая статья соберёт полный конвейер в единую цепочку.
Шпаргалка в одну строку
- VRAM — узкое место → KTX2, без вариантов
- Загрузка — узкое место, VRAM в избытке → WebP/AVIF тоже подойдёт
- Чувствительность к размеру декодера → MeshOpt > простая квантизация > Draco
- Очень крупные модели → только тогда рассматривайте Draco
- Не уверены → запустите
gltf-transform optimizeза один раз; скорректируйте, если что-то не так
Что дальше
Рамка выбора готова. Финальная статья подводит итог: начиная с реальной модели, проходим полный путь от экспорта из Blender, сжатия текстур, сжатия вершин до загрузки в движок, с полным скриптом автоматизации и шпаргалкой по всей серии.