Структура glTF-файла: меши, материалы, анимации, сцены

glTF (GL Transmission Format) представляет собой открытый формат для передачи 3D-сцен и моделей, разработанный для эффективного обмена между приложениями и вебом. Формат ориентирован на лёгкое считывание и рендеринг, что делает его стандартом де-факто для веб-графики и интеграции с библиотекой Three.js.

Основные компоненты glTF

Файл glTF структурно состоит из JSON-описания, бинарных буферов и внешних текстур. JSON описывает объекты сцены, их иерархию и свойства, а бинарные буферы содержат геометрию, скелеты и анимации. Основные элементы:

  • Scenes (Сцены) – контейнеры объектов, объединяющие меши, камеры и свет.
  • Nodes (Узлы) – элементы сцены, которые могут содержать меши, камеры, свет, а также дочерние узлы, образуя иерархию.
  • Meshes (Меши) – геометрические объекты, включающие вершины, нормали, UV-координаты и индексы.
  • Materials (Материалы) – описание внешнего вида поверхности: цвет, текстуры, металлическость, шероховатость, прозрачность.
  • Animations (Анимации) – ключевые кадры, влияющие на трансформации узлов или морфинг мешей.
  • Accessors, Buffers и BufferViews – низкоуровневые структуры для хранения и считывания массивов данных, включая позиции вершин, нормали и цвета.

Меши

Меш — это базовый строительный блок 3D-объекта. В glTF меш состоит из primitives, каждый из которых содержит:

  • Attributes – позиции вершин (POSITION), нормали (NORMAL), UV-координаты (TEXCOORD_0) и дополнительные атрибуты для шейдеров.
  • Indices – массив индексов, определяющий порядок соединения вершин в треугольники.
  • Material – ссылка на материал, который применяется к конкретному primitive.

Формат поддерживает несколько primitive в одном меше, что позволяет использовать разные материалы на разных частях модели.

Материалы

glTF использует Physically Based Rendering (PBR), что обеспечивает реалистичное освещение. Основные типы свойств:

  • BaseColorFactor – основной цвет поверхности в виде RGBA.
  • MetallicFactor и RoughnessFactor – определяют металлическость и шероховатость, влияя на отражения и блики.
  • Textures – изображение для цвета, нормалей, металлическости/шероховатости и эмиссии.
  • AlphaMode – режим прозрачности: OPAQUE, MASK, BLEND.

В Three.js материалы glTF преобразуются в MeshStandardMaterial, который полностью поддерживает PBR.

Анимации

Анимации в glTF состоят из трёх ключевых объектов:

  • Samplers – определяют интерполяцию (LINEAR, STEP, CUBICSPLINE) и связывают временные метки с данными трансформаций.
  • Channels – указывают, к какому узлу применяется анимация и какой параметр изменяется (translation, rotation, scale, weights).
  • Animations – контейнер, объединяющий samplers и channels.

Анимации могут управлять положением, вращением, масштабом узлов, а также морфингом мешей для выражения лицевых эмоций или деформаций.

Сцены и узлы

Сцена в glTF — это набор узлов, который может включать вложенные сцены. Узлы обеспечивают иерархию трансформаций:

  • Transformations – каждый узел имеет translation, rotation, scale и matrix, влияющие на все дочерние объекты.
  • Hierarchical Structure – вложенные узлы позволяют создавать сложные объекты, например, персонажей с костями и анимациями.
  • Node Linking – узлы могут ссылаться на меши и камеры, обеспечивая гибкую организацию сцены.

Буферы и аксессоры

Для оптимизации передачи данных glTF использует буферы:

  • Buffer – бинарный контейнер, хранящий массивы чисел. Может быть встроенным (.bin) или Base64.
  • BufferView – часть буфера с указанием смещения и длины.
  • Accessor – описывает, как читать данные из bufferView: тип элементов (FLOAT, UNSIGNED_SHORT), количество компонентов (например, 3 для векторов), нормализация.

Это позволяет Three.js напрямую использовать данные для создания BufferGeometry, минуя дополнительные преобразования.

Загрузка и использование в Three.js

В Three.js для работы с glTF используется класс GLTFLoader. Основные шаги:

  1. Инициализация загрузчика:
const loader = new THREE.GLTFLoader();
  1. Загрузка файла:
loader.load('model.gltf', (gltf) => {
    scene.add(gltf.scene);
});
  1. Доступ к объектам:
  • gltf.scene – корневая сцена.
  • gltf.animations – массив анимаций.
  • gltf.scenes – массив всех сцен в файле.
  • gltf.cameras – массив камер.
  • gltf.asset – метаданные файла.
  1. Анимации можно воспроизводить через THREE.AnimationMixer, применяя ключевые кадры к нужным узлам.

Оптимизация и расширения

glTF поддерживает расширения, которые позволяют добавлять нестандартные материалы, шейдеры, физику или дополнительные свойства. Распространённые расширения:

  • KHR_materials_pbrSpecularGlossiness – альтернативный PBR-материал.
  • KHR_texture_transform – трансформация UV-координат текстур.
  • KHR_draco_mesh_compression – сжатие мешей для уменьшения размера файлов.

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

Этот подход к структуре glTF позволяет создавать сложные, анимированные 3D-сцены с высоким уровнем детализации, поддерживая физически корректное освещение и совместимость с Three.js.

Оглавление