Three.js: Le format binaire FBX n'est pas pris en charge ?

Créé le 14 oct. 2016  ·  100Commentaires  ·  Source: mrdoob/three.js

description du problème

qq 20161014151051

FBXLoader ne prend en charge que le format texte FBX ?

Version trois.js
  • [ ] Dév
  • [x] r81
  • [ ] ...

    Navigateur
  • [x] Tous

  • [ ] Chrome
  • [ ] Firefox
  • [ ] Internet Explorer

    Système d'exploitation
  • [x] Tous

  • [ ] Les fenêtres
  • [ ] Linux
  • [ ] Android
  • [ ] IOS
    Configuration matérielle requise (carte graphique, périphérique VR, ...)
Enhancement

Commentaire le plus utile

Je vais recommencer à travailler sur l'analyseur binaire FBX à partir d'avril.
LMK si quelqu'un est pressé.

Tous les 100 commentaires

Oui. À l'heure actuelle, FBXLoader ne prend en charge que le format ASCII dans la version 7.

Version Three.js : r77

qq 20161014175807

Pourquoi?

/ping @yamahigashi

Pourquoi?

parce qu'il n'y a pas d'implémentation open source de référence ? si vous en connaissez un, je serais curieux de le voir.

Ah, attendez, je pensais que c'était à propos de binaire. Pour ASCII FBX inférieur à v7, j'avais le code ici et un tas de modèles de test quelque part sur mon disque dur.

Quelqu'un ici qui a fait ou fait un analyseur binaire FBX?
Sinon, j'ai envie d'essayer de faire ça...

vous devez aimer les trucs d'ingénierie inverse pour faire cela) et, vous pouvez avoir de la chance s'il s'agit de balises simples, mais s'ils sérialisent chaque type de données de manière unique, vous êtes propriétaire : vous êtes confronté à la modification d'un numéro par modèle et à son enregistrement pour voir ce qui a changé, à la fois.

Merci pour le conseil.
J'ai réussi à créer un analyseur binaire FBX en consultant ce site maintenant.

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

Je vais essayer de faire ObjectParser qui fait un objet
à partir du résultat de l'analyseur binaire suivant.

oh wow, quelqu'un a déjà vécu l'enfer, et il y a des spécifications)

https://banexdevblog.wordpress.com/2014/06/23/a-quick-tutorial-about-the-fbx-ascii-format/
Je pense que ce lien est aussi une bonne chose pour faire ça.

@takahirox Ce serait formidable si le nouveau parseur avait une structure similaire comme THREE.PLYLoader . Cette implémentation utilise une logique uniforme pour créer l'objet THREE.BufferGeometry après avoir analysé les données d'une entrée ASCII ou binaire (voir l'utilisation de la méthode handleElement ).

OK je vais essayer. Et je me demande si je peux aussi l'utiliser pour MMDLoader .

BTW est-ce que quelqu'un ici sait si le format binaire FBX reste le même même en dessous de la version 7 ?

Je n'ai aucune idée.

Peut-être que @mrdoob le sait ?

@takahirox avez-vous partagé votre analyseur binaire fbx n'importe où?

Pas encore... je le ferai bientôt !

@takahirox Des mises à jour :) ? Merci!

Désolé j'ai été occupé ces derniers temps... mais bientôt bientôt !

@takahirox Génial \ o/

Je vais recommencer à travailler sur l'analyseur binaire FBX à partir d'avril.
LMK si quelqu'un est pressé.

@takahirox Avez-vous quelque chose de brut à partager ? Nous faisons une présentation à la fin de la semaine et pourrions vraiment utiliser le chargement binaire FBX pour la démo.

Salut @takahirox, je suis en fait pressé, y a-t-il une mise à jour à ce sujet ? Je peux aider dans la mesure du possible, mais tout cela est encore nouveau pour moi.

Je recommence juste à travailler là-dessus.
Au moins, j'ai encore besoin de quelques semaines pour partager ça.

Combien de semaines pensez-vous ?

Hum, peut-être deux ou trois semaines ?

Juste par curiosité, est-ce que cela pourrait être fait en une semaine environ si je pouvais parrainer une partie du travail de développement ?

Eh bien, je ne peux pas promettre mais je vais essayer.
Avez-vous des données de modèles spécifiques que vous pouvez partager ?
Je veux travailler avec eux comme référence.

fichiertest.fbx.zip
C'est similaire à ce dont nous avons besoin si cela peut aider

En attendant...

Pour https://with.in/watch/under-neon-lights/, nous avons utilisé FBX en texte brut, mais nous avons changé l'extension en .fbx.txt afin que le serveur la compresse. J'ai aussi beaucoup optimisé le FBXLoader2 . Cela a fini par être un flux de travail assez décent.

