3D Model Viewer: glTF и GLB онлайн

Что такое glTF/GLB 3D Model Viewer?

glTF/GLB 3D Model Viewer позволяет открывать и проверять файлы .gltf и .glb непосредственно в браузере — без установки программ, без аккаунта и без загрузки файлов на сервер. Перетащите модель в зону загрузки и сразу же вращайте, масштабируйте и перемещайте её мышью. Инструмент работает на основе веб-компонента model-viewer от Google — того же рендерера производственного качества, который используется в 3D-превью товаров Google Search и AR Quick Look. Вы можете переключаться между пятью пресетами окружающего освещения, регулировать экспозицию и интенсивность теней, включать и выключать автовращение, а также экспортировать скриншот текущего вида.

Основные возможности

• Перетаскивание файлов glTF и GLB — бросьте файл .gltf или .glb; несовместимые расширения показывают ошибку до загрузки
• Управление орбитой, масштабированием и перемещением — перемещение левой кнопкой мыши для орбиты, прокрутка для масштабирования, перемещение правой кнопкой для панорамирования; camera-controls активны на элементе <model-viewer>
• Переключение автовращения — переключатель включает или выключает атрибут auto-rotate компонента <model-viewer>; включено по умолчанию
• Пять пресетов окружающего освещения — Neutral, Warm, Legacy, Commerce, Spruit Sunrise; напрямую соответствуют атрибуту environment-image
• Регулировка экспозиции — ползунок от 0,1 до 3,0 (шаг 0,1); значение по умолчанию 1,0
• Регулировка интенсивности теней — ползунок от 0,0 до 2,0 (шаг 0,1); значение по умолчанию 1,0; соответствует атрибуту shadow-intensity
• Экспорт скриншота — вызывает modelViewer.toBlob() и сохраняет файл как {имяМодели}_{соотношениеСторон}_{освещение}_{разрешение}.png
• Пресеты соотношения сторон — выберите из Свободного, 1:1, 4:3, 16:9, 9:16, 3:2 и 21:9 для кадрирования скриншотов
• Несколько способов загрузки — загрузите один файл .gltf/.glb, ZIP-архив с glTF-бандлом или всю папку
• На основе Google model-viewer — WebGL-рендеринг производственного качества с поддержкой материалов PBR (физически корректный рендеринг)

Как использовать glTF/GLB 3D Model Viewer

Шаг 1: Загрузите 3D-модель

Откройте glTF/GLB 3D Model Viewer. Перетащите файл .gltf или .glb из файловой системы в зону загрузки. Можно также кликнуть по зоне загрузки, чтобы открыть диалог выбора файла (атрибут accept задан как .gltf,.glb). Модель загружается через локальный объектный URL — никакие данные не передаются по сети.

Если бросить файл с неподдерживаемым расширением, появится уведомление «Invalid file» и ничего не загрузится.

Шаг 2: Навигация по модели

После загрузки вьюер отображает модель в вьюпорте высотой 500 пикселей. Используйте мышь для навигации:

• Левый клик и перемещение — вращение вокруг модели
• Колесо прокрутки — приближение и удаление
• Правый клик и перемещение — панорамирование камеры

Жесты касания работают аналогично на мобильных устройствах: перемещение одним пальцем для орбиты, щипок для масштабирования, перемещение двумя пальцами для панорамирования.

Имя модели отображается в панели управления моноширинным шрифтом. Нажмите Загрузить новую модель в любой момент, чтобы выгрузить текущую модель и вернуться в зону загрузки.

Шаг 3: Настройка освещения

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

Выбранный пресет выделяется закрашенным фоном. Изменения применяются мгновенно — перезагрузка не требуется.

Шаг 4: Точная настройка экспозиции и теней

Ниже пресетов освещения два ползунка дают дополнительный контроль:

• Экспозиция (0,1–3,0) — увеличивает или уменьшает общую яркость сцены. Значение 1,0 является нейтральным эталоном. Попробуйте 1,5–2,0 для тёмных моделей, которым нужно добавить яркость.
• Интенсивность теней (0,0–2,0) — управляет чёткостью и тёмностью тени на земле под моделью. Установите 0,0, чтобы полностью убрать тень.

Оба значения обновляют атрибуты <model-viewer> в реальном времени.

Шаг 5: Переключение автовращения и экспорт скриншота

Используйте переключатель Автовращение, чтобы запустить или остановить медленное вращение модели вокруг вертикальной оси. Автовращение включено по умолчанию, что позволяет осмотреть всю модель без помощи рук.

Когда вид установлен нужным образом, нажмите Скриншот. Инструмент захватывает текущий рендер и скачивает результат как PNG-файл, названный по имени модели, соотношению сторон, пресету освещения и разрешению. Также можно выбрать конкретное разрешение скриншота в панели управления: Viewport (текущий размер), 720p, 1080p, 2K и 4K.

Практические примеры

Проверка игрового ассета перед интеграцией

Разработчик игры получает модель персонажа в виде player-character.glb. Перетаскивает её во вьюер, чтобы проверить ассет: правильно ли применяются текстуры при освещении Neutral, как персонаж выглядит при освещении Warm для уличной сцены? Экспортирует скриншот для прикрепления к тикету ревью.

Проверка модели товара для листинга в интернет-магазине

Команда электронной коммерции получает 3D-модель товара от поставщика в формате .glb. Загружают во вьюер, выбирают пресет Commerce (оптимизирован для чистой предметной съёмки), регулируют экспозицию до 1,4 для большей чёткости и снижают интенсивность теней до 0,5 для более мягкого вида. Экспортируют скриншот в качестве статичного запасного изображения для страницы товара.

Валидация экспорта glTF из Blender

3D-художник экспортирует сцену из Blender как файл .gltf и открывает во вьюере для быстрой проверки: загружается ли модель без ошибок, рендерятся ли материалы с правильными цветами, адекватен ли масштаб? Орбитальное управление позволяет быстро осмотреть все стороны. Пресет Spruit Sunrise помогает проверить, как модель выглядит в натуральном уличном освещении.

Советы и лучшие практики

Параметр idealAspect: true в экспорте скриншота делает так, что захваченное изображение соответствует текущему соотношению сторон вьюера, не вынуждая выбирать квадратное кадрирование. Если модель шире, чем высока, скриншот отразит это.

Веб-компонент model-viewer поддерживает PBR-материалы (физически корректный рендеринг), определённые в спецификации glTF. Если модель выглядит плоской или выцветшей, проверьте, была ли она экспортирована с PBR-материалами из вашей 3D-программы. Модели, экспортированные без данных о материалах, рендерятся в сером цвете по умолчанию.

Для файлов .gltf с внешними ссылками на текстуры загрузка через диалог выбора файла может завершиться неудачей, поскольку браузер не может получить доступ к другим файлам в каталоге. Используйте формат .glb (который встраивает все текстуры) для надёжной загрузки в браузере.

Вьюер рендерит высотой 500 пикселей вне зависимости от размеров модели. Используйте орбитальное управление для позиционирования модели, а затем делайте скриншот — он захватит рендер в реальных размерах отображения.

Распространённые проблемы и устранение неполадок

Ошибка «Invalid file». Инструмент принимает только файлы с расширением .gltf или .glb (проверка без учёта регистра с помощью .match(/\.(gltf|glb)$/i)). При необходимости переименуйте файл или проверьте, что экспортирующий инструмент создаёт правильный формат.

Модель загружается, но текстуры отсутствуют. При загрузке файла .gltf (JSON-вариант) сопутствующие файлы текстур и бинарных буферов должны находиться в том же каталоге. Диалог выбора файла браузера предоставляет доступ только к выбранному файлу, но не к каталогу. Используйте формат .glb, чтобы упаковать всё в один файл.

Скриншот не выполняется, появляется уведомление «Screenshot error». Метод model-viewer.toBlob() требует наличия WebGL. Если WebGL отключён в браузере или заблокирован видеодрайвером, скриншоты будут невозможны. Проверьте chrome://settings/graphics (Chrome) или аналогичную настройку вашего браузера.

Автовращение не останавливается. Переключатель автовращения управляет атрибутом auto-rotate в реальном времени. Если переключение не останавливает вращение, попробуйте кликнуть по модели, чтобы восстановить управление камерой (это также ставит автовращение на паузу согласно стандартному поведению model-viewer).

Конфиденциальность и безопасность

glTF/GLB 3D Model Viewer загружает файлы моделей через локальный в браузере URL.createObjectURL() — данные никогда не покидают ваше устройство. Компонент Google model-viewer загружается как библиотека JavaScript и рендерит полностью на вашем GPU через WebGL. Никакая геометрия, текстуры или метаданные модели не передаются на какой-либо сервер. Это делает инструмент безопасным для использования с проприетарными 3D-ассетами, невыпущенными продуктами или конфиденциальными промышленными разработками.

Часто задаваемые вопросы

Бесплатен ли glTF/GLB 3D Model Viewer?

Да, полностью бесплатно без аккаунта и без ограничений использования. Это часть набора бесплатных инструментов Glyph Widgets.

Работает ли glTF/GLB 3D Model Viewer офлайн?

После загрузки страницы (включая компонент @google/model-viewer) можно загружать и просматривать локальные файлы моделей без подключения к интернету. Первоначальная загрузка страницы требует сетевого доступа для скачивания библиотеки вьюера.

Безопасны ли мои данные в glTF/GLB 3D Model Viewer?

Файлы моделей загружаются через URL.createObjectURL() и рендерятся локально в WebGL. Никакая геометрия, текстуры или метаданные не отправляются ни на какой сервер. Компонент model-viewer от Google работает полностью в браузере.

Какие форматы файлов поддерживает инструмент?

Только .gltf (JSON + внешние файлы) и .glb (бинарный упакованный формат). Другие 3D-форматы (.obj, .fbx, .stl, .dae) не поддерживаются. Перед загрузкой конвертируйте в glTF с помощью инструментов вроде Blender или конвертера glTF от Khronos.

В чём разница между glTF и GLB?

glTF — это JSON-текстовый файл, ссылающийся на внешние бинарные буферы и файлы текстур. GLB — бинарный контейнерный формат, который упаковывает JSON, буферы и текстуры в один файл. Для загрузки в браузере настоятельно рекомендуется GLB, так как все ассеты самодостаточны.

Какие пресеты освещения доступны?

Пять пресетов: Neutral (сбалансированное студийное освещение), Warm (янтарные/тёплые тона), Legacy (классический рендеринг), Commerce (чистое освещение для предметной съёмки с высоким контрастом) и Spruit Sunrise (натуральный уличный свет). Они соответствуют атрибуту environment-image компонента model-viewer.

Что делает ползунок экспозиции?

Экспозиция регулирует общую яркость рендерируемой сцены от 0,1 до 3,0. Значение по умолчанию — 1,0. Значения выше 1,0 осветляют сцену, ниже 1,0 — затемняют. Это аналог настройки экспозиции в фотографии или в рендерере.

Можно ли просматривать анимированные модели glTF?

Компонент model-viewer поддерживает анимации glTF, однако интерфейс Glyph Widgets не предоставляет элементы управления воспроизведением анимаций. Автовращение — единственная функция движения в текущем интерфейсе. Для предварительного просмотра анимаций glTF используйте специализированный инструмент, например Khronos glTF Sample Viewer.

С каким разрешением экспортируются скриншоты?

В панели управления можно выбрать одну из пяти опций разрешения: Viewport (текущий размер отображения), 720p (1280x720), 1080p (1920x1080), 2K (2560x1440) и 4K (3840x2160). При разрешении Viewport скриншот соответствует размерам отображения вьюера. При более высоких разрешениях инструмент временно изменяет размер элемента вьюера для рендеринга в выбранном разрешении, после чего восстанавливает его.

Можно ли загружать очень большие GLB-файлы?

Принудительного ограничения размера нет, но большие файлы (50 МБ и более) могут занять несколько секунд для создания локального объектного URL и инициализации рендерера model-viewer. Производительность зависит от браузера, GPU и доступной оперативной памяти.

Похожие инструменты

• Скоро: Image Converter — конвертируйте скриншоты, экспортированные из вьюера, в другие форматы изображений
• Скоро: SVG to PNG — конвертируйте SVG-ассеты, которые дополняют рабочие процессы 3D
• Скоро: EXIF Viewer — просматривайте метаданные фотографий, используемых как референсные изображения для 3D-моделирования

Попробуйте glTF/GLB 3D Model Viewer прямо сейчас: Glyph Widgets glTF/GLB 3D Model Viewer