Glb формат 3ds max

Обновлено: 07.07.2024

В предыдущей главе мы создали простую модель игрушечного поезда, используя некоторые из встроенных геометрий three.js, и быстро стало ясно, что с их помощью будет сложно построить что-либо сложное или органичное. Для создания красивых 3D-моделей требуется сложная программа моделирования. Вы можете использовать three.js для создания любого 3D-приложения, однако создание приложения для моделирования с нуля потребует огромных усилий. Гораздо более простое решение - использовать существующую программу и экспортировать свою работу для использования в three.js… или, обмануть, и загрузить любую из миллионов удивительных моделей и других ресурсов сцены, которые доступны бесплатно во многих местах в Интернете.

В этой главе мы покажем вам, как загрузить некоторые модели, созданные в Blender, приложении для трехмерной графики с открытым исходным кодом, которое можно использовать для моделирования, построения сцены, создания материалов, создания анимации и многого другого. После того, как вы создали модель в Blender, вы можете экспортировать свою работу, используя 3D-формат, такой как glTF, а затем использовать плагин GLTFLoader, чтобы перенести модель в three.js.

Лучший способ отправки 3D-ресурсов через Интернет: glTF

За последние тридцать лет было много попыток создать стандартный формат обмена трехмерными активами. До недавнего времени наиболее популярными из них были форматы FBX, OBJ (Wavefront) и DAE (Collada), хотя все они имеют проблемы, препятствующие их широкому распространению. Например, OBJ не поддерживает анимацию, FBX - это закрытый формат, принадлежащий Autodesk, а спецификация Collada слишком сложна, что приводит к большим файлам, которые трудно загружать.

Однако недавно новый формат под названием glTF стал де-факто стандартным форматом для обмена 3D-ресурсами в Интернете. glTF (GL Transmission Format), иногда называемый JPEG для 3D , был создан Kronos Group, теми же людьми, которые отвечают за WebGL, OpenGL и целый ряд других графических API. Первоначально выпущенный в 2017 году, glTF теперь является лучшим форматом для обмена 3D-ресурсами в Интернете и во многих других областях. В этой книге мы всегда будем использовать glTF, и, если возможно, вы должны сделать то же самое. Он предназначен для публикации моделей в Интернете, поэтому размер файла минимален, а модели загружаются быстро.

Однако, поскольку glTF является относительно новым, ваше любимое приложение может еще не иметь экспортера. В этом случае вы можете преобразовать свои модели в glTF перед их использованием или использовать другой загрузчик, такой как FBXLoader или OBJLoader. Все загрузчики three.js работают одинаково, поэтому, если вам действительно нужно использовать другой загрузчик, все из этой главы по-прежнему будет применяться, с небольшими отличиями.

Всякий раз, когда мы упоминаем glTF, мы имеем в виду glTF версии 2. Исходная версия glTF версии 1 так и не нашла широкого распространения и больше не поддерживается three.js.

Файлы glTF могут содержать модели, анимацию, геометрию, материалы, источники света, камеры или даже целые сцены. Это означает, что вы можете создать всю сцену во внешней программе, а затем загрузить ее в three.js.

Типы файлов glTF

Файлы glTF бывают стандартной и двоичной. У них разные расширения:

Стандартные файлы .gltf не сжаты и могут поставляться с дополнительным файлом данных .bin.
Двоичные файлы .glb включают все данные в один файл.

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

Бесплатные файлы glTF в репозитории three.js

Вы можете найти эти три файла в редакторе в папке assets / models /. В этой главе мы загрузим Parrot.glb, Flamingo.glb и Stork.glb, а затем добавим сетки в форме птиц, содержащиеся в каждом файле, в нашу сцену. В следующей главе мы покажем вам, как воспроизвести анимацию полета, которая есть у каждой птицы.

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

Асинхронный JavaScript

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

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

Плагин GLTFLoader

Чтобы загрузить файлы glTF, сначала вам нужно добавить плагин GLTFLoader в свое приложение. Это работает так же, как добавление плагина OrbitControls. Вы можете найти загрузчик в examples / jsm / loaders / GLTFLoader.js в репозитории, и мы также включили этот файл в редактор. Идите и найдите файл сейчас.

Импорт и создание экземпляра загрузчика работает следующим образом:

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

Методы .load и .loadAsync

Все загрузчики three.js имеют два метода загрузки файлов: старый метод .load на основе обратного вызова и новый метод .loadAsync на основе Promise. Снова обратитесь к главе A.5, где мы подробно рассматриваем разницу между этими двумя подходами. Обещания позволяют нам использовать асинхронные функции, что, в свою очередь, приводит к более чистому коду, поэтому на протяжении всей книги мы всегда будем использовать .loadAsync.

Настройте Main.js и World.js для обработки Async / Await

Ключевое слово await означает «подождите, пока модель загрузится». Если вы ранее имели дело с загрузкой моделей с помощью обратных вызовов или обещаний, то await покажется почти волшебным в своей простоте. Однако нам нужно внести несколько изменений в наш код, прежде чем мы сможем его использовать, поскольку мы можем использовать ожидание только внутри функции, которая была помечена как async:

Другая проблема в том, что мы не можем пометить конструктор как асинхронный. Распространенным решением этой проблемы является создание отдельного метода .init.

Таким образом, конструктор может обрабатывать синхронную настройку класса, как обычно, а затем метод init берет на себя асинхронную настройку. Мы будем использовать этот подход, поэтому нам нужно создать новый метод World.init.

Теперь добавьте в World пустой метод .init и не забудьте пометить его как асинхронный. Такое разделение настройки на синхронный и асинхронный этапы дает нам полный контроль над настройкой нашего приложения. На синхронном этапе мы создадим все, что не зависит от загруженных ресурсов, а на асинхронном этапе мы создадим все, что делает.

GLTF (GL Transmission Format) — это формат файла для хранения 3Д сцен и моделей, который является крайне простым в понимании (структура записана в стандарте JSON), расширяемым и легко взаимодействующим с современными веб-технологиями. Данный формат хорошо сжимает трёхмерные сцены и минимизирует обработку во время выполнения приложений, использующих WebGL и другие API. GLTF сейчас активно продвигается Khronos Group как JPEG от мира 3D. На сегодняшний день используется GLTF версии 2.0. Существует и бинарная версия данного формата, которая называется GLB, единственное различие которого в том, что все хранится в одном файле с расширением GLB.

Эта статья — 1 часть из 2х. В ней мы с вами рассмотрим такие артефакты формата и их атрибуты, как Scene, Node, Buffer, BufferView, Accessor и Mesh. А во второй статье мы рассмотрим оставшиеся: Material, Texture, Animations, Skin и Camera. Больше общей информации о формате можно найти здесь.
Если в процессе просмотра статьи захочется лично поработать с данным форматом, то можете скачать модели GLTF 2.0 с официального репозитория Khronos на GitHub

Проблематика и её решение

Изначально GLTF формат был задуман Khronos Group как решение для передачи 3D контента по интернету и был призван минимизировать количество импортеров и конвертеров, разные виды которых создаются при работе с графическими API.

На текущий момент GLTF и его бинарный брат GLB используются как унифицированные форматы и в CAD программах (Autodesk Maya, Blender и т. д.), в игровых движках (Unreal Engine, Unity и прочих), AR/VR приложениях, соц. сетях и т.д.

Представители Khronos Group утрвеждают следующее:

GLTF универсален — может использоваться одинаково хорошо как для простой геометрии, так и для сложных сцен с анимацией, различными материалами и т. д.
Он достаточно компактен. Да, это можно оспорить, ведь всё зависит от от алгоритмов конвертации и я лично знаю случаи, когда GLTF был больше размером, чем оригинальный, к примеру, FBX файл, но в большинстве случаев это так.
Простота анализа данных – это корневой плюс данного формата. GLTF иерархия использует JSON, а геометрия хранится в бинарном виде, никакого декодинга не нужно!

Система координат и единицы измерения

GLTF использует правостороннюю систему координат, то есть перекрестное произведение +X и +Y дает +Z, где +Y — верхняя ось. Передняя часть 3D ассета GLTF обращена к оси +Z. Единицами измерения для всех линейных расстояний являются метры, углы же измеряются в радианах а положительное вращение объектов — против часовой стрелки. Node трансформации и channel paths анимаций являются трехмерными векторами или кватернионами со следующими типами данных и семантикой:

translation: трехмерный вектор, содержащий перевод по осям x, y и z
rotation: кватернион (x, y, z, w), где w скаляр
scale: трехмерный вектор, содержащий коэффициенты масштабирования по осям x, y и z

GLTF — взгляд изнутри

Как было сказано выше GLTF, как правило, состоит из 2х файлов: 1й с форматом .gltf, который хранит в себе структуру 3D сцены в виде JSON и 2й файл с форматом .bin, который хранит уже непосредственно все данные этой сцены.

Структура формата строго иерархическая и имеет следующий вид:

Рассказывая далее о структуре я буду использовать примеры простейшего GLTF файла, который хранит в себе 1 односторонний треугольник с материалом по умолчанию. Если захотите, то вы можете его скопировать и вставить в любой GLTF просмотрщик, чтобы "пощупать" содержимое файла лично. В своей практике я использовал разные, но остановился на этом, который использует Three.js под капотом. Также хорошей опцией будет использование Visual Studio Code с GLTF плагином. Так у вас появится выбор сразу из 3х движков: Babylon.js, Cesium, Three.js

Scene и Node элементы

Первым-наперво идет основная нода под названием Scene. Это корневая точка в файле, с которой все и начинается. Данная нода содержит массив сцен, которые хранит GLTF и выбор той, которая будет грузится по умолчанию после открытия файла. Контент же 3D сцены начинается со следующего объекта, который называется “Node”. Массив сцен и нод был упомянут не зря, т.к. возможность хранить несколько сцен в одном файле реализована, но на практике стараются хранить одну сцену в одном файле.

Каждая нода является “входной точкой” для описания отдельных объектов. Если объект сложный и состоит из нескольких мешей, то такой объект будет описан «родительской» и «дочерними» нодами. Например, автомобиль, который состоит из корпуса и колес, может быть описан следующим образом: основная нода описывает машину и, в частности, ее корпус. В этой ноде содержится список “дочерних нод”, которые, в свою очередь, описывают уже оставшиеся составные части, такие как, к примеру, колеса. Обработка всех элементов будет осуществляться рекурсивно. Ноды могут иметь TRS (translation, rotation, scale a.k.a. смещени е, поворот и масштабирование) анимации. Кроме того, что такие трансформации влияют непосредственно на сам меш, они точно также воздействуют и на дочерние ноды. В довесок ко всему вышесказанному думаю стоит упомянуть, что внутренние "камеры", если таковые имеются, которые отвечают за отображение для пользователя объекта в кадре, также прикреплены к объекта Node. Объекты ссылаются друг на друга используя соответствующий атрибуты: scene имеет атрибут node, node объект имеет атрибут mesh. Для более простого понимания всё вышесказанное проилюстрировано на следующем рисунке.

Buffer, BufferView и Accessor

Под объектом Buffer подразумевается хранилище бинарных, не обработанных, данных без структуры, без наследования, без значения. В буфере хранится информация о геометрии, анимациях и скиннинге. Главное преимущество бинарных данных в том, что они крайне эффективно обрабатываются GPU, т.к. не требуют дополнительного парсинга, кроме, возможно, декомпрессии. Данные в буфере могут быть найдены по атрибуту URI, который явно дает понять где находятся данные и здесь всего 2 варианта: либо данные хранятся во внешнем файле с форматом .bin, либо они встроены внутрь самого JSON. В первом случае URI содержит ссылку на внешний файл, в этом случае папка, в которой находится GLTF файл, считается корневой. Во втором случае файл будет иметь формат .glb, отсылающий нас к более компактному, с точки зрения количества файлов, брату-близнецу GLTF, формату GLB. Данные в бинарном файле хранятся как есть, побайтово.

JSON в нашем примере с треугольником будет выглядеть следующим образом:
Пример буфера, закодированного в base64:

Если же у вас будет внеший файл, то JSON преобразует свой вид в следующий:

Блок Buffers также имеет дополнительный атрибут byteLength, который хранит в себе значение размера буфера.

Первым шагом в структуризации данных из буфера служит объект BufferView. BufferView можно назвать "срезом" информации из Buffer, который характеризуется определенным сдвигом байт от начала буфера. Данный "срез" описывается при помощи 2х атрибутов: отсчет “сдвига” от начала буфера для считывания и длинной самого среза. Простой пример нескольких объектов BufferView для наглядности их использования на основе нашего примера:

Как вы видите, в данном примере содержится 4 основных атрибута:

Buffer указывает на индекс буфера (порядковый номер в массиве буферов, начинается с 0).
byteOffset — определяет “сдвиг” начала отсчета в байтах для данного “среза”
byteLength — определяет длину “среза”
target — определяет тип данных, содержащихся в bufferView
Первый BufferView содержит первые 6 байт буфера и не имеет сдвига. Со вторым "срезом" все немного сложнее: как видите, его сдвиг находится на 8м байте, вместо ожидаемого 6го. Данные 2 байта являются пустыми и были добавлены в процессе формирования буфера благодаря процессу под названием "padding". Оно нужно, чтобы значение подогнать значение байт границы в 4 байта. Такой трюк нужен для более быстрого и легкого считывания данных из буфера.

Стоит сказать еще пару слов об атрибуте target. Он используется для классификации типа информации на которую ссылается bufferView. Здесь всего 2 варианта: либо это будет значение 34962, которое используется для ссылки на атрибуты вертексов (vertex attributes — 34962 — ARRAY_BUFFER) или же 34963, которое используется для индексов вертексов (vertex indices — 34963 — ELEMENT_ARRAY_BUFFER). Последним штрихом при для понимания и структуризации всей информации в Buffer является объект Accessor.

Accessor — это объект, который обращается к BufferView и содержит атрибуты, которые определяют тип и расположение данных из BufferView. Тип данных аксессора кодируется в type и componentType. Значением атрибута type является строка и имеет следующие значения: SCALAR для скалярных значений, VEC3 для 3х мерных векторов и MAT4 для матрицы размерностью 4х4 или же кватерниона, который используется для описания rotation (поворота).

В свою очередь componentType указывает тип компонентов этих данных. Это GL константа, которая может иметь такие значение, как, к примеру, 5126 (FLOAT) или 5123 (UNSIGNED_SHORT), для указания того, что элементы имеют плавающую запятую и т.п.

Различные комбинации этих свойств могут использоваться для описания произвольных типов данных. Пример основанный на нашем треугольнике.

Разберём атрибуты, представленные в JSON:

bufferView — указывает порядковый номер BufferView из массива BufferView, который использует Accessor. BufferView же, в свою очередь, хранит информацию об индексах.
byteOffset — сдвиг байт для начала считывания данных текущим Accessor. На один BufferView может ссылаться несколько объектов типа Accessor.
componentType — константа, указывающая на тип элементов. Может иметь значения 5123, которой соответствует тип данных UNSIGNED_SHORT или же 5126 для FLOAT.
count — отображает как много элементов хранится в buffer.
type — определяет тип данных: скаляр, вектор, матрица.
max и min — атрибуты, которые определяют минимальное и максимальное значение положение данных элементов в пространстве.

Объект Meshes содержит информацию о мешах, расположенных в сцене. Одна нода (node объект) может хранить только 1 меш. Каждый объект типа mesh содержит массив типа mesh.primitive, в свою очередь примитивы — это примитивные объекты (к примеру треугольники) из которых состоит непосредственно меш. Данный объект содержит много дополнительных атрибутов, но все это служит одной цели — правильному хранению информации об отображении объекта. Основные атрибуты меша:

POSITION — позиция вертексов по осям XYZ
NORMAL — нормализованные XYZ нормали вертексов
TANGENT — XYZW тангентсы вертексов. W указывает куда направлен тангент и имеет значечние либо +1, либо -1.
TEXCOORD_0 — текстурные координаты UV. Может хранится несколько наборов.
COLOR_0 — RGB или RGBA цвета вертексов.
JOINTS_0 — данный атрибут содержит индексы суставов/джоинтов (Joints) из соответствующего массива joints, которые должны влиять на вертекс (вершину).
WEIGHTS_0 — данные этого атрибута определяют веса, указывающие насколько сильно сустав/joint влияет на вершину.
weights — атрибут, отвечающий за веса морфинга.
material — содержит индекс, который является номером материала в массиве Materials

Данный объект будет иметь следующий вид для нашего случая:

К сожалению из-за ограничения весь материал не вместился с одну статью, поэтому оставшуюся часть можно найти во второй статье, в которой мы рассмотрим оставшиеся артефакты: Material, Texture, Animations, Skin и Camera, а также соберём минимальный рабочий GLTF файл.

Если вам по какой-то причине требуется, чтобы материал был совместим с форматом glTF 2.0, вы можете использовать простые настройки на основе шейдерной ноды Principled BSDF.

Содержание

Настройки

Добавьте шейдерную ноду Physical Material следующим образом: перейдите в раздел Materials/Map Browser и выберите Physical Material из списка материалов General.

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

Подключите текстуру Ambient Occlusion ко входу Base Weight Map. Для лучшей согласованности между вьюпортом 3ds Max и Verge3D текстуру Ambient Occlusion можно также подключить ко входу Refl Color Map, но это не обязательно.
Подлючите текстуру Base Color ко входу Base Color Map.
Подлючите текстуру Roughness ко входу Roughness Map.
Подлючите текстуру Metallic ко входу Metalness Map.
Подлючите текстуру Normal к ноде Normal Map, а затем к ноде Physical Material ко входу Bump Map. После чего, вам следует установить значение Bump Map Amount в панели Special Map настроек Physical Material равным 1.0.
Подключите текстуру Emission ко входу Emission Color Map. После чего, вам следует установить значение emission равным 1.0 в панели Basic Parameters настроек Physical Material.
Карта Transparency будет взята из Альфа-канала текстуры Base Color.

Коррекция Цветового Пространства и Гаммы

Для правильной визуализации необходимо учитывать цветовое пространство для изображений. Все изображения, кроме текстур Base Color и Emission, должны быть представлены в линейном цветовом пространстве. Для этого выберите Override Gamma со значением 1.0 в Gamma Preferences, затем откройте изображение в диалоговом окне Open Image (как показано ниже).

Текстуры Base Color и Emission должны быть открыты в цветовом пространстве sRGB color space (с Gamma 2.2). Для этого оставьте значение Automatic в настройках gamma preferences диалогового окна Open Image.

Текстура Прозрачности

Движок будет автоматическии использовать Alpha канал (если он есть) из текстуры Base Color в качестве карты прозрачности. Чтобы сделать прозрачность видимой во вьюпорте 3ds Max, подключите Alpha канал текстуры Base Color ко входу Transparency Color Map.

Также в Preferences текстуры, в панели Bitmap Parameters следует установить Mono Chanel Output в Alpha и RGB Channel Output в Alpha as Gray.

Экспорт Текстур из Substance Painter

Модели, вместе с запечёнными картами нормалей и окклюзии (если они есть), могут быть открыты в Substance Painter через формат OBJ.

На выходе в этой программе создаются три карты: base color/transparency, occlusion/roughness/metallic и normal.

Для упрощения экспорта текстур из Substance Painter и достижения максимального потенциала при использовании движка Verge3D, мы рекомендуем использовать Verge3D export preset. Поместите этот файл с пресетом в папку export-presets, которую можно найти, используя следующий путь My Documents\Allegorithmic\Substance Painter\shelf\ (если папки нет, создайте её самостоятельно).

При экспорте текстур из Substance Painter, в диалоговом окне эксопрта выберете Verge3d for Blender, чтобы он сгенерировал текстуры совместимые с форматом glTF 2.0 standard, на котором основан Verge3D.

Экспортируйте в glTF во время запуска

С пазлом export to gltf вы можете экспортировать свои модели или целую сцену в реальном времени. Затем вы можете скачать экспортированную модель или загрузить на сервер для постоянного хранения. Ознакомьтесь с данным пазлом подробнее по ссылке.

Различные форматы файлов для экспорта результатов моделирования

Программное обеспечение COMSOL Multiphysics поддерживает экспорт результатов во многих различных форматах. Здесь я перечислю лишь некоторые из доступных возможностей:

А как насчет результатов в трехмерном предствлении?

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

Для экспорта трехмерных результатов теперь вы можете использовать формат glTF™. Множество организаций и программ преобразования файлов поддерживают glTF™, включая компании из индустрии компьютерной графики, поставщики программного обеспечения и компании, создающие открытый программный код. Файлы glTF™ представлены в двух вариантах:

Формат glTF™ представляет собой набор файлов, описывающих трехмерное изображение, а также координаты, цвета и так далее.
Формат GLB упрощает передачу трехмерной графики в виде одного двоичного файла, содержащего всю информацию, необходимую для задания и графического представления трехмерного объекта.

Можно преобразовать GLB-файл в файл glTF™ и наоборот.

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

Когда вы нажмете OK, файл будет экспортирован и готов к использованию с помощью любых графических программа, которые могут отображать и работать с объектом. Обратите внимание, что экспортируется только основное содержимое Графического окна. Элементы, такие как название графика и легенда, не экспортируются, поскольку формат файла glTF™ не поддерживает эти элементы.

Существуют и другие типы графиков, которые создают линии. Чаще всего, это графики типа Streamline (линии тока). Если у вас есть график типа Streamline, то вы можете переключиться на отображение лент или трубок вместо линий. Имейте в виду, что использование отображения в виде трубок обычно приводит к созданию довольно больших GLB-файлов.

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

Инструменты для просмотра трехмерных изображений в формате glTF™

Поддержка файлов glTF™ в продуктах Microsoft

Дальнейшие шаги

Ознакомьтесь с другим функционалом по экспорту результатов моделирования:

Рубрики блога

Я соглашаюсь с тем, что COMSOL будет собирать, хранить и обрабатывать мои персональные данные согласно моим настройкам и Политике конфиденциальности COMSOL . Я соглашаюсь получать электронные письма от COMSOL AB и его аффилированных компаний о блоге COMSOL. Это согласие может быть отозвано.

Читайте также: