Просмотрщик и компрессор GLB — открывайте, изучайте и сжимайте .glb / .gltf онлайн

Просмотрщик GLB в браузере декодирует файл прямо во вкладке и отображает его с помощью WebGL. Перетащите .glb или .gltf на страницу — и на настольном компьютере модель появится на экране за несколько сотен миллисекунд; никакой загрузки на сервер, никаких установок и никакого аккаунта. GLB — это ресурс glTF 2.0, упакованный в один бинарный файл: 12-байтовый заголовок, блок JSON с описанием графа сцены и блок BIN с буферами вершин, индексными буферами и, как правило, встроенными изображениями.

Эта же страница — это этап проверки и уменьшения в игровом конвейере. Вы открываете экспорт, смотрите на каркас, нормали, UV-островки и слоты материалов, убеждаетесь, что при выходе из Blender или Maya ничего не сломалось, затем сжимаете файл и скачиваете копию для своего движка. На этой странице рассказывается, что выявляет каждый режим проверки, о трёх рычагах сжатия и порядке их применения, а также о бюджетах, в которые реально должна укладываться сцена в браузере.

Откройте .glb прямо здесь

Перетащите файл в зону загрузки или выберите его через диалог выбора файла. Страница считывает его через File API как Blob URL вместе с ArrayBuffer и разбирает в той же вкладке. Откройте при этом панель сети браузера: ни один запрос не несёт модель. Ничего не ставится в очередь, ничего не записывается на сервер, а закрытие вкладки удаляет всё.

Локальность важна дважды. Во-первых, приватность: невыпущенные персонажи, работа для клиентов под NDA, отсканированные ресурсы, за которые вы заплатили. Отправлять их через сторонний конвертер — это проблема лицензирования прежде, чем проблема производительности. Во-вторых, задержка: GLB на 40 МБ при исходящем соединении 10 Мбит/с — это примерно полминуты ожидания ещё до начала любого преобразования, и это ожидание меняет то, как часто вы на самом деле проверяете файл. Локальное чтение с SSD — это доли секунды, а стоимость разбора — это работа процессора на вашей собственной машине.

Поддерживаемые входные данные: .glb — это случай одного файла. .gltf — та же сцена в формате JSON, поэтому обычно он поставляется с буфером .bin и папкой изображений. Выберите их несколько, перетащите всю папку или бросьте zip — и просмотрщик разрешит относительные URI. Встроенные URI данных работают без сопутствующих файлов. Текстуры могут быть PNG, JPEG, WebP или KTX2 (Basis Universal), а геометрия — сжатой с помощью Draco или meshopt, потому что просмотрщик включает оба декодера и читает список расширений в блоке JSON, чтобы решить, какой использовать.

Что оно отображает: PBR-материалы при одном направленном источнике света плюс дополнительная карта окружения, включаемая сетка с шагом 1 м, чтобы можно было оценить реальный масштаб, список клипов для каждой анимации в файле и панель статистики с числом треугольников, числом вершин, числом узлов, оценкой количества вызовов отрисовки, а также пиксельными размерами и размером в байтах каждого встроенного изображения. Память — единственное жёсткое ограничение. GLB на 100 МБ обычно открывается на настольном компьютере; вкладку на телефоне браузер может закрыть ещё до окончания разбора.

Альтернатива — это круговой рейс: открыть DCC, импортировать, посмотреть, экспортировать, загрузить движок, заметить проблему, вернуться назад. Каждый переход стоит минут, и каждый переход может внести собственное изменение, так что в итоге вы отлаживаете конвейер, а не сам ресурс. Проверка в той же вкладке, где уже лежит файл, избавляет от этого рейса и, что полезнее, означает, что числа, которые вы видите, — это числа в файле, который вы вот-вот отправите.

Проверка: каркас, нормали, UV-развёртка, материалы

Четыре режима ловят большинство плохих экспортов ещё до того, как они попадут в движок. Каркас показывает плотность треугольников и выявляет, где экспортёр триангулировал n-угольник. Нормали показывают ориентацию граней, поэтому вывернутая наизнанку поверхность при одном направленном источнике света выглядит чёрной. UV-развёртка разворачивает UV-канал в сетку с текстурой под ней, что делает очевидными перекрывающиеся островки, растянутые тексели и геометрию за пределами диапазона от 0 до 1. Материалы перечисляют каждый материал с его текстурами, режимом прозрачности, флагом двусторонности и настройками цветового пространства.

Всегда проверяйте перед сжатием. Draco и meshopt переписывают буферы вершин и меняют раскладку вершин, а изменение размера текстуры может скрыть шов, который был и раньше. Если сжать первым, вы больше не сможете отличить, ваш это артефакт или компрессора.

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

Сожмите GLB, не сломав его

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

