DRACOLoader: декомпрессия геометрии

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

Принципы работы Draco

Draco — это формат сжатия 3D-геометрии, предназначенный для уменьшения объема данных при сохранении точности модели. Основные особенности:

  • Сжатие вершин и индексов сетки (position, normal, uv, color, joints, weights).
  • Поддержка как треугольных, так и квад- или многоугольных мешей.
  • Значительное уменьшение размера файлов (обычно 5–10 раз по сравнению с исходной glTF/OBJ геометрией).
  • Быстрая декомпрессия на клиентской стороне с использованием WebAssembly или JavaScript.

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

Подключение DRACOLoader в Three.js

Для работы с DRACOLoader требуется подключение скрипта и указание пути к библиотеке декодера Draco:

import * as THREE fr om 'three';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// Создание загрузчика Draco
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/'); // путь к декодеру (draco_decoder.js, draco_wasm_wrapper.js)

// Создание загрузчика glTF с поддержкой Draco
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

Ключевой момент: setDecoderPath должен указывать на директорию, где находятся файлы декодера (.js и .wasm). Использование WebAssembly обеспечивает наибольшую производительность.

Настройка DRACOLoader

Основные методы и свойства:

  • setDecoderPath(path: string) — путь к библиотеке декодера.
  • setDecoderConfig(config: object) — конфигурация декодера, например type: 'js' | 'wasm'.
  • setWorkerLimit(lim it: number) — количество веб-воркеров для параллельной декомпрессии (по умолчанию 2–4).
  • preload() — предварительная загрузка декодера для ускорения последующей декомпрессии моделей.

Пример настройки воркеров:

dracoLoader.setWorkerLimit(4);
dracoLoader.preload();

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

Загрузка и декомпрессия моделей

После настройки DRACOLoader его используют вместе с GLTFLoader или другими загрузчиками:

loader.load('models/scene_draco.glb', function(gltf) {
    scene.add(gltf.scene);
}, undefined, function(error) {
    console.error('Ошибка загрузки модели:', error);
});

Пошаговый процесс:

  1. GLTFLoader обнаруживает, что геометрия закодирована с Draco.
  2. Передает сжатые бинарные данные DRACOLoader.
  3. DRACOLoader декомпрессирует данные в формат BufferGeometry.
  4. BufferGeometry интегрируется в сцену Three.js.

Результатом является полноценная геометрия, готовая к рендерингу с материалами, текстурами и анимациями.

Оптимизация производительности

  • WebAssembly против JS: использование .wasm декодера быстрее и требует меньше памяти. Настоятельно рекомендуется для больших сцен.
  • Использование preload(): позволяет загрузить декодер заранее, снижая задержку при первой загрузке модели.
  • Минимизация количества декомпрессий: при повторном использовании одной модели лучше хранить BufferGeometry в кэше.
  • Параллельная декомпрессия: setWorkerLimit позволяет оптимизировать многопоточные процессы на клиенте.

Интеграция с glTF

Three.js рекомендует сжимать модели в glTF с помощью Draco. При экспорте из Blender или других 3D-редакторов необходимо:

  1. Включить Draco Compression в экспортере glTF.
  2. Настроить целевое качество сжатия (0–10), балансируя размер файла и точность геометрии.
  3. Проверить поддержку всех атрибутов: normals, tangents, uv, color.

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

Примеры применения

  • Мобильные веб-приложения: уменьшение трафика при загрузке больших 3D-сцен.
  • Онлайн-магазины: ускорение загрузки 3D-моделей товаров.
  • Игры и визуализации: экономия памяти и ускорение рендеринга при сложных сценах с тысячами полигонов.

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

  • Draco хорошо подходит для статической и скелетной анимации, но с динамическими изменениями геометрии (модификация вершин в реальном времени) его использование ограничено.
  • Некоторые атрибуты, например нестандартные шейдерные данные, могут требовать ручной конверсии после декомпрессии.
  • Сжатие увеличивает время экспорта, но снижает размер передаваемых файлов, что критично для веба.

DRACOLoader обеспечивает баланс между качеством геометрии и эффективностью передачи данных. Он полностью интегрируется в экосистему Three.js и позволяет работать с высокополигональными моделями в браузере без заметных задержек.

Оглавление