Draco-сжатие геометрии

Современные 3D-приложения активно используют сложные модели, содержащие сотни тысяч и миллионы полигонов. Передача такой геометрии по сети становится узким местом: размер файлов может достигать десятков мегабайт, что значительно увеличивает время загрузки сцены. Для решения этой проблемы применяется специализированное сжатие геометрических данных. Одной из наиболее эффективных технологий является Draco, разработанная компанией Google.

Алгоритм Draco предназначен для компактного представления данных сетки (mesh): координат вершин, индексов треугольников, нормалей, цветов, UV-координат и других атрибутов. Он обеспечивает значительное уменьшение размера модели при сохранении визуального качества. Библиотека Babylon.js поддерживает автоматическую декомпрессию таких данных при загрузке моделей.

Основные принципы Draco

Draco использует несколько методов оптимизации:

1. Квантование атрибутов Координаты и другие числовые значения преобразуются из плавающей точки в целочисленный диапазон с заданной точностью. Это уменьшает объём данных и повышает эффективность последующего кодирования.

2. Предсказание значений Алгоритм анализирует структуру сетки и прогнозирует значения соседних вершин. Сохраняется только разница между фактическим и предсказанным значением.

3. Энтропийное кодирование Оставшиеся данные кодируются с помощью эффективных методов компрессии, аналогичных используемым в современных алгоритмах архивирования.

Благодаря комбинации этих подходов размер геометрии может уменьшаться в 5–10 раз, а иногда и больше.

Поддержка Draco в Babylon.js

Babylon.js использует Draco преимущественно через формат glTF. Спецификация glTF содержит расширение:

KHR_draco_mesh_compression

Это расширение позволяет хранить геометрию внутри файла glTF или GLB в сжатом виде. При загрузке Babylon.js автоматически определяет наличие Draco-данных и выполняет их декодирование.

Преимущества использования Draco вместе с glTF:

значительное уменьшение размера моделей;
ускорение загрузки сцен;
снижение сетевого трафика;
сохранение полной совместимости с большинством 3D-редакторов и движков.

Подключение декодера Draco

Babylon.js не содержит встроенный декодер Draco напрямую в ядре библиотеки. Вместо этого используется отдельный модуль. Это сделано для уменьшения размера основного пакета.

Для работы требуется подключить соответствующий скрипт:

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/dracoDecoder.js"></script>

После подключения Babylon.js получает возможность автоматически распаковывать Draco-сжатую геометрию.

В современных сборках можно использовать ES-модули:

import "@babylonjs/loaders/glTF";
import "@babylonjs/core/Meshes/Compression/dracoCompression";

Загрузка Draco-сжатой модели

Если модель содержит расширение KHR_draco_mesh_compression, процесс загрузки не отличается от обычной загрузки glTF.

Пример:

BABYLON.SceneLoader.Append(
    "models/",
    "scene.glb",
    scene,
    function () {
        console.log("Модель загружена");
    }
);

Babylon.js автоматически:

обнаруживает Draco-расширение,
загружает сжатые данные,
передаёт их декодеру,
создаёт обычные геометрические буферы WebGL.

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

Использование DracoCompression API

Babylon.js предоставляет класс DracoCompression, который управляет декодированием.

Основные возможности:

настройка путей к декодеру;
переключение между WebAssembly и JavaScript реализациями;
управление асинхронной загрузкой.

Пример конфигурации:

BABYLON.DracoCompression.Configuration = {
    decoder: {
        wasmUrl: "draco_wasm_wrapper.js",
        wasmBinaryUrl: "draco_decoder.wasm",
        fallbackUrl: "draco_decoder.js"
    }
};

Такая настройка позволяет явно указать расположение файлов декодера.

WebAssembly и JavaScript декодеры

Draco поддерживает два типа декодеров:

WebAssembly

Наиболее производительный вариант. Использует низкоуровневый байткод, выполняемый браузером почти с нативной скоростью.

Преимущества:

высокая скорость декомпрессии;
меньшая нагрузка на CPU;
оптимальное решение для крупных моделей.

JavaScript fallback

Резервный вариант для старых браузеров, не поддерживающих WebAssembly.

Недостатки:

более медленная работа;
повышенная нагрузка на основной поток.

Babylon.js автоматически выбирает наиболее подходящий вариант.

Асинхронная декомпрессия

Декомпрессия геометрии может занимать заметное время, особенно при работе с высокополигональными моделями. Babylon.js выполняет декодирование асинхронно, чтобы не блокировать главный поток интерфейса.

Используются:

Web Workers
Promise-ориентированная архитектура загрузчиков

Это позволяет продолжать работу сцены во время распаковки геометрии.

Поддерживаемые атрибуты геометрии

Draco способен сжимать различные типы данных:

Атрибут	Назначение
Positions	координаты вершин
Normals	нормали поверхности
UV	текстурные координаты
Colors	цвета вершин
Tangents	векторы касательных
Custom attributes	пользовательские данные

Babylon.js после декодирования восстанавливает стандартные VertexBuffer, которые используются системой рендеринга.

Влияние на производительность загрузки

Сжатие Draco значительно уменьшает объём передаваемых данных. Это особенно заметно при использовании WebGL-приложений в интернете.

Типичные результаты:

Параметр	Без Draco	С Draco
Размер модели	20 MB	3–5 MB
Время загрузки	высокое	значительно ниже
Время декомпрессии	отсутствует	несколько миллисекунд

Несмотря на необходимость декодирования, общее время загрузки сцены обычно уменьшается.

Использование Draco в процессе экспорта

Сжатие выполняется на этапе подготовки моделей. Большинство инструментов для работы с glTF поддерживают Draco:

Blender
glTF-Pipeline
glTF-Transform
Babylon.js Exporter

Например, в Blender при экспорте glTF можно активировать параметр:

Geometry Compression → Draco

Доступны настройки:

уровень сжатия;
точность координат;
точность нормалей;
точность UV.

Чем выше точность, тем больше размер файла.

Настройки точности

Draco применяет квантование для различных атрибутов. Это влияет на баланс между качеством и размером файла.

Пример типичных значений:

Атрибут	Точность
Positions	14–16 бит
Normals	10–12 бит
UV	12–14 бит

Слишком сильное сжатие может приводить к:

искажению геометрии,
нарушению сглаживания,
смещению текстур.

Поэтому параметры выбираются в зависимости от требований проекта.

Совместимость с системой рендеринга

После декодирования Draco-геометрия превращается в стандартный Babylon.js Mesh. Это означает полную совместимость со всеми системами движка:

освещение;
материалы PBR;
анимация;
скелетная деформация;
морф-таргеты;
физика.

Для движка не существует различий между обычной и Draco-сжатой геометрией после этапа загрузки.

Ограничения и особенности

Несмотря на эффективность, Draco имеет ряд особенностей.

Задержка декомпрессии Очень большие модели могут потребовать заметного времени для распаковки.

Невозможность потоковой загрузки геометрии Draco требует полного получения блока данных перед декодированием.

Дополнительные файлы декодера Необходимо подключение wasm и JavaScript модулей.

Тем не менее преимущества сжатия практически всегда перевешивают эти ограничения при работе с сетевыми приложениями.

Практические рекомендации

Использование Draco наиболее оправдано в следующих случаях:

крупные 3D-сцены;
модели с большим количеством вершин;
веб-приложения с ограниченной пропускной способностью сети;
мобильные устройства.

Для небольших моделей (несколько десятков килобайт) эффект может быть незначительным.

Оптимальная стратегия разработки включает:

экспорт моделей в формате glTF/GLB;
применение Draco-сжатия;
использование WebAssembly-декодера;
загрузку через стандартные загрузчики Babylon.js.

Такая архитектура обеспечивает минимальный сетевой трафик и высокую производительность WebGL-приложений.