Ни у одного из них нет гарантированной степени сжатия. GLB, представляющий собой один PNG 4096 на 4096, ведёт себя совсем не так, как GLB, состоящий в основном из данных вершин, а сцена с тяжёлой геометрией и 30 текстурами по 512 не отреагирует так же, как один персонаж с единственным атласом 4K. Измеряйте после каждого шага, а не полагайтесь на число из чужого ресурса.

Декодеры — это ограничение при выпуске, а не деталь. Draco требует модуля декодера Draco, meshopt требует MeshoptDecoder, а KTX2 требует транскодера с нужными целевыми форматами. three.js поставляется с GLTFLoader, но DRACOLoader, MeshoptDecoder и KTX2Loader вам придётся подключить самостоятельно; в Babylon.js и glTFast от Unity есть аналоги. Если вы сожмёте с расширением, которое ваша среда выполнения не знает, модель загрузится чёрной или выбросит ошибку, и это будет выглядеть как повреждение файла, а не как ошибка конфигурации.

GLB против glTF против FBX — что нужно вашему движку

glTF 2.0 — это формат времени выполнения. GLB и .gltf — два контейнера для одних и тех же данных: GLB помещает JSON и бинарный буфер в один файл, .gltf хранит их отдельно в виде читаемого текста плюс сопутствующие файлы. FBX — это формат обмена для DCC, который появился раньше glTF и до сих пор остаётся тем, что передают большинство риггеров и аниматоров, а OBJ — это только геометрия, без анимации и вообще без PBR-материалов.

Соглашения об осях и единицах вызывают больше ошибок импорта, чем размер файла. В glTF единицы — метры, ось Y направлена вверх, система правосторонняя, а камеры смотрят вдоль -Z. Экспортёры FBX расходятся во мнениях о единицах, и несоответствие сантиметров и метров проявляется как модель примерно в 100 раз меньше или больше нужного. Экспортёр glTF в Blender сам преобразует Z-up в Y-up; отключите это — и модель приедет лежащей на боку. Проверьте ограничивающий прямоугольник в просмотрщике относительно известного размера, прежде чем винить движок.

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

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

Вызовы отрисовки считаются на каждую сетку для каждого материала. Двести объектов, каждый со своим материалом, стоят двести вызовов, даже если каждый — всего несколько сотен треугольников, а стоимость их отправки на процессоре может превысить стоимость геометрии на GPU. Объединяйте статичную геометрию с общим материалом, собирайте мелкие текстуры в один атлас и применяйте инстансинг к повторяющимся объектам. Прозрачные материалы стоят дороже, чем можно судить по числу их треугольников, потому что они сортируются и смешиваются попиксельно, а отбрасывание теней повторно отрисовывает ту же геометрию в карту глубины.

Размер текстур обычно определяет и файл, и видеопамять — а это как раз то, что люди понимают наоборот. Текстура RGBA8 размером 4096 на 4096 занимает в памяти 67 108 864 байт до мипмапов, а мипмапы добавляют сверху примерно треть; сетка на 100 тысяч треугольников с 4-байтовыми позициями, нормалями и UV для сравнения занимает всего несколько мегабайт. Одна небрежная карта нормалей 4K перевешивает всю сетку, на которой она лежит. KTX2 хранит текстуру сжатой в памяти GPU, и это отдельная экономия по сравнению с размером файла, часто именно та, что важна на мобильных устройствах.

Цветовое пространство входит в этот список, потому что с ним постоянно ошибаются. Основной цвет и свечение — это sRGB. Нормали, metallicRoughness и затенение — линейные. Перепутайте их — и материал будет выглядеть либо блёклым, либо слишком тёмным, и никакая подстройка освещения не поможет, потому что данные были истолкованы неверно при загрузке.

Проверьте реальную модель перед сжатием

Читать о топологии — не то же самое, что вращать её. Галерея моделей Blender встроена на эту страницу в режиме каркаса, так что вы можете покрутить реальный экспорт и посмотреть на треугольники, которые движок действительно будет отрисовывать, а не на аккуратные четырёхугольники, которые видел моделист.

Обращайте внимание на три вещи, пока она вращается. Кривизна: там, где треугольники сбиваются в кучу, их добавил экспортёр, и плоская стена из 20 треугольников рядом со сферой из 20 000 треугольников — это нормально. Швы: изменение затенения вдоль ребра означает, что там вершины были разбиты, что правильно на UV-шве и неправильно на гладкой поверхности. Силуэт: именно контур игрок считывает на расстоянии, и он переживает проход прореживания гораздо лучше, чем внутренние детали.

Те же бюджеты применимы к ресурсам, выпущенным в Mini World и The Cyclops' Island, — оба работают во вкладке браузера через 3D Game Builder. Объект на 40 тыс. треугольников сам по себе — это нормально; сорок таких в одной сцене — уже нет, и именно режим каркаса позволяет узнать это раньше, чем частота кадров.

Войдите в мир, которому он принадлежит

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

FAQ