Просмотрщик GLB — открывайте файлы GLB и glTF онлайн

Файл GLB — это двоичная форма glTF 2.0: один файл, в который вместе упакованы меши, материалы, текстуры и анимации 3D-модели. Khronos Group опубликовала glTF 2.0 в 2017 году, а в 2022 году он стал международным стандартом ISO/IEC 12113. Поэтому .glb из Blender, ИИ-генератора моделей или приложения для 3D-сканирования открывается и в этом просмотрщике GLB, и на веб-страницах, и в большинстве игровых движков.

Просмотрщику .glb достаточно прочитать файл и отрисовать его. Редактирование, замена текстур и экспорт в другие форматы — задачи для 3D-редактора.

GLB и glTF: один файл или папка

Одну и ту же модель можно сохранить двумя способами. Файл .gltf — это читаемый JSON, который ссылается на отдельные файлы: .bin с геометрией и по одному изображению на каждую текстуру. Файл .glb упаковывает JSON, двоичные данные и изображения в один файл, который проще отправить по почте, загрузить на сайт и не растерять по частям.

Что внутри GLB: заголовок, JSON-блок и двоичный блок

12-байтовый заголовок

Каждый GLB начинается с букв glTF, номера версии и общей длины файла. Просмотрщик первым делом проверяет эти байты — именно так он может сообщить вам, что «GLB» на самом деле FBX или файл glTF 1.0.

JSON-блок

Далее идёт блок JSON с описанием сцены: меши, материалы, текстуры, анимации и число вершин в каждой части. Отчёт о модели читается отсюда, поэтому цифры появляются ещё до того, как что-либо отрисовано.

Двоичный блок

Последними идут двоичные данные: позиции вершин, нормали, ключевые кадры анимации и обычно сами изображения текстур в форматах PNG, JPEG, WebP или KTX2.

Открыть модель — это полдела. Вторая половина — понять, готова ли она к тому, для чего предназначена: для веб-страницы, телефона, AR-приложения или игры. Этот просмотрщик GLB считывает цифры, которые отвечают на этот вопрос.

Вершины, треугольники и меши

Треугольники — самая наглядная мера того, насколько тяжело отрисовывать модель. Модель товара для веб-страницы обычно укладывается в десятки тысяч треугольников, а отсканированная статуя может насчитывать миллионы и подтормаживать на телефоне. Вершины, общие для нескольких частей, учитываются один раз, поэтому цифра совпадает с тем, что хранится в файле.

Текстуры: куда уходит большая часть байтов

Многие думают, что GLB раздувает сложная геометрия. Так бывает редко. На вкладке «Сводка» есть полоса, которая делит файл на текстуры, геометрию, анимацию и всё остальное, и у большинства статичных моделей львиную долю занимают текстуры. Пример «Авокадо» содержит всего 682 треугольника, но весит 7,73 МБ, и почти весь этот объём — три изображения 2048 × 2048.

Мы измерили 13 файлов GLB из коллекции Khronos glTF Sample Assets собственным парсером этого просмотрщика. Медианная доля текстур составила 95% файла. В основном из геометрии состояли только анимированные персонажи и игрушечная машинка на 109 000 треугольников. Полные цифры — в таблице ниже.

Анимации и цели морфинга

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

Какие расширения сжатия он декодирует

Многие GLB сжаты, и просмотрщик, который не умеет их декодировать, не покажет вообще ничего. Этот поддерживает распространённые расширения:

• Draco (KHR_draco_mesh_compression) сильно сжимает геометрию, но перед отрисовкой модели нужен декодер.
• meshopt (EXT_meshopt_compression) сжимает геометрию и анимацию и декодируется очень быстро.
• KTX2 (KHR_texture_basisu) хранит текстуры в готовом для GPU формате, который расходует меньше видеопамяти.
• WebP (EXT_texture_webp) уменьшает файлы текстур, а браузеры декодируют его сами.

Каждый декодер скачивается, только если файл объявляет соответствующее расширение, поэтому обычный GLB за это ничем не платит.

Файл .gltf сам по себе — это только JSON-описание. Геометрия лежит рядом в файле .bin, а текстуры — в файлах изображений, часто в папке textures. Передайте этому просмотрщику glTF всё сразу: выделите файлы вместе в окне выбора или перетащите всю папку в окно просмотра.

Просмотрщик сопоставляет каждый файл с путём, записанным в .gltf, поэтому структура папок соблюдается. Если файла .bin нет, вы увидите его точное имя, а не молчаливую ошибку. Если не хватает текстуры, модель всё равно откроется, а недостающие файлы будут перечислены — вы будете знать, что искать.

Когда модель не загружается, причина почти всегда одна из этих пяти, и этот просмотрщик GLB называет её, а не показывает пустой экран.

Это не настоящий GLB

Файлы FBX, OBJ и STL иногда переименовывают в .glb в надежде, что это поможет. Не поможет: внутри всё равно другой формат. Просмотрщик читает первые байты и сообщает, что это за файл на самом деле, — тогда его можно заново экспортировать в GLB из Blender или программы, в которой он создан.

Модель чёрная, серая или без текстур

Файл .gltf, к которому не приложили изображения, показывает однотонные серые или белые поверхности. Модели, которая выглядит чёрной, обычно не хватает света: включите «Студийный свет» на вкладке «Сцена» или увеличьте экспозицию.

Модель крошечная, огромная или лежит на боку

В glTF размеры задаются в метрах, а ось +Y направлена вверх. Модель, экспортированная в миллиметрах, окажется в 1 000 раз больше, а модель, построенная с другой вертикальной осью, ляжет на бок. Просмотрщик автоматически подгоняет кадр под любую модель, так что она всегда в поле зрения; масштаб или ось исправьте при экспорте.

Это файл glTF 1.0

Файлы, экспортированные до 2017 года, могут оказаться в формате glTF 1.0, который современные инструменты уже не читают. Открытый инструмент gltf-pipeline от Cesium умеет обновить большинство из них до glTF 2.0.

Страница тормозит или вылетает на телефоне

На телефоне браузер и графический чип делят небольшой объём памяти. Скан на 120 МБ с текстурами 8K может занять её целиком, поэтому на телефонах лимит — 50 МБ. Открывайте большие файлы на компьютере или сначала уменьшите текстуры.

Просмотрщик GLB рисует в реальном времени, со многими кадрами в секунду, используя физически корректный рендеринг и студийное окружение для отражений. Рендерер Cycles в Blender трассирует лучи света секунды или минуты на каждое изображение — с мягкими тенями и светом, который отражается между поверхностями. Материалы одни и те же, а освещение — нет.

Может сместиться и цвет. Этот просмотрщик использует тональное отображение Khronos PBR Neutral, созданное для точной передачи цветов товаров, а другие программы могут придавать картинке «киношный» вид. Если модель выглядит слишком тёмной или слишком светлой, настройте экспозицию на вкладке «Сцена», а не правьте её материалы.

Кнопка с камерой сохраняет в PNG ровно то, что вы видите. Выберите 1×, 2× или 4× от размера окна просмотра, чтобы картинка была чёткой на экранах высокого разрешения, и отметьте «Прозрачный фон», чтобы убрать студийный задник. Мягкая тень на полу останется, поэтому модель естественно ляжет на страницу любого цвета.

Так этот просмотрщик GLB становится быстрым способом превратить GLB в PNG для карточки товара, документа, миниатюры или портфолио. Чтобы потом облегчить изображение, сожмите PNG или конвертируйте его в WebP, а также измените размер до точных значений, которые требует сайт.

В этом — да. Файл читается и отрисовывается внутри вкладки браузера; он никогда не загружается на сервер, и ничего о нём не сохраняется. Даже .gltf, который ссылается на адреса текстур на другом сайте, не может их запросить, так что при открытии модели от её имени не отправляется ни одного запроса.

Дополнительно скачиваются только компоненты самого просмотрщика: 3D-движок, а также декодер Draco или KTX2, когда он нужен сжатому файлу. Это программный код, одинаковый для всех, и в нём нет ничего вашего. Вы можете проверить это сами: откройте инструменты разработчика в браузере и посмотрите вкладку Network («Сеть»), пока открывается модель.