Three.js: GLTFExporter GLB совместим со средством просмотра Facebook

/ ping @zellski

Привет! Да, проверка RGBA должна пройти через две недели. Не пытайтесь обходить это стороной. :)

Я пытаюсь преобразовать WaltHead.obj в glb. Я загружаю его в https://threejs.org/editor/ и экспортирую оттуда в GLB (где уже должны быть последние исправления).

Вот WaltHead.glb, и вот что я получаю в валидаторе Facebook:

Your GLB File has the following errors: The 3D model could not be posted: The JSON portion of this model file is invalid.

🤔

Это синтаксически допустимый JSON, но нули в этом фрагменте из WaltHead.gltf не соответствуют схеме типа:

    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 48480,
      "max": [
        null,
        null
      ],
      "min": [
        null,
        null
      ],
      "type": "VEC2"
    }

Инструмент проверки Khronos glTF также перечисляет около 10000 экземпляров некоторых других ошибок в файле, все в порядке:

        /accessors/2: Accessor element at index 28922 is NaN or Infinity.

Итак, кажется, может быть, во время экспорта glTF создается аксессор, который должен быть заполнен индексами, но на самом деле никогда их не получает?

UV - это NaN: 🙃

@mrdoob @donmccurdy исправлено! https://github.com/mrdoob/three.js/pull/13400
Хотя мы до сих пор не можем показать этот пример из-за

[msg] => Mesh primitives without indices are (temporary) unsupported.

(добавлен в список дел)

@zellski есть ли у вас какие-либо оценки по поводу этой функции? ;)

@fernandojsg Это немного сложнее. Это будет исправлено, но это может занять немного больше времени. tl; dr Может месяц?

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

Очевидно, что мы должны поддерживать неиндексированную геометрию, и чем раньше, тем лучше. В идеале на клиентах, но к тому времени у меня должен быть бэкэнд-код до полной мощности Звезды Смерти, где мы преобразуем все загруженные .gltf лениво / по требованию, в зависимости от потребностей отдельных клиентов. На этом этапе мы можем делать интересные вещи, например создавать индексированную геометрию на сервере для удобства наших клиентов.

Я предполагаю, что указанная выше ошибка возникает, когда three.js пытается экспортировать примитивы, которые, естественно, не индексируются в его представлении во время выполнения?

Я предполагаю, что указанная выше ошибка возникает, когда three.js пытается экспортировать примитивы, которые, естественно, не индексируются в его представлении во время выполнения?

@zellski вот и все! Некоторые примитивы или объекты, загруженные на три, не индексируются. Первым вариантом использования загрузчика facebook glb, который я придумал, было включение рисунков из нашего приложения A-Painter (дополнительная информация: https://blog.mozvr.com/tag/a-painter/), и мы используем там неиндексированную геометрию. тоже, так что было бы здорово получить поддержку для этого;)
Я просто хотел знать, было ли это в дорожной карте, поэтому знать, что это так, и мы сможем получить это примерно через месяц, более чем разумно;) Спасибо, что поделились этой информацией!

Тем временем нам, возможно, придется добавить тупой атрибут индекса (например, 0, 1, 2, 3, 4, 5, 6, 7, 8, ...) 😕

@mrdoob вы имеете в виду, что у вас есть какой-то метод для преобразования неиндексированных в индексированные, как вы хотите, или добавить хак прямо в экспортер?

Ага, добавить временный хак в экспортере ...

Я не знаю, я просто хочу, чтобы все работало, и мне не приходилось говорить людям: «О, ваша модель не работает на Facebook? Это потому, что ... вы знаете, что такое индексированная геометрия? Да, вы не должны, но ... "

Да, я получил его! Хорошо, я посмотрю, могу ли я добавить какой-нибудь не такой грязный хак :)

@zellski для контекста ...

Я добавил Export GLB в http://threejs.org/editor/, который использует этот GLTFExporter .

Видео: как экспортировать модель как glTF в редакторе Three.js: D

https://twitter.com/superhoge/status/966689549803053056

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

Не могли бы вы взломать GLTFExporter в вилке, которая используется в http://threejs.org/editor/, но нигде в другом месте? Я надеюсь, что мы исправим этот недостаток к тому времени, когда выйдет r91, поэтому вам, ребята, кажется бессмысленным писать осторожный и ответственный код для него.

Не могли бы вы взломать GLTFExporter в вилке, которая используется в http://threejs.org/editor/, но нигде в другом месте?

Да, не беспокойтесь!

Надеюсь, мы исправим этот недостаток к тому времени, когда выйдет r91

О, я собираюсь выпустить ~ 1 марта. Цикл выпуска изменен на начало месяца, чтобы иметь правильные выпуски месяца.

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

Последний тест с использованием двух диффузных карт, одна из которых является прозрачным png:
https://www.facebook.com/fakemrdoob/posts/950266411809572

Не уверен, откуда исходит очевидное alphaTest: 0.5 ...

Просто использую обходной путь для индексов :)
https://www.facebook.com/fernandojsg/posts/10156405595122044

Итак, https://github.com/mrdoob/three.js/pull/13410

@mrdoob, не могли бы вы добавить недостающие функции, которые вы найдете и которые не связаны с требованиями facebook по этой проблеме: https://github.com/mrdoob/three.js/issues/11951
Хотя мне нужно там обновлять статус 😇

Звучит отлично. Я протестирую, экспортировав и перетащив обратно в редактор.
Должны ли мы закрыть это?

@mrdoob Я бы оставил его открытым до тех пор, пока проблема RGB и RGBA для цветов вершин не будет решена на стороне facebook, поэтому, если люди придут сюда в поисках помощи, они могут прочитать об этом вместо того, чтобы открывать другую проблему.

Кстати, я только что нашел эту ссылку с полезной информацией: https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials

Видимо текстуры должны быть мощностью 2 ...
https://twitter.com/drupalati/status/967486854630055936

Разве Three.js не автоматически конвертирует изображение из не степени двойки в степень двойки на лету?

Да, прости. Мобильные клиенты пока не изменяют размер, поэтому мы должны временно отклонить его во время проверки. Мы, вероятно, сделаем изменение размера на сервере, так как мы полностью контролируем конвейер доставки. Надеюсь, что и это ограничение будет снято через 2-3 недели.

@takahirox Да, three.js изменяет размер "на лету". Но собственные клиенты Facebook не используют three.js.

Полный список функций glTF, которые Facebook еще не поддерживает, в приблизительном порядке ETA:

• Нет цветов вершин RGB; должен быть RGBA.
• Отсутствуют текстуры NPOT для определенных комбинаций зажима / фильтра
• Только индексированная геометрия треугольника.
• Без анимации (игнорируется)
• Нет разреженных средств доступа (не проходит валидацию)
• Нет целей морфинга (если какая-либо сетка имеет свойство target, модель не проходит проверку)
• Нет камер (игнорируется) (пока)

Также:

• Максимальный размер файла 3 МБ
• Размер текстуры не превышает 4096
• Никаких расширений кроме KHR_material_unlit (пока)

Думаю, все.

Я сделал PR # 13424 для текстуры force POT, потому что думаю, что он будет стоить не только для FB.

При использовании GLTFExporter для экспорта сетки из нескольких материалов (массива материалов) я получил эту ошибку:

GLTFExporter.js:623 Uncaught TypeError: Cannot read property 'toArray' of undefined
    at processMaterial (GLTFExporter.js:623)

@ Ben-Mack Это известная проблема, и я сейчас над ней работаю. (Но это займет немного времени).

@zellski есть ли в планах поддержка draco на fb? Я могу уменьшить размер мешей с 40 МБ до 5 МБ, но эти последние пару МБ просто не упадут.

@ webprofusion-chrisc (человек, который длинен @ для клавиатуры телефона) да, Драко определенно входит в план действий. Требуется изрядная инженерная работа, так что до конца не меньше месяца, но - во многих отношениях мы строили свои предположения на этом основании - как вы говорите, для многих моделей ограничение в 3 МБ просто неприемлемо. (Я все еще не уверен, что мы можем сделать с текстурами.)

(Я все еще не уверен, что мы можем сделать с текстурами.)

@donmccurdy добивается определенного прогресса в этом направлении: https://github.com/mrdoob/three.js/pull/12877 😀

Мы можем ожидать от GLTFExporter текстур на 25–30% меньшего размера с # 12877.

В долгосрочной перспективе Binomial работает с Khronos над созданием расширения для кроссплатформенных сжатых текстур в glTF: https://www.khronos.org/blog/call-for-participation-gltf-creating-a-compressed-texture-extension .

Хорошо ... После # 12877 и # 13451 экспорт в GLB, который раньше был 3,3 МБ, теперь составляет 480 КБ 😊

Прохладный! # 13451 означает, что размер файла изображения будет больше, если мы конвертируем jpg в png?

Прохладный! # 13451 означает, что размер файла изображения будет больше, если мы конвертируем jpg в png?

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

https://github.com/mrdoob/three.js/blob/dev/src/loaders/TextureLoader.js#L34

Но да, GLTFExpoter настоящее время сохраняется как jpg, когда texture.format === THREE.RGBFormat .

https://github.com/mrdoob/three.js/blob/dev/examples/js/exporters/GLTFExporter.js#L493

Что не идеально, потому что мы повторно сжимаем jpg ... Но лучше, чем экспорт негабаритных файлов?

Мне пришлось добавить код в FBX2glTF, который фактически проверяет альфа-значения даже изображений RGBA, потому что люди (или, точнее, инструменты людей) создают их по умолчанию, и довольно часто совершенно ненужно хранить их как PNG. Даже после того, как мы попробовали самые жесткие, нелинейно оптимизирующие PNG-скрунеры с графическим процессором, кажется, что JPEG действительно правит ... разница в размерах просто невероятная!

Меня немного беспокоит межканальное кровотечение для таких вещей, как текстура ORM (окклюзия / шероховатость / металл), где каждый компонент несет данные, которые совершенно не зависят от данных других компонентов ... но на практике, похоже, все работает нормально.

Экспортер также может сделать уровень качества необязательным при использовании canvas.toDataURL (mimeType) - мои текстуры генерируются во время выполнения из составных изображений, что тоже поможет.

@zellski для конвейера / средства просмотра fb Я предполагаю, что вы могли бы сделать как sketchfab и подавать версию текстуры с низким разрешением, а затем транслировать текстуры с высоким / полным разрешением и заменять их в модели по мере их загрузки. Работа не маленькая, но выполнимая.

@ webprofusion-chrisc Да, возможно, мы этим и займемся. На данный момент мы полностью использовали .glb в качестве передаваемого объекта, который трудно комбинировать с потоковой передачей выборочного типа LOD (поскольку существует только один последовательный файл без произвольного доступа). Но я ожидаю, что мы будем пересматривать базовые предположения довольно часто, в зависимости от того, как обстоят дела. :)

GLTFExporter может экспортировать BufferGeometry и импортировать в Facebook нормально. Но любые Geometry или BufferGeometry преобразованные с использованием метода fromGeometry , не работают на Facebook. Я всегда получаю это в валидаторе FB:

[msg] => Атрибуты вершины COLOR_0 типа RGB (временно) не поддерживаются. Они должны быть RGBA.

Шаг для воспроизведения:

• Используется misc_exporter_gltf последний в dev, Export Sphere или Walthead, хорошо работающие на FB, но результат export Scene1 не может быть импортирован в FB.

Это какое-то ожидаемое поведение и нужно ждать стороны FB?

Я ожидал, что BufferGeometry, использующий fromGeometry должен работать извлеченно, как обычный BufferGeometry, пожалуйста, дайте мне несколько быстрых исправлений, чтобы решить эту проблему.

@ Ben-Mack, согласно @zellski, это должно быть исправлено в ближайшие недели -> https://github.com/mrdoob/three.js/issues/13397#issuecomment -367534958

Начиная со сборки 161 и более поздних (текущая версия App Store - 160) основного приложения FB, это больше не вызывает сбоев, и мы удалим эту проверку. Я ожидаю, что это произойдет в течение недели.

@zellski , это

Хотя это заставляет меня задуматься ...

"Настоящая" причина, по которой THREE.GLTFExporter не может экспортировать THREE.Geometry заключается в том, что когда мы конвертируем THREE.Geometry в THREE.BufferGeometry мы создаем color атрибут, который в большинстве случаев заполнен нулями.

Итак, одно «решение» (и оптимизация) - не экспортировать атрибут color если для material.vertexColors установлено значение THREE.NoColors ?

Упс, я этого не знал: D, это определенно обязательная оптимизация: D

@fernandojsg благодарит вас за обновления, очень признательны. Стоит добавить еще две вещи:

1. Поддержка сеток из нескольких материалов. Те, у которых есть группы в своей геометрии и массив в Mesh.material - в настоящее время они не могут быть экспортированы должным образом;
2. Лучшая совместимость между единственным поддерживаемым MeshStandardMaterial и результатом, который мы получили на Facebook. Пока что металлические и диффузные поверхности выглядят совершенно по-разному в three.js и на Facebook. Может быть, однажды у нас будет специальный материал для Facebook?

Спасибо

@ov Я думаю, что оба из них, вероятно, будут исправлены около r91:

1. экспорт нескольких материалов https://github.com/mrdoob/three.js/pull/13536
2. исправления металла / шероховатости https://github.com/mrdoob/three.js/pull/13501

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

О, нам тоже нужно добавить возможность экспорта KHR_materials_unlit ...

РЕДАКТИРОВАТЬ: открыт https://github.com/mrdoob/three.js/pull/13566

«Настоящая» причина, по которой THREE.GLTFExporter не может экспортировать THREE.Geometry, заключается в том, что при преобразовании THREE.Geometry в THREE.BufferGeometry мы создаем атрибут цвета, который в большинстве случаев заполнен нулями.

Итак, одним «решением» (и оптимизацией) было бы не экспортировать атрибут цвета, если для material.vertexColors установлено значение THREE.NoColors?

+1 надеюсь это скоро исправят. Многие библиотеки для Three.js все еще работают на основе THREE.Geometry .

(FB все еще имеет ошибку ...must be RGBA с THREE.Geometry )

@ Бен-Мак, какие библиотеки вы используете, которые все еще используют геометрию? Возможно, мы могли бы поработать с владельцами, чтобы обновить их.

@looeee Пожалуйста, взгляните на эту библиотеку: https://github.com/a-jie/threejs-geometry-modifiers

Привет, ребята, с сегодняшнего утра Facebook больше не отклоняет цвета вершин RGB (VEC3) как «недопустимые».

На данный момент требования к текстуре «сила двух» сохраняются, но я тоже над этим работаю.

@zellski круто! :) Я очень близок к тому, чтобы полностью поддерживать a-painter: D Есть ли какие-нибудь планы по реализации остальных примитивных режимов? Сейчас я считаю, что поддерживается только TRIANGLE. Было бы здорово поддержать остальные, например, в A-painter мы используем TRIANGLE_STRIP для экономии места 👼

Было бы безумием не реализовать их, правда? В идеале должны быть приняты все действующие glTF. Однако я не знаю, как эта работа будет расставлена ​​по приоритетам. Мы небольшая команда с множеством сильных побуждений. :)

Думаю, теперь этот вопрос можно закрыть?