Je me demande s'il y a quelque chose que FBXLoader prend en charge que FBXLoader2 ne prend pas en charge ou si nous pouvons déjà le remplacer...

@kyle-larson ?

Remarque : L' exemple FBX utilise déjà FBXLoader2 .

@mrdoob La seule différence entre le FBXLoader et le FBXLoader2 est l'utilisation de tampons d'index. FBXLoader2 n'utilise pas de tampons d'index. En dehors de cela, FBXLoader2 devrait inclure toutes les fonctionnalités du chargeur précédent.

Ah ! Il est temps de le remplacer alors

Y a-t-il une mise à jour sur ces gars? Heureux d'aider là où je peux.

Avez-vous une version de fichier texte de testfile.fbx.zip ?
Je veux comparer.

Progression de l'analyseur binaire...

image

@adam-clarey

Pouvez-vous partager la capture d'écran du modèle ?
Même le fichier texte n'a pas pu être chargé sur le Three.js.

Capture d'écran d'un autre modèle...

image

Modèle : https://free3d.com/3d-model/robot-2162.html

Vous cherchez bien ! ??

Merci à tous!

Je vais essayer de télécharger une capture d'écran bientôt. Essentiellement, mon cas d'utilisation est de pouvoir regrouper des images matérielles et un modèle dans un seul fichier

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

Voici un bloc simple avec un matériau d'image cuit dans le fbx avec une image d'accompagnement de ce à quoi il ressemble dans le mélangeur

Vous voulez dire que les données de l'image de texture doivent être dans le fichier fbx ?

Oui. J'ai peut-être mal exporté ce modèle

Je ne trouve pas les données d'image dans les données binaires fbx...
Faites-moi savoir si quelqu'un connaît la spécification des données d'image de texture cuite.

peut-être essayer celui-ci
block2.fbx.zip

Je ne trouve toujours pas...
Ces fichiers peuvent-ils être chargés sur d'autres visionneuses ?

S'il vous plaît laissez-moi savoir si quelqu'un connaît les spécifications des données d'image de texture cuites.

Je viens d'essayer d'ouvrir block2.fbx.zip avec blender et avec 3ds max. Les deux affichent uniquement le nom du fichier, mais pas d'image. Il semble qu'il n'y ait que la référence à .../Users/adamclarey/Documents/burger-screen.jpg dans le fichier.

Oui, mon analyseur extrait le nom du fichier mais aucune donnée d'image.

D'accord. Je fais manifestement quelque chose de mal. Blender n'est pas l'application la plus intuitive à utiliser. je vais essayer autre chose

Je n'ai jamais entendu dire que les données d'image pouvaient être cuites dans un format d'exportation/importation 3D (mais uniquement des chemins relatifs vers les ressources).

Est-ce seulement possible?

Je viens de remarquer : c'est possible.

Je vais créer un tel fichier de test et le poster ici.

Super trucs.

Ce FBX a été créé dans 3ds max et exporté avec l'option « embed media » :
TestcubeWithImage.zip

Capture d'écran de 3ds max :

testcubescreenshot

Ouvert au mixeur (sur une autre machine) :

screenshot_blender

Dans Blender, je n'ai pas découvert d'option pour exporter un FBX avec des images cuites jusqu'à présent. Peut-être que la cuisson doit être faite avant d'exporter ? - Je n'ai aucune expérience avec le mixeur.

@takahirox Voici le même fichier, également créé dans 3ds max, mais exporté sans l'option "embed media":

Testcube.zip

Cela peut être intéressant à des fins de comparaison.

Si vous avez besoin d'autres fichiers à tester, n'hésitez pas à les poster ici.

J'ai trouvé des données ressemblant à des données d'image sous la propriété Video.ID.properties.Content de TestcubeWithImage.fbx.
Cela n'existe pas dans les autres fichiers binaires publiés dans ce fil.

je vais regarder de plus près...

image

Progrès... 😄

image

Donc, la texture intégrée semble ok maintenant.
Quelqu'un peut-il partager le fbx binaire, y compris l'animation si vous en avez ?

Voici 3 fichiers de test avec différents types d'animations d'images clés :

AnimationTranslate.zip
AnimationMorph.zip
AnimationBones.zip

Mais malheureusement je n'ai pas réussi à produire des fichiers qui se comportent de la même manière dans différents programmes.

