Three.js: Двоичный формат FBX не поддерживается?

Созданный на 14 окт. 2016  ·  100Комментарии  ·  Источник: mrdoob/three.js

Описание проблемы

qq 20161014151051

FBXLoader поддерживает только текстовый формат FBX?

Версия Three.js
  • [] Dev
  • [x] r81
  • [] ...

    Браузер
  • [x] Все они

  • [] Chrome
  • [ ] Fire Fox
  • [] Internet Explorer

    Операционные системы
  • [x] Все они

  • [] Windows
  • [] Linux
  • [] Android
  • [] IOS
    Требования к оборудованию (видеокарта, устройство VR, ...)
Enhancement

Самый полезный комментарий

Я собираюсь снова начать работу над бинарным парсером FBX с апреля.
ЛМК, если кто торопится.

Все 100 Комментарий

да. Прямо сейчас FBXLoader поддерживает формат ASCII только в версии 7.

Версия Three.js: r77

qq 20161014175807

Почему?

/ пинг @yamahigashi

Почему?

потому что нет эталонной реализации с открытым исходным кодом? если вы его знаете, мне было бы любопытно его увидеть.

А, подожди, я думал, что речь идет о двоичном коде. Для ASCII FBX ниже v7 у меня был код здесь и несколько тестовых моделей где-то на моем жестком диске.

Кто-нибудь из присутствующих создал или создает бинарный парсер FBX?
Если нет, я чувствую, что пытаюсь сделать это ...

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

Спасибо за совет.
Мне удалось создать бинарный анализатор FBX, посетив этот сайт сейчас.

https://code.blender.org/2013/08/fbx-binary-file-format-specification/

Я попробую сделать ObjectParser, который делает объект
из результата двоичного синтаксического анализатора next.

ой ничего себе, кто-то уже прошел через ад, а там спекулянты)

https://banexdevblog.wordpress.com/2014/06/23/a-quick-tutorial-about-the-fbx-ascii-format/
Я думаю, что эта ссылка также отлично подходит для этого.

@takahirox Было бы здорово, если бы новый парсер имел аналогичную структуру вроде THREE.PLYLoader . В этой реализации используется единая логика для создания объекта THREE.BufferGeometry после анализа данных из входных данных ASCII или двоичного кода (см. Использование метода handleElement ).

хорошо, я попытаюсь. И я думаю, могу ли я также использовать это для MMDLoader .

Кстати, кто-нибудь здесь знает, остается ли двоичный формат FBX таким же даже ниже версии 7?

Я понятия не имею.

Может @mrdoob знает?

@takahirox вы где-нибудь делились своим двоичным парсером fbx?

Пока нет ... Скоро сделаю!

@takahirox Есть обновления :)? Спасибо!

Извините, я был занят в последнее время ... но скоро!

@takahirox Потрясающе \ o /

Я собираюсь снова начать работу над бинарным парсером FBX с апреля.
ЛМК, если кто торопится.

@takahirox У вас есть чем поделиться? Мы делаем презентацию в конце недели и действительно могли бы использовать двоичную загрузку FBX для демонстрации.

Привет, @takahirox. Я действительно очень тороплюсь, есть ли

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

Как ты думаешь, сколько недель?

Хм, может, две или три недели?

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

Что ж, не могу обещать, но попробую.
Есть ли у вас какие-либо данные о конкретных моделях, которыми вы можете поделиться?
Хочу работать с ними в качестве справочника.

testfile.fbx.zip
Это похоже на то, что нам нужно, если это помогает

В это время...

Для https://with.in/watch/under-neon-lights/ мы использовали текстовый FBX, но мы изменили расширение на .fbx.txt, чтобы сервер мог его сжать. Я также довольно много оптимизировал FBXLoader2 . В итоге получился довольно приличный рабочий процесс.

Интересно, есть ли что-то, что FBXLoader поддерживает то, что FBXLoader2 не поддерживает, или мы уже можем заменить это ...

@ Кайл-Ларсон?

Боковое примечание: в примере FBX уже используется FBXLoader2 .

@mrdoob Единственное различие между FBXLoader и FBXLoader2 - это использование индексных буферов. FBXLoader2 не использует индексные буферы. Помимо этого, FBXLoader2 должен включать все функции предыдущего загрузчика.

Ах! Пора его заменить, тогда 👌

Есть ли какие-нибудь обновления по поводу этих ребят? Рад помочь, где могу.

У вас есть версия testfile.fbx.zip в виде текстового файла?
Я хочу сравнить.

Прогресс двоичного парсера ...

image

@ adam-clarey

Можете поделиться скриншотом модели?
Даже текстовый файл не может быть загружен на Three.js.

Скриншот другой модели ....

image

Модель: https://free3d.com/3d-model/robot-2162.html

Хорошо выглядеть! 😀

Спасибо вам всем!

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

block.fbx.zip
screen shot 2017-05-05 at 15 19 12

Вот простой блок с материалом изображения, запеченным в fbx, с сопровождающим изображением того, как он выглядит в блендере.

Вы имеете в виду, что данные изображения текстуры должны быть в файле fbx?

да. Возможно, я неправильно экспортировал эту модель

Я не могу найти данные изображения в двоичных данных fbx ...
Дайте мне знать, если кто-нибудь знает спецификацию данных изображения запеченной текстуры.

может попробовать это
block2.fbx.zip

Все еще не могу найти ...
Могут ли эти файлы загружаться другими программами просмотра?

Пожалуйста, дайте мне знать, если кто-нибудь знает спецификацию данных изображения запеченной текстуры.

Я просто попытался открыть block2.fbx.zip с помощью блендера и 3ds max. Оба показывают только имя файла, но не изображение. Кажется, что в файле есть только ссылка на .../Users/adamclarey/Documents/burger-screen.jpg .

Да, мой парсер извлекает имя файла, но не данные изображения.

Ok. Я явно что-то не так делаю. Blender - не самое интуитивно понятное приложение. Я попробую что-нибудь еще

Я никогда не слышал, чтобы данные изображения можно было запечь в формате экспорта / импорта 3D (но только относительные пути к ресурсам).

Это вообще возможно?

Я только что заметил: это возможно.

Я создам такой тестовый файл и выложу его сюда.

Отличный материал.

Этот FBX был создан в 3ds max и экспортирован с опцией «встроить медиа»:
TestcubeWithImage.zip

Скриншот из 3ds max:

testcubescreenshot

Открыто в блендере (на другой машине):

screenshot_blender

В блендере я до сих пор не обнаружил возможности экспортировать FBX с запеченными изображениями. Может быть, перед экспортом нужно сделать выпечку? - У меня нет опыта работы с блендером.

@takahirox Вот тот же файл, также созданный в 3ds max, но экспортированный без опции «встроить медиа»:

Testcube.zip

Это может быть интересно для сравнения.

Если вам нужны другие файлы для тестирования, не стесняйтесь размещать их здесь.

Я нашел данные, похожие на данные изображения в свойстве Video.ID.properties.Content TestcubeWithImage.fbx.
Этого нет в других двоичных файлах, опубликованных в этой теме.

Я посмотрю поближе ...

image

Прогресс ... 😄

image

Итак, встроенная текстура теперь выглядит нормально.
Может ли кто-нибудь поделиться двоичным fbx, включая анимацию, если у вас есть?

Вот 3 тестовых файла с разными видами анимации по ключевым кадрам:

AnimationTranslate.zip
AnimationMorph.zip
AnimationBones.zip

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

Все они созданы в 3ds max.

  • При повторном импорте в 3ds max все в порядке.
  • Пример AnimationTranslate подходит для Blender и Clara.io.
  • Пример AnimationMorph подходит для Blender, но анимация не работает в Clara.io.
  • Пример AnimationBones подходит для Clara.io, но не совсем подходит для Blender.

@takahirox Наша команда уже давно ищет бинарный парсер FBX three.js, и это выглядит великолепно! Вы уже сделали доступным где-нибудь исходный код? Для наших целей нам нужно иметь возможность извлекать сетки, нормали, UV и визуальную сцену из FBX, и похоже, что это работает нормально.

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

Спасибо за отличную работу!

https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js

Обратите внимание, что это очень временно.
Мне нужно очистить и оптимизировать код.
И функциональность может быть нарушена прямо сейчас.

@takahirox Обратите внимание: после тестирования в разных программах я обновил свой предыдущий комментарий.

@jostschmithals

Спасибо.
Translate и Bone теперь работают.
FBXLoader еще не поддерживает морфинг-анимацию даже с файлом ascii.
Это будет наша следующая работа ....

Я пробовал загрузить файл testcube в свой проект three.js, но ничего не загружается.
Я получаю 404 в файле изображения, после проверки объекта FBXTree я вижу, что он по-прежнему содержит ссылку на абсолютный путь к файлу.

screen shot 2017-05-07 at 15 01 23
screen shot 2017-05-07 at 14 59 00

Я только что протестировал его (на машине, где исходный jpg недоступен), и он отлично работает.

Примечание: вы должны использовать
https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js ,
но загрузчик просто называется THREE.FBXLoader (без номера версии 2).

Вот что я использую. Я буду исследовать дальше

Попробуйте TestcubeWithImage.fbx
Testcube.fbx не включает данные изображения, поэтому вы должны получить 404

@ В моем тесте, который работает нормально, я получаю точно такой же вывод консоли, как @ adam-clarey, за исключением сообщения GET ... 404 .

Кстати: я тестировал Windows 10.

Прогресс...
Анимация теперь работает нормально 😄

image

Не могли бы вы вставить код, который вы используете для загрузки модели? У меня почему-то просто не загружается.

Я попытался заменить файл Testcube в пример webgl_loader_fbx.html (также заменив файл FBXLoader2.js), но он по-прежнему не отображает модель.

@ adam-clarey Это именно то, что я сделал (отключив анимацию, конечно), и это сработало без каких-либо других изменений.

как странно ...

screen shot 2017-05-08 at 09 50 40

И вы уверены, что используете TestcubeWithImage.fbx (как указал @takahirox )?
Есть еще сообщения об ошибках?
Какую ОС вы используете?
Одинаково во всех браузерах?

Аааааа, какой я болван! Я просто прокручивал вверх, пока не нашел первый файл testcube.

Виноват

Привет! Я также получаю эту ошибку при попытке загрузить внешнюю модель .fbx, которая экспортируется из Autodesk. Может ли кто-нибудь дать мне решение для этого

Спасибо!

https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
Обратите внимание, что это очень временно.
Мне нужно очистить и оптимизировать код.
И функциональность может быть нарушена прямо сейчас.

@ hmtri1011

@RicoLiu Это то, что я получил при использовании THREE.FBXLoader. Я реализовал пример loader_fbx, заменив URL-адрес модели.

И когда я использовал THREE.FBXLoader2, я получил ошибку THREE.FBXLoader2 is not a constructor

image

Вы можете использовать webgl_loader_fbx.example:

  1. загрузить https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
    вместо FBXLoader2.js текущей ветки threejs,
  2. используйте THREE.FBXLoader ( без номера версии 2! ),
  3. (отключите анимацию, если в вашей модели нет анимации),

и он должен работать.

@jostschmithals Я следую вашему шагу, а затем получаю новую ошибку Zlib is not defined

Кажется, у вас файл модели сжат?

image
Полная ошибка, что я получаю

Добавьте эту строку в свой пример.

    <script src="js/libs/zlib_and_gzip.min.js"></script>

image
Готово, и появилась очередная ошибка .... :(

Как я писал выше, вы должны деактивировать код анимации (в разделе загрузки и в цикле рендеринга), если вы используете пример кода с файлом модели, который не содержит никаких анимаций.

У меня другая проблема, я уверен, она связана с материалами. Моя проблема в том, что при определенных условиях некоторые модели fbx отображаются, а некоторые - нет.

Воспроизвести:
в файле примера webgl_loader_fbx.html просто внутри init () поместите следующий код для создания среды

 var loadSkyDomeAndGroundBowl = function(scene, onLoad, onProgress, onError) {
                var pathtop="path/to/top.jpg";
                var pathbot="path/to/bottom.jpg";
                var radius=40;
                var bottomtopfactor=0.1;
                var sinkin=0.05;

                var texturetop;
                var texturebot;

                var onTextureLoadTop=function(texture) {
                  console.log('onTextureLoadTop');
                  texturetop=texture;
                  onTextureLoaded();
                };
                var onTextureLoadBot=function(texture) {
                  console.log('onTextureLoadBot');
                  texturebot=texture;
                  onTextureLoaded();
                };

                var onTextureProgress=function(xhr) {
                  console.log('onTextureProgress');
                  if(onProgress)
                    onProgress('Loading sky dome / ground bowl texture');
                };
                var onTextureError=function(xhr) {
                  console.log('onTextureError');
                  if(onError)
                    onError('Error loading sky dome / ground bowl texture');
                };

                var onTextureLoaded=function() {
                  console.log('onTextureLoaded');
                  if(texturetop && texturebot) {
                    console.log('onTextureLoaded 2');
                    var geometrytop = new THREE.SphereGeometry( radius*10, 600, 400, 0, Math.PI*2, 0, Math.PI*0.5);
                    var materialtop = new THREE.MeshBasicMaterial();

                    materialtop.map = texturetop;
                    materialtop.side = THREE.BackSide;
                    var skydome = new THREE.Mesh( geometrytop, materialtop );
                    skydome.position.y=bottomtopfactor*radius+sinkin;
                    scene.add( skydome );

                    var geometrybot = new THREE.SphereGeometry( radius, 60, 40, 0, Math.PI*2, Math.PI*0.5, Math.PI*0.5);
                    var materialbot = new THREE.MeshBasicMaterial();
                    materialbot.map = texturebot;
                    materialbot.side = THREE.BackSide;
                    var groundbowl = new THREE.Mesh( geometrybot, materialbot );
                    groundbowl.scale.set(1,bottomtopfactor,1);
                    groundbowl.position.y=bottomtopfactor*radius+sinkin;
                    scene.add( groundbowl );

                    if(onLoad)
                      onLoad();
                  }
                };

                var loader=new THREE.TextureLoader();
                loader.load(pathtop, onTextureLoadTop, onTextureProgress, onTextureError);
                loader.load(pathbot, onTextureLoadBot, onTextureProgress, onTextureError);
              }

По сути, это просто добавляет небоскреб и землю с двумя изображениями.

Затем после инициализации сцены запустите: loadSkyDomeAndGroundBowl (scene);

Вы увидите, что 2 модели fbx загружаются и отрисовываются нормально в этой новой среде.

Теперь, если вы замените ссылку xsi_man_skinning.fbx на TestcudeWithImages.fbx (также закомментируйте код анимации), вы увидите, что код вообще не отображается.

Я заметил это и с другими файлами fbx. Двоичные файлы fbx не совместимы со средой.

Или я мог просто делать что-то не так ...
(и да, он использует последний файл FBXLoader2)

Это мой пример кода:
`



three.js - тест FBXLoader
<script src="../build/three.js"></script>

<script src="js/controls/OrbitControls.js"></script>

<script src="js/curves/NURBSCurve.js"></script>
<script src="js/curves/NURBSUtils.js"></script>
<script src="js/loaders/FBXLoader2.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/zlib_and_gzip.min.js"></script>
<script>
    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var container, stats, controls;
    var camera, scene, renderer, light;

    var clock = new THREE.Clock();

    var mixers = [];

    init();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

        scene = new THREE.Scene();

        // grid
        var gridHelper = new THREE.GridHelper(28, 28, 0x303030, 0x303030);
        gridHelper.position.set(0, - 0.04, 0);
        scene.add(gridHelper);

        // stats
        stats = new Stats();
        container.appendChild(stats.dom);

        // model
        var manager = new THREE.LoadingManager();
        manager.onProgress = function (item, loaded, total) {

            console.log(item, loaded, total);

        };

        var onProgress = function (xhr) {

            if (xhr.lengthComputable) {

                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');

            }

        };

        var onError = function (xhr) {

            console.error(xhr);

        };

        var loader = new THREE.FBXLoader(manager);
        loader.load('models/fbx/accient_2_full.fbx', function (object) {

            //object.mixer = new THREE.AnimationMixer(object);
            //mixers.push(object.mixer);

            //var action = object.mixer.clipAction(object.animations[0]);
            //action.play();

            scene.add(object);


        }, onProgress, onError);

        loader.load('models/fbx/nurbs.fbx', function (object) {

            scene.add(object);

        }, onProgress, onError);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000);
        container.appendChild(renderer.domElement);

        // controls, camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 12, 0);
        camera.position.set(2, 18, 28);
        controls.update();

        window.addEventListener('resize', onWindowResize, false);

        light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
        light.position.set(0, 1, 0);
        scene.add(light);

        light = new THREE.DirectionalLight(0xffffff, 1.0);
        light.position.set(0, 1, 0);
        scene.add(light);

        //animate();

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    //

    function animate() {

        requestAnimationFrame(animate);

        if (mixers.length > 0) {

            for (var i = 0; i < mixers.length; i++) {

                mixers[i].update(clock.getDelta());

            }

        }

        stats.update();

        render();

    }

    function render() {

        renderer.render(scene, camera);

    }
</script>

`

@jostschmithals, вы можете дать мне правильное решение для этого. Я также отключаю анимированный код

@ adam-clarey Я тестировал его, и причина того, что вы не видите куб, заключается в том, что он находится под землей (если вы вращаете его с помощью камеры, вы должны его увидеть). Кроме того, у меня все отлично работает с вашим кодом.

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

(хотя изображение правильно отображается сверху ...)

@ hmtri1011 Вы animate (). Поэтому ваша сцена вообще не отображается 😉

(В этом случае должно быть достаточно деактивировать только те строки, которые вы уже закомментировали.)

@jostschmithals tks: D теперь работает

Хорошее место @jostschmithals , спасибо.

Имеет ли значение, какая у файла двоичная версия? У меня есть файлы fbx с версией 7400, которые отображаются нормально, но один с версией 7500, и он выдает ошибки.

«FBXLoader: Неизвестный тип собственности»
где переменная type - это пустая строка

@ adam-clarey У меня нет подробных знаний о fbx. Я присоединился к этой теме только потому, что нашел интересным вопрос, могут ли / как данные изображения быть запечены в файл модели. Поэтому я хотел бы переадресовать этот вопрос @takahirox.

Я знаю, что спецификация> = 7500 немного отличается от <7500, и
Я работаю над тем, чтобы поддерживать> = 7500.
Можете ли вы поделиться данными бинарной модели версии 7500 для теста?

Итак, после дополнительных тестов 7200 и 7500 кажутся нормальными.

Однако 6100 и 7300 не отображаются.
house_fs.fbx.zip
DutchHouse.FBX.zip

Вы бы поделились файлами версии ascii?
Мы можем уточнить, связана ли проблема с двоичным кодом или нет.

И я надеюсь, что мы решим эту проблему, потому что FBXLoader теперь поддерживает двоичный код (возможно, еще не идеально).
Давайте сделаем еще одну проблему для улучшения FBXLoader .

@takahirox Звучит хорошо!

@ adam-clarey
Думаю, у меня есть эта ошибка.

«FBXLoader: Неизвестный тип собственности»
где переменная type - это пустая строка

в FBXLoader.js
изменить на

            while ( ! this.endOfContent( reader ) ) {

                var node = this.parseNode( reader, version );
                if ( node !== null ) 
                    allNodes.add( node.name, node );
                else
                    break;

            }

11956

Всем привет,
Я заметил, что FBXLoader просто поддерживает файл FBX> = 7.0.
Теперь я хочу загрузить файл fbx ниже 7.0, расскажите, пожалуйста, как это сделать?
Вот мои файлы fbx https://github.com/nxhoang/Three.js-Fxb-and-Textures/tree/master/models/fbx
Большое спасибо.

@nxhoang, как мы обсуждали здесь , мы поддерживаем только версии FBX выше 6100 (двоичный) или 7000 (ASCII).

Если вам нужно использовать более старые файлы FBX, вам необходимо обновить их (лучше всего загрузить их в 3ds max или Maya для этого) или преобразовать их в другой формат.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги