Встраивание ресурсов: glb против gltf

Современная веб-графика требует эффективных способов передачи сложных 3D-сцен через сеть. Одним из ключевых стандартов для этой задачи стал формат glTF (GL Transmission Format). Он был разработан организацией Khronos Group как универсальный контейнер для передачи 3D-моделей, материалов, текстур, анимаций и иерархий сцены.

В среде Three.js glTF является одним из основных форматов импорта благодаря следующим свойствам:

  • компактность
  • поддержка физически корректных материалов (PBR)
  • высокая скорость загрузки
  • возможность аппаратного ускорения
  • совместимость с большинством 3D-редакторов

Формат представлен в двух основных вариантах:

  • .gltf — текстовый JSON-файл с внешними ресурсами
  • .glb — бинарный контейнер, объединяющий всё в одном файле

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

Структура формата glTF

Файл gltf представляет собой JSON-документ, описывающий структуру сцены. Внутри содержатся ссылки на внешние ресурсы: буферы, текстуры и шейдерные данные.

Типичная структура:

model/
 ├── scene.gltf
 ├── scene.bin
 ├── texture_basecolor.png
 ├── texture_normal.png

Основные элементы структуры

Scene

Определяет набор объектов, входящих в сцену.

Nodes

Формируют иерархию объектов.

Meshes

Геометрия моделей.

Buffers

Двоичные массивы вершин, нормалей, UV-координат.

Materials

Описание PBR-материалов.

Textures

Изображения, используемые материалами.

Пример фрагмента JSON:

{
  "asset": {
    "version": "2.0"
  },
  "scenes": [
    { "nodes": [0] }
  ],
  "nodes": [
    { "mesh": 0 }
  ]
}

JSON-структура делает формат читаемым и удобным для анализа.

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

В Three.js загрузка осуществляется через GLTFLoader, входящий в набор дополнительных модулей.

Импорт загрузчика:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

Создание загрузчика:

const loader = new GLTFLoader();

Загрузка модели:

loader.load(
  'models/scene.gltf',
  function (gltf) {

    scene.add(gltf.scene);

  },
  undefined,
  function (error) {

    console.error(error);

  }
);

После загрузки объект gltf содержит:

  • scene — корневую сцену
  • scenes — список сцен
  • animations — анимации
  • cameras
  • asset

Добавление gltf.scene в сцену Three.js отображает модель.

Особенности формата .gltf

Текстовый вариант glTF использует раздельное хранение ресурсов.

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

1. Читаемость

JSON легко анализировать и редактировать.

2. Гибкость

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

3. Удобство отладки

Файл можно открыть в любом редакторе.

4. Кэширование браузером

Текстуры могут кэшироваться независимо.

Недостатки

1. Большое количество файлов

Модель может состоять из десятков ресурсов.

2. Дополнительные HTTP-запросы

Каждая текстура требует отдельной загрузки.

3. Сложность деплоя

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

Формат GLB

Файл GLB представляет собой бинарную версию glTF, в которой все ресурсы объединены в один контейнер.

Структура:

model.glb

Внутри файла находятся:

  1. JSON-описание сцены
  2. бинарные буферы
  3. текстуры

Контейнер состоит из нескольких блоков:

Блок Назначение
Header метаданные файла
JSON Chunk описание сцены
Binary Chunk геометрия и текстуры

Файл имеет расширение .glb, но логическая структура полностью соответствует glTF.

Загрузка GLB в Three.js

GLB загружается тем же GLTFLoader, поскольку оба формата поддерживаются одинаково.

loader.load(
  'models/model.glb',
  function (gltf) {

    scene.add(gltf.scene);

  }
);

Для загрузчика разница между .gltf и .glb отсутствует — обработка выполняется автоматически.

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

Единый файл

Все данные объединены.

Это упрощает:

  • публикацию
  • хранение
  • передачу через CDN
  • загрузку через API

Быстрая передача по сети

Отсутствуют дополнительные HTTP-запросы.

Это особенно важно для:

  • мобильных сетей
  • WebXR
  • WebAR

Минимизация ошибок путей

В glTF нередко возникают ошибки:

404 texture not found

GLB полностью исключает такие проблемы.

Удобство распространения

Один файл проще:

  • скачать
  • отправить
  • хранить

Недостатки GLB

Отсутствие редактируемости

Бинарный файл невозможно удобно редактировать вручную.

Для изменения модели требуется повторный экспорт из 3D-редактора.

Отсутствие частичного кэширования

Браузер не может кэшировать текстуры отдельно.

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

Сложность версионности

В системах контроля версий бинарные файлы плохо отображают изменения.

Сравнение glTF и GLB

Характеристика glTF GLB
Формат JSON бинарный
Количество файлов несколько один
Читаемость высокая отсутствует
Размер немного больше компактнее
HTTP-запросы несколько один
Удобство отладки высокое низкое

Когда использовать glTF

Текстовый формат удобен в следующих случаях:

Разработка

Во время разработки модели часто меняются текстуры и материалы.

Отладка

При необходимости анализа структуры сцены.

Пайплайн производства

Если модель проходит через несколько этапов обработки.