Ils sont tous créés avec 3ds max.

  • Tout va bien lors de la réimportation vers 3ds max.
  • L'exemple AnimationTranslate est correct dans Blender et Clara.io.
  • L'exemple AnimationMorph est correct dans Blender, mais l'animation ne fonctionne pas dans Clara.io.
  • L'exemple AnimationBones est correct dans Clara.io, mais l'animation n'est pas tout à fait correcte dans Blender.

@takahirox Notre équipe est à la recherche d'un parseur binaire FBX en trois.js depuis un certain temps maintenant, et cela a l'air génial ! Avez-vous déjà rendu la source disponible quelque part ? Pour nos besoins, nous devons pouvoir extraire les maillages, les normales, les UV et la scène visuelle du FBX, et il semble que cela fonctionne bien.

Si la source est disponible, ce serait formidable si vous pouviez m'indiquer où elle se trouve.

Merci pour le bon travail!

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

Notez que c'est très temporel.
Je dois nettoyer et optimiser le code.
Et la fonctionnalité pourrait être cassée en ce moment.

@takahirox Veuillez noter : après quelques tests dans différents programmes, j'ai mis à jour mon commentaire précédent.

@jostschmithals

Merci.
Translate et Bone semblent fonctionner maintenant.
FBXLoader ne prend pas encore en charge l'animation Morph, même avec un fichier ascii.
Ce serait notre prochain travail...

J'ai essayé de charger le fichier testcube dans mon projet three.js mais rien ne se charge.
J'obtiens un 404 sur le fichier image, après avoir inspecté l'objet FBXTree, je peux voir qu'il contient toujours une référence au chemin de fichier absolu.

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

Je viens de le tester (sur une machine où le jpg d'origine n'est pas disponible), et cela fonctionne très bien.

Remarque : vous devez utiliser
https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js ,
mais le chargeur s'appelle simplement THREE.FBXLoader (sans le numéro de version 2).

C'est ce que j'utilise. je vais enquêter plus loin

Essayez TestcubeWithImage.fbx
Testcube.fbx n'inclut pas de données d'image, vous devriez donc obtenir 404

@ Dans mon test qui fonctionne bien, j'obtiens exactement la même sortie de console que @adam-clarey - à l'exception du message GET ... 404 .

BTW : j'ai testé sur Windows 10.

Le progrès...
L'animation semble bien fonctionner maintenant 😄

image

Pouvez-vous coller le code que vous utilisez pour charger le modèle s'il vous plaît ? Pour une raison quelconque, il ne se charge tout simplement pas pour moi.

J'ai essayé de remplacer le fichier Testcube dans l'exemple webgl_loader_fbx.html (en échangeant également le fichier FBXLoader2.js) et il ne rend toujours pas le modèle.

@adam-clarey C'est exactement ce que j'ai fait (en désactivant les animations, bien sûr), et cela a fonctionné sans aucun autre changement.

comme c'est bizarre...

screen shot 2017-05-08 at 09 50 40

