Three.js: ¿El formato binario FBX no es compatible?

Creado en 14 oct. 2016  ·  100Comentarios  ·  Fuente: mrdoob/three.js

Descripción del problema

qq 20161014151051

¿FBXLoader solo admite el formato de texto FBX?

Versión Three.js
  • [] Desarrollo
  • [x] r81
  • [] ...

    Navegador
  • [x] Todos ellos

  • [ ] Cromo
  • [] Firefox
  • [ ] Explorador de Internet

    SO
  • [x] Todos ellos

  • [] Windows
  • [] Linux
  • [] Android
  • [] IOS
    Requisitos de hardware (tarjeta gráfica, dispositivo VR, ...)
Enhancement

Comentario más útil

Comenzaré a trabajar en el analizador binario FBX nuevamente a partir de abril.
LMK si alguien tiene prisa.

Todos 100 comentarios

Si. En este momento, FBXLoader solo admite el formato ASCII en la versión 7.

Versión de Three.js: r77

qq 20161014175807

¿Por qué?

/ ping @yamahigashi

¿Por qué?

porque no hay una implementación de código abierto de referencia? si conoces alguno, tendría curiosidad por verlo.

Ah, espera, pensé que se trataba de binarios. Para ASCII FBX por debajo de v7, tenía el código aquí y un montón de modelos de prueba en algún lugar de mi disco duro.

¿Alguien aquí que haya creado o esté haciendo un analizador FBX binario?
Si no, tengo ganas de intentar hacer eso ...

tiene que amar las cosas de ingeniería inversa para hacer esto) y, puede tener suerte si se trata de etiquetas simples, pero si serializan cada tipo de datos de manera única, está bien informado: se enfrenta a ajustar un número por modelo y guardarlo para ver qué ha cambiado, a la vez.

Gracias por el consejo.
Logré hacer un analizador binario FBX al ver este sitio ahora.

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

Intentaré hacer ObjectParser que hace un objeto
del resultado del analizador binario siguiente.

oh wow, alguien ya pasó por el infierno, y hay especificaciones)

https://banexdevblog.wordpress.com/2014/06/23/a-quick-tutorial-about-the-fbx-ascii-format/
Creo que este enlace también es excelente para hacer eso.

@takahirox Sería genial si el nuevo analizador tuviera una estructura similar a THREE.PLYLoader . Esta implementación utiliza una lógica uniforme para crear el objeto THREE.BufferGeometry después de analizar los datos de una entrada ASCII o binaria (consulte el uso del método handleElement ).

Esta bien lo intentaré. Y estoy pensando si también puedo usar eso por MMDLoader .

Por cierto, ¿alguien aquí sabe si el formato binario FBX sigue siendo el mismo incluso por debajo de la versión 7?

No tengo ni idea.

¿Quizás @mrdoob lo sabe?

@takahirox , ¿compartiste tu analizador fbx binario en algún lugar?

Todavía no ... ¡Lo haré pronto!

@takahirox ¿ Alguna actualización :)? ¡Gracias!

Lo siento, he estado ocupado últimamente ... ¡pero pronto, pronto!

@takahirox Impresionante \ o /

Comenzaré a trabajar en el analizador binario FBX nuevamente a partir de abril.
LMK si alguien tiene prisa.

@takahirox ¿Tienes algo difícil para compartir? Haremos una presentación al final de la semana y realmente podríamos usar la carga binaria FBX para la demostración.

Hola @takahirox , tengo prisa, ¿hay alguna actualización sobre esto? Puedo ayudar donde sea posible, pero todo esto todavía es nuevo para mí.

Estoy empezando a trabajar en eso de nuevo.
Al menos, todavía necesito algunas semanas para compartir eso.

¿Cuántas semanas crees?

Hm, ¿tal vez dos o tres semanas?

Solo por curiosidad, ¿podría hacerse en una semana más o menos si pudiera patrocinar parte del trabajo de desarrollo?

Bueno, no puedo prometerlo, pero lo intentaré.
¿Tiene datos de modelos específicos que pueda compartir?
Quiero trabajar con ellos como referencia.

testfile.fbx.zip
Esto es similar a lo que necesitamos si ayuda.

Mientras tanto...

Para https://with.in/watch/under-neon-lights/ usamos FBX de texto plano, pero cambiamos la extensión a .fbx.txt para que el servidor lo gzip. También optimicé bastante el FBXLoader2 . Terminó siendo un flujo de trabajo bastante decente.

Me pregunto si hay algo que FBXLoader admita que FBXLoader2 no lo haga o ya podemos reemplazarlo ...

@ kyle-larson?

Nota al margen: el ejemplo de FBX ya usa FBXLoader2 también.

@mrdoob La única diferencia entre FBXLoader y FBXLoader2 es el uso de búferes de índice. FBXLoader2 no utiliza búferes de índice. Aparte de eso, FBXLoader2 debería incluir todas las características del cargador anterior.

¡Ah! Es hora de reemplazarlo entonces 👌

¿Hay alguna actualización sobre estos chicos? Feliz de ayudar donde pueda.

¿Tiene una versión de archivo de texto de testfile.fbx.zip?
Quiero comparar.

Progreso del analizador binario ...

image

@ adam-clarey

¿Puedes compartir la captura de pantalla del modelo?
Incluso el archivo de texto no se pudo cargar en Three.js.

Captura de pantalla de otro modelo ...

image

Modelo: https://free3d.com/3d-model/robot-2162.html

¡Luciendo bien! 😀

¡Gracias a todos!

Intentaré subir una captura de pantalla pronto. Básicamente, mi caso de uso es poder agrupar imágenes de materiales y modelar en un solo archivo

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

Aquí hay un bloque simple con un material de imagen horneado en el fbx con una imagen adjunta de cómo se ve en Blender

¿Quiere decir que los datos de la imagen de textura deberían estar en el archivo fbx?

Si. Puede que haya exportado ese modelo incorrectamente

No puedo encontrar los datos de la imagen en los datos binarios fbx ...
Avíseme si alguien conoce la especificación de datos de imágenes de textura horneada.

tal vez pruebe este
block2.fbx.zip

Todavía no puedo encontrar ...
¿Se pueden cargar esos archivos en otros visores?

Por favor, avíseme si alguien conoce la especificación de datos de imágenes de textura horneada.

Intenté abrir block2.fbx.zip con Blender y con 3ds max. Ambos muestran solo el nombre del archivo, pero no la imagen. Parece que solo existe la referencia a .../Users/adamclarey/Documents/burger-screen.jpg en el archivo.

Sí, mi analizador extrae el nombre del archivo pero no los datos de la imagen.

Está bien. Obviamente estoy haciendo algo mal. Blender no es la aplicación más intuitiva de usar. Intentaré algo más

Nunca escuché que los datos de la imagen pudieran ser horneados en un formato de exportación / importación 3D (pero solo rutas relativas a los recursos).

¿Es esto siquiera posible?

Me acabo de dar cuenta: es posible.

Crearé un archivo de prueba de este tipo y lo publicaré aquí.

Buena cosa.

Este FBX se creó en 3ds max y se exportó con la opción "incrustar medios":
TestcubeWithImage.zip

Captura de pantalla de 3ds max:

testcubescreenshot

Abierto en licuadora (en una máquina diferente):

screenshot_blender

En Blender no descubrí una opción para exportar un FBX con imágenes horneadas hasta ahora. ¿Quizás haya que hornear antes de exportar? - No tengo experiencia con Blender.

@takahirox Aquí está el mismo archivo, también creado en 3ds max, pero exportado sin la opción "incrustar medios":

Testcube.zip

Puede ser interesante para comparar.

Si necesita otros archivos para probar, no dude en publicarlos aquí.

Encontré datos que parecían datos de imagen en la propiedad Video.ID.properties.Content de TestcubeWithImage.fbx.
Esto no existe en otros archivos binarios publicados en este hilo.

Echaré un vistazo más de cerca ...

image

Progreso ... 😄

image

Entonces, la textura incrustada se ve bien ahora.
¿Alguien puede compartir el fbx binario, incluida la animación, si lo tiene?

Aquí hay 3 archivos de prueba con diferentes tipos de animaciones de fotogramas clave:

AnimationTranslate.zip
AnimationMorph.zip
AnimationBones.zip

Pero lamentablemente no logré producir archivos que se comporten de la misma manera en diferentes programas.

Todos están creados con 3ds max.

  • Todo está bien al reimportar a 3ds max.
  • El ejemplo de AnimationTranslate está bien en Blender y Clara.io.
  • El ejemplo de AnimationMorph está bien en Blender, pero la animación no funciona en Clara.io.
  • El ejemplo de AnimationBones está bien en Clara.io, pero la animación no está del todo bien en Blender.

@takahirox Nuestro equipo ha estado buscando un analizador FBX binario de three.js durante un tiempo, ¡y se ve genial! ¿Ha hecho que la fuente esté disponible en algún lugar todavía? Para nuestros propósitos, necesitamos poder extraer las mallas, las normales, los UV y la escena visual del FBX, y parece que está funcionando bien.

Si la fuente está disponible, sería genial si pudiera indicarme dónde está.

Gracias por el gran trabajo!

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

Tenga en cuenta que esto es muy temporal.
Necesito limpiar y optimizar el código.
Y la funcionalidad podría romperse en este momento.

@takahirox Tenga en cuenta: Después de algunas pruebas en diferentes programas, actualicé mi comentario anterior.

@jostschmithals

Gracias.
Translate y Bone parecen funcionar ahora.
FBXLoader aún no admite la animación Morph, incluso con archivos ascii.
Sería nuestro próximo trabajo ...

Intenté cargar el archivo testcube en mi proyecto three.js pero no se carga nada.
Obtengo un 404 en el archivo de imagen, después de inspeccionar el objeto FBXTree puedo ver que todavía tiene una referencia a la ruta de archivo absoluta.

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

Lo acabo de probar (en una máquina donde el jpg original no está disponible) y funciona bien.

Nota: tienes que usar
https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js ,
pero el cargador simplemente se llama THREE.FBXLoader (sin la versión número 2).

Eso es lo que estoy usando. Investigaré más a fondo

Prueba TestcubeWithImage.fbx
Testcube.fbx no incluye datos de imagen, por lo que debería obtener 404

@ En mi prueba, que funciona bien, obtengo exactamente la misma salida de consola que @ adam-clarey, excepto el mensaje GET ... 404 .

Por cierto: probé en Windows 10.

Progreso...
La animación parece funcionar bien ahora 😄

image

¿Puedes pegar el código que estás usando para cargar el modelo, por favor? Por alguna razón, simplemente no se carga para mí.

Intenté sustituir el archivo Testcube en el ejemplo webgl_loader_fbx.html (también intercambiando el archivo FBXLoader2.js) y todavía no representa el modelo.

@ adam-clarey Eso es exactamente lo que hice (desactivando las animaciones, por supuesto), y funcionó sin ningún otro cambio.

que extraño ...

screen shot 2017-05-08 at 09 50 40

¿Y está seguro de que está utilizando TestcubeWithImage.fbx (como señaló @takahirox )?
¿Algún otro mensaje de error?
¿Qué sistema operativo estás usando?
¿Lo mismo en todos los navegadores?

AAHHH, ¡qué tonto soy! Simplemente me desplacé hacia arriba hasta que encontré el primer archivo de testcube.

Mi error

¡Hola! También recibo este error al intentar cargar un modelo .fbx externo que se exporta desde Autodesk. ¿Alguien puede darme una solución para esto?

¡Gracias!

https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
Tenga en cuenta que esto es muy temporal.
Necesito limpiar y optimizar el código.
Y la funcionalidad podría romperse en este momento.

@ hmtri1011

@RicoLiu Esto es lo que obtuve cuando usé THREE.FBXLoader. Implementé un ejemplo de loader_fbx reemplazando la URL del modelo.

Y cuando usé THREE.FBXLoader2 recibí el error THREE.FBXLoader2 is not a constructor

image

Puede utilizar webgl_loader_fbx.example:

  1. cargar https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
    en lugar del FBXLoader2.js de la rama actual de threejs,
  2. use THREE.FBXLoadersin la versión número 2! ),
  3. (desactiva las animaciones, si no hay animaciones en tu modelo),

y debería funcionar.

@jostschmithals Sigo tus pasos y recibo un nuevo error Zlib is not defined

¿Parece que su archivo de modelo está comprimido?

image
Error completo lo que obtengo

Agregue esta línea en su ejemplo.

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

image
Listo, y apareció otro error .... :(

Como escribí anteriormente, debe desactivar el código de animación (en la sección de carga y en el bucle de renderizado), si usa el código de ejemplo con un archivo de modelo que no contiene ninguna animación.

Estoy experimentando un problema diferente, estoy seguro de que está relacionado con los materiales. Mi problema es que, bajo ciertas condiciones, algunos modelos fbx se renderizan y otros no.

Reproducir:
en el archivo de ejemplo webgl_loader_fbx.html, justo dentro de init () coloque el siguiente código para crear un entorno

 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);
              }

Lo que básicamente solo agrega un skydome y un suelo con 2 imágenes.

Luego, después de inicializar la escena, ejecute: loadSkyDomeAndGroundBowl (scene);

Verá que los 2 modelos fbx se cargan y renderizan bien dentro de este nuevo entorno.

Ahora, si reemplaza la referencia xsi_man_skinning.fbx con TestcudeWithImages.fbx (también comente el código de animación) verá que el código no se procesa en absoluto.

También he notado esto con otros archivos fbx. Los archivos binarios fbx no parecen ser compatibles con los entornos.

O podría estar haciendo algo mal ...
(y sí, está usando el último archivo FBXLoader2)

Este es mi código de ejemplo:
'



three.js - Prueba de 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, ¿puedes darme una solución correcta para esto? También estoy desactivado el código animado

@ adam-clarey Lo probé, y la razón por la que no puedes ver el cubo es que se encuentra debajo del plano del suelo (si lo orbitas con la cámara, deberías verlo). Además de esto, todo me funciona bien con tu código.

@takahirox : La malla dentro del grupo creado por FBXLoader se traslada y gira, de modo que el punto de pivote no se coloca en el centro del cubo como en el modelo original, sino en el centro de su lado superior. ¿Esto parece ser un error menor?

(la imagen se muestra correctamente en la parte superior aunque ...)

@ hmtri1011 Ha desactivado su función animate (). Por lo tanto, su escena no se renderiza en absoluto 😉

(Debería ser suficiente en este caso con desactivar solo las líneas que ya ha comentado).

@jostschmithals tks : D funciona ahora

Buen lugar @jostschmithals , gracias.

¿Debería importar qué versión binaria es el archivo? Tengo archivos fbx con la versión 7400 que se procesan bien, pero uno con la versión 7500 y tiene errores.

"FBXLoader: tipo de propiedad desconocido"
donde la variable 'tipo' es una cadena vacía

@ adam-clarey No tengo un conocimiento detallado de fbx. Solo me uní a este hilo porque encontré la pregunta interesante si / cómo los datos de la imagen podrían integrarse en el archivo del modelo. Así que me gustaría enviar esta pregunta a @takahirox.

Sé que la especificación de> = 7500 es un poco diferente de <7500, y
Estoy trabajando en eso para soportar> = 7500.
¿Puede compartir los datos del modelo binario de la versión 7500 para la prueba?

Entonces, después de más pruebas, 7200 y 7500 parecen estar bien.

Sin embargo, 6100 y 7300 no se procesan.
house_fs.fbx.zip
DutchHouse.FBX.zip

¿Compartirías los archivos de la versión ascii?
Podemos aclarar si el problema es binario específico o no.

Y espero que cerremos este problema porque FBXLoader ahora es compatible con binario (aunque quizás no sea perfecto todavía).
Hagamos otro problema para la mejora FBXLoader .

@takahirox ¡ Suena bien!

@ adam-clarey
Creo que tengo este error.

"FBXLoader: tipo de propiedad desconocido"
donde la variable 'tipo' es una cadena vacía

en FBXLoader.js
cambiar a

            while ( ! this.endOfContent( reader ) ) {

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

            }

11956

Hola, todos,
Me di cuenta de que FBXLoader solo admite que el archivo FBX sea> = 7.0.
Ahora quiero cargar el archivo fbx por debajo de 7.0, por favor diga cómo hacerlo.
Aquí están mis archivos fbx https://github.com/nxhoang/Three.js-Fxb-and-Textures/tree/master/models/fbx
Muchas gracias.

@nxhoang, como comentamos aquí , solo admitimos versiones de FBX superiores a 6100 (binario) o 7000 (ASCII).

Si necesita usar archivos FBX más antiguos, deberá actualizarlos (es mejor cargarlos en 3ds max o Maya para hacer esto), o convertirlos a otro formato.

¿Fue útil esta página
0 / 5 - 0 calificaciones