Инструментальная обработка

Когда требуется программно модифицировать JSON.

Когда использовать GLB

GLB предпочтителен в production-среде.

Типичные сценарии:

  • веб-игры
  • WebXR
  • WebAR
  • интерактивные каталоги
  • 3D-конфигураторы

Основная причина — минимизация сетевых запросов.

Экспорт моделей из 3D-редакторов

Большинство редакторов поддерживает экспорт glTF.

Наиболее распространённый инструмент — Blender.

Экспорт выполняется через:

File → Export → glTF 2.0

Доступные режимы:

Режим Описание
glTF Separate отдельные файлы
glTF Embedded текстуры внутри JSON
GLB бинарный контейнер

Рекомендуемые настройки для веб-приложений:

  • Format: GLB
  • Apply Modifiers: включено
  • Compression: при необходимости

Сжатие моделей

Для уменьшения размера glTF/GLB используются расширения.

Draco Compression

Сжимает геометрию.

Размер модели может уменьшиться в 5–10 раз.

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

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');

loader.setDRACOLoader(dracoLoader);

Meshopt Compression

Современная альтернатива Draco.

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

  • более быстрая декомпрессия
  • меньшая нагрузка на CPU

Встраивание текстур

В glTF текстуры могут храниться несколькими способами.

1. Внешние файлы

texture.png

Наиболее распространённый вариант.

2. Data URI

Текстура кодируется внутри JSON.

Пример:

data:image/png;base64,iVBOR...

Недостатки:

  • увеличение размера JSON
  • замедление парсинга

3. GLB контейнер

Текстуры включаются в бинарный блок.

Это наиболее эффективный способ.

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

Формат влияет на несколько аспектов работы приложения.

Сетевая загрузка

GLB загружается быстрее благодаря одному запросу.

Парсинг

GLB требует меньше операций парсинга.

Кэширование

glTF лучше кэшируется по частям.

Обработка текстур

Разницы между форматами нет — после загрузки текстуры одинаково передаются в WebGL.

Рекомендации для веб-приложений

Практика разработки Three.js показывает несколько эффективных подходов.

Для production-версии

  • использовать GLB
  • применять Draco или Meshopt
  • оптимизировать текстуры

Для разработки

  • использовать glTF
  • хранить текстуры отдельно
  • анализировать структуру JSON

Для крупных сцен

  • разбивать сцену на несколько GLB-файлов
  • загружать их лениво (lazy loading)

Lazy Loading моделей

Three.js позволяет загружать модели только при необходимости.

Пример:

function loadModel() {

  loader.load('models/car.glb', (gltf) => {

    scene.add(gltf.scene);

  });

}

Такая стратегия уменьшает время начальной загрузки страницы.

Оптимизация размера GLB

Несколько ключевых методов оптимизации:

1. Уменьшение текстур

  • использовать JPEG или WebP
  • снижать разрешение

2. Удаление лишних вершин

Оптимизация сетки в 3D-редакторе.

3. Использование compression

Draco или Meshopt.

4. Удаление невидимых объектов

Например:

  • скрытых деталей
  • внутренних поверхностей.

Работа с анимациями

GLB и glTF одинаково поддерживают анимации.

Анимации доступны через:

gltf.animations

Запуск анимации:

const mixer = new THREE.AnimationMixer(gltf.scene);

const action = mixer.clipAction(gltf.animations[0]);

action.play();

Это позволяет использовать:

  • скелетную анимацию
  • morph targets
  • keyframe-анимации.

Расширения формата glTF

Формат поддерживает систему расширений.

Некоторые важные расширения:

Расширение Назначение
KHR_materials_clearcoat прозрачные покрытия
KHR_texture_transform трансформации UV
KHR_lights_punctual источники света
KHR_draco_mesh_compression сжатие геометрии

Three.js автоматически поддерживает большинство популярных расширений.

Встраивание моделей в веб-проекты

Типичная структура проекта:

project/
 ├── index.html
 ├── js/
 │   └── app.js
 └── models/
     └── model.glb

Загрузка выполняется через относительный путь:

models/model.glb

Для production-проекта модели часто размещаются на CDN.

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

GLB удобно распространять через CDN-сети:

  • Cloudflare
  • AWS CloudFront
  • Vercel Edge Network

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

  • географически распределённые серверы
  • быстрый доступ
  • эффективное кэширование

Инструменты анализа моделей

Для анализа glTF/GLB используются специальные инструменты:

glTF Viewer

Позволяет визуально проверить модель.

gltf.report

Показывает:

  • размер текстур
  • количество вершин
  • структуру сцены.

Это помогает оптимизировать модели перед публикацией.

Роль glTF в современном веб-3D

Формат glTF стал фактическим стандартом для передачи 3D-контента в вебе. Он широко используется в:

  • WebXR-приложениях
  • онлайн-конфигураторах
  • образовательных симуляциях
  • архитектурной визуализации
  • веб-играх

Бинарный вариант GLB обеспечивает компактность и простоту распространения, тогда как glTF остаётся удобным форматом для разработки и анализа структуры сцены.

Оглавление