Et il est sûr que vous utilisez TestcubeWithImage.fbx (comme l' a souligné
D'autres messages d'erreur ?
Tu utilises quel OS ?
Le même dans tous les navigateurs ?

AAHHH, quel numpty je suis ! Je viens de faire défiler jusqu'à ce que je trouve le premier fichier testcube.

Mon erreur

Salut! J'obtiens également cette erreur lorsque j'essaie de charger un modèle .fbx externe qui est exporté à partir d'Autodesk. Quelqu'un peut-il me donner une solution pour cela

Merci!

https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
Notez que c'est très temporel.
Je dois nettoyer et optimiser le code.
Et la fonctionnalité pourrait être cassée en ce moment.

@hmtri1011

@RicoLiu C'est ce que j'ai obtenu lorsque j'ai utilisé THREE.FBXLoader. J'ai implémenté un exemple loader_fbx en remplaçant l'URL du modèle.

Et quand j'ai utilisé THREE.FBXLoader2 j'ai eu l'erreur THREE.FBXLoader2 is not a constructor

image

Vous pouvez utiliser l'exemple webgl_loader_fbx.example :

  1. charge https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
    au lieu du FBXLoader2.js de la branche threejs actuelle,
  2. utilisez THREE.FBXLoader ( sans le numéro de version 2 ! ),
  3. (désactivez les animations, s'il n'y a pas d'animations dans votre modèle),

et ça devrait marcher.

@jostschmithals Je suis votre démarche puis Zlib is not defined

Il semble que votre fichier modèle soit compressé ?

image
Erreur complète ce que je reçois

Ajoutez cette ligne dans votre exemple.

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

image
Terminé, et une autre erreur est apparue... :(

Comme je l'ai écrit ci-dessus, vous devez désactiver le code d'animation (dans la section de chargement et dans la boucle de rendu), si vous utilisez l'exemple de code avec un fichier modèle qui ne contient aucune animation.

Je rencontre un problème différent, je suis sûr qu'il est lié aux matériaux. Mon problème est que, dans certaines conditions, certains modèles fbx sont rendus et d'autres non.

Reproduire:
dans le fichier d'exemple webgl_loader_fbx.html, juste à l'intérieur de init() placez le code suivant pour créer un environnement

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

Ce qui ajoute simplement un skydome et un sol avec 2 images.

Ensuite, une fois la scène initialisée, exécutez : loadSkyDomeAndGroundBowl(scene);

Vous verrez que les 2 modèles fbx se chargent et s'affichent correctement dans ce nouvel environnement.

Maintenant, si vous remplacez la référence xsi_man_skinning.fbx par le TestcudeWithImages.fbx (commentez également le code d'animation), vous verrez que le code ne s'affiche pas du tout.

J'ai également remarqué cela avec d'autres fichiers fbx. Les fichiers fbx binaires ne semblent pas compatibles avec les environnements.

Ou je pourrais juste faire quelque chose de mal...
(et oui, il utilise le dernier fichier FBXLoader2)

Voici mon exemple de code :
`



three.js - Test 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 pouvez-vous me donner une solution correcte pour cela. Je désactive également le code animé

@adam-clarey Je l'ai testé, et la raison pour laquelle vous ne pouvez pas voir le cube est qu'il se trouve sous le plan du sol (si vous l'orbitez avec la caméra, vous devriez le voir). En plus de cela, tout fonctionne bien pour moi avec votre code.

@takahirox : Le maillage à l'intérieur du groupe créé par FBXLoader est translaté et tourné, de sorte que le point de pivot ne soit pas placé au centre du cube comme dans le modèle d'origine, mais au centre de sa face supérieure. Cela semble être un bug mineur?

(l'image s'affiche correctement en haut pourtant...)

@hmtri1011 Vous avez désactivé votre fonction animate(). Par conséquent, votre scène n'est pas du tout rendue

(Il devrait suffire dans ce cas de désactiver uniquement les lignes que vous avez déjà commentées.)

@jostschmithals tks :D ça marche maintenant

Bon endroit @jostschmithals , merci.

La version binaire du fichier est-elle importante ? J'ai des fichiers fbx avec la version 7400 qui rendent bien, mais un avec la version 7500 et il y a des erreurs.

« FBXLoader : type de propriété inconnu »
où la variable 'type' est une chaîne vide

@adam-clarey Je n'ai aucune connaissance détaillée de fbx. Je n'ai rejoint ce fil que parce que j'ai trouvé la question intéressante de savoir si/comment les données d'image pouvaient être intégrées dans le fichier modèle. Je voudrais donc transmettre cette question à @takahirox.

Je sais que la spécification de >=7500 est un peu différente de < 7500, et
j'y travaille pour prendre en charge >= 7500.
Pouvez-vous partager les données du modèle binaire de la version 7500 pour le test ?

Donc, après plus de tests, 7200 et 7500 semblent aller bien.

Cependant, 6100 et 7300 ne sont pas rendus.
maison_fs.fbx.zip
DutchHouse.FBX.zip

Souhaitez-vous partager les fichiers de la version ascii ?
Nous pouvons clarifier si le problème est spécifique au binaire ou non.

Et j'espère que nous fermerons ce problème car FBXLoader prend en charge le binaire maintenant (peut-être pas encore parfait).
Faisons un autre problème pour l'amélioration de FBXLoader .

@takahirox Ça a l'

@adam-clarey
Je pense que j'ai ce bug.

« FBXLoader : type de propriété inconnu »
où la variable 'type' est une chaîne vide

dans FBXLoader.js
changer pour

            while ( ! this.endOfContent( reader ) ) {

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

            }

11956

Bonjour à tous,
J'ai remarqué que FBXLoader prend uniquement en charge le fichier FBX pour qu'il soit >= 7.0.
Maintenant, je veux charger le fichier fbx en dessous de 7.0, s'il vous plaît dites comment faire cela?
Voici mes fichiers fbx https://github.com/nxhoang/Three.js-Fxb-and-Textures/tree/master/models/fbx
Merci beaucoup.

@nxhoang comme nous en avons discuté ici , nous ne prenons en charge que les versions FBX supérieures à 6100 (binaire) ou 7000 (ASCII).

Si vous devez utiliser des fichiers FBX plus anciens, vous devrez les mettre à jour (il est préférable de les charger dans 3ds max ou Maya pour ce faire) ou les convertir dans un autre format.

Cette page vous a été utile?
0 / 5 - 0 notes