Three.js: O formato binário FBX não é compatível?

Criado em 14 out. 2016  ·  100Comentários  ·  Fonte: mrdoob/three.js

Descrição do problema

qq 20161014151051

FBXLoader suporta apenas o formato de texto FBX?

Versão Three.js
  • [] Dev
  • [x] r81
  • [] ...

    Navegador
  • [x] Todos eles

  • [ ] Cromada
  • [ ] Raposa de fogo
  • [] Internet Explorer

    SO
  • [x] Todos eles

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

Comentários muito úteis

Vou começar a trabalhar no analisador binário FBX novamente a partir de abril.
LMK se alguém estiver com pressa.

Todos 100 comentários

sim. No momento FBXLoader só oferece suporte ao formato ASCII na versão 7.

Versão Three.js: r77

qq 20161014175807

Porque?

/ ping @yamahigashi

Porque?

porque não há implementação de código aberto de referência? se você conhece um, eu ficaria curioso para vê-lo.

Ah, espere, eu pensei que fosse sobre binário. Para ASCII FBX abaixo da v7, eu tinha o código aqui e um monte de modelos de teste em algum lugar no meu disco rígido.

Alguém aqui que fez ou está fazendo analisador binário FBX?
Se não, estou com vontade de tentar fazer isso ...

você tem que adorar as coisas de engenharia reversa para fazer isso) e, você pode ter sorte se forem tags simples, mas se eles serializarem cada tipo de dados de maneira única, você está preparado: você está enfrentando ajustar um número por modelo e salvá-lo para ver o que mudou, de cada vez.

Obrigado pelo conselho.
Consegui fazer um analisador binário FBX vendo este site agora.

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

Vou tentar fazer ObjectParser que faz um objeto
a partir do resultado do analisador binário a seguir.

oh uau, alguém já passou pelo inferno, e há especificações)

@takahirox Seria ótimo se o novo analisador tivesse uma estrutura semelhante a THREE.PLYLoader . Esta implementação usa uma lógica uniforme para criar o objeto THREE.BufferGeometry após analisar os dados de uma entrada ASCII ou binária (consulte o uso do método handleElement ).

OK vou tentar. E estou pensando se também posso usar isso para MMDLoader .

BTW, alguém aqui sabe se o formato binário do FBX permanece o mesmo mesmo abaixo da versão 7?

Eu não faço ideia.

Talvez @mrdoob saiba?

@takahirox você compartilhou seu analisador binário fbx em algum lugar?

Ainda não ... farei em breve!

@takahirox Alguma atualização :)? Obrigado!

Desculpe, tenho estado ocupado ultimamente ... mas em breve!

@takahirox Awesome \ o /

Vou começar a trabalhar no analisador binário FBX novamente a partir de abril.
LMK se alguém estiver com pressa.

@takahirox Você tem algo difícil para compartilhar? Faremos uma apresentação no final da semana e poderíamos realmente usar o carregamento binário do FBX para a demonstração.

Olá @takahirox , estou com pressa. Há alguma atualização sobre isso? Posso ajudar onde for possível, mas tudo isso ainda é novo para mim.

Estou apenas começando a trabalhar nisso de novo.
Pelo menos, ainda preciso de algumas semanas para compartilhar isso.

Quantas semanas você acha?

Hm, talvez duas ou três semanas?

Só por curiosidade, isso poderia ser feito em uma semana ou mais se eu pudesse patrocinar parte do trabalho de desenvolvimento?

Bem, não posso prometer, mas vou tentar.
Você tem dados de modelos específicos para compartilhar?
Quero trabalhar com eles como referência.

testfile.fbx.zip
Isso é semelhante ao que precisamos, se ajudar

Enquanto isso...

Para https://with.in/watch/under-neon-lights/ usamos FBX de texto simples, mas mudamos a extensão para .fbx.txt para que o servidor gzip. Eu também otimizei bastante FBXLoader2 . Acabou sendo um fluxo de trabalho bastante decente.

Eu me pergunto se há algo que FBXLoader suporta que FBXLoader2 não suporta ou já podemos substituí-lo ...

@ kyle-larson?

Observação lateral: o exemplo FBX também usa FBXLoader2 .

@mrdoob A única diferença entre FBXLoader e FBXLoader2 é o uso de buffers de índice. FBXLoader2 não usa buffers de índice. Fora isso, FBXLoader2 deve incluir todos os recursos do carregador anterior.

Ah! É hora de substituí-lo então 👌

Existe alguma atualização sobre esses caras? Fico feliz em ajudar onde posso.

Você tem uma versão de arquivo de texto de testfile.fbx.zip?
Eu quero comparar.

Progresso do analisador binário ...

image

@ adam-clarey

Você pode compartilhar a captura de tela do modelo?
Mesmo o arquivo de texto não pôde ser carregado no Three.js.

Captura de tela de outro modelo ....

image

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

Parece bom! 😀

Obrigado a todos!

Vou tentar fazer o upload de uma captura de tela em breve. Essencialmente, meu caso de uso é ser capaz de agrupar imagens de materiais e modelos em um único arquivo

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

Aqui está um bloco simples com um material de imagem embutido no fbx com uma imagem que o acompanha de como ele se parece no liquidificador

Quer dizer, os dados da imagem de textura devem estar no arquivo fbx?

sim. Posso ter exportado aquele modelo incorretamente

Não consigo encontrar os dados da imagem nos dados binários fbx ...
Deixe-me saber se alguém conhece a especificação de dados de imagem de textura cozida.

talvez tente este
block2.fbx.zip

Ainda não consigo encontrar ...
Esses arquivos podem ser carregados em outros visualizadores?

Por favor, deixe-me saber se alguém conhece a especificação de dados de imagem de textura cozida.

Acabei de tentar abrir block2.fbx.zip com o blender e com o 3ds max. Ambos mostram apenas o nome do arquivo, mas nenhuma imagem. Parece que há apenas a referência a .../Users/adamclarey/Documents/burger-screen.jpg no arquivo.

Sim, meu analisador extrai o nome do arquivo, mas nenhum dado de imagem.

OK. Obviamente estou fazendo algo errado. O Blender não é o aplicativo mais intuitivo de usar. Vou tentar outra coisa

Nunca ouvi falar que os dados da imagem pudessem ser incluídos em um formato de exportação / importação 3D (mas apenas caminhos relativos aos recursos).

Isso é mesmo possível?

Acabei de notar: é possível.

Vou criar esse arquivo de teste e postá-lo aqui.

Coisas boas.

Este FBX foi criado no 3ds max e exportado com a opção "embed media":
TestcubeWithImage.zip

Captura de tela do 3ds max:

testcubescreenshot

Aberto no liquidificador (em uma máquina diferente):

screenshot_blender

No blender não descobri uma opção para exportar um FBX com imagens assadas até agora. Talvez o cozimento tenha que ser feito antes de exportar? - Não tenho experiência com liquidificador.

@takahirox Aqui está o mesmo arquivo, também criado no 3ds max, mas exportado sem a opção "incorporar mídia":

Testcube.zip

Pode ser interessante para fins de comparação.

Se você precisar de outros arquivos para teste, fique à vontade para postá-los aqui.

Encontrei dados parecidos com dados de imagem na propriedade Video.ID.properties.Content de TestcubeWithImage.fbx.
Isso não existe em outros arquivos binários postados neste tópico.

Vou dar uma olhada mais de perto ...

image

Progresso ... 😄

image

Então, a textura embutida parece ok agora.
Alguém pode compartilhar o fbx binário, incluindo animação, se você tiver?

Aqui estão três arquivos de teste com diferentes tipos de animações de quadro-chave:

AnimationTranslate.zip
AnimationMorph.zip
AnimationBones.zip

Mas infelizmente não consegui produzir arquivos que se comportassem da mesma forma em diferentes programas.

Todos eles são criados com o 3ds max.

  • Tudo está bem ao reimportar para o 3ds max.
  • O exemplo AnimationTranslate está bem no Blender e Clara.io.
  • O exemplo AnimationMorph está bem no Blender, mas a animação não funciona no Clara.io.
  • O exemplo do AnimationBones está bom em Clara.io, mas a animação não está bem no Blender.

@takahirox Nossa equipe está procurando por um analisador FBX binário three.js há um tempo, e isso parece ótimo! Você já disponibilizou a fonte em algum lugar? Para nossos propósitos, precisamos ser capazes de extrair as malhas, os normais, os UVs e a cena visual do FBX, e parece que está funcionando bem.

Se a fonte estiver disponível, seria ótimo se você pudesse me indicar onde ela está.

Obrigado pelo ótimo trabalho!

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

Observe que isso é muito temporal.
Eu preciso limpar e otimizar o código.
E a funcionalidade pode ser interrompida agora.

@takahirox Observação: após alguns testes em diferentes programas, atualizei meu comentário anterior.

@jostschmithals

Obrigado.
O Tradutor e o Bone parecem funcionar agora.
FBXLoader ainda não suporta animação Morph, mesmo com arquivo ascii.
Seria nosso próximo trabalho ....

Tentei carregar o arquivo testcube em meu projeto three.js, mas nada carrega.
Recebo um 404 no arquivo de imagem, depois de inspecionar o objeto FBXTree, posso ver que ele ainda contém uma referência ao caminho de arquivo absoluto.

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

Acabei de testá-lo (em uma máquina onde o jpg original não está disponível) e funciona bem.

Nota: Você tem que usar
https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js ,
mas o carregador é simplesmente chamado de THREE.FBXLoader (sem o número de versão 2).

É isso que estou usando. Vou investigar mais a fundo

Experimente TestcubeWithImage.fbx
Testcube.fbx não inclui dados de imagem, então você deve obter 404

@ No meu teste, que está funcionando bem, recebo exatamente a mesma saída do console como @ adam-clarey - exceto a mensagem GET ... 404 .

BTW: eu testei no Windows 10.

Progresso...
A animação parece funcionar bem agora 😄

image

Você pode colar o código que está usando para carregar o modelo, por favor? Por algum motivo, ele simplesmente não carrega para mim.

Tentei substituir o arquivo Testcube no exemplo webgl_loader_fbx.html (também trocando o arquivo FBXLoader2.js) e ainda não renderiza o modelo.

@adam-clarey Foi exatamente o que fiz (desativando as animações, claro), e funcionou sem nenhuma outra alteração.

que bizarro ...

screen shot 2017-05-08 at 09 50 40

E é certo que você está usando TestcubeWithImage.fbx (como @takahirox apontou)?
Mais alguma mensagem de erro?
Qual sistema operacional você está usando?
O mesmo em todos os navegadores?

AAHHH, que idiota eu sou! Eu apenas rolei para cima até encontrar o primeiro arquivo testcube.

Meu erro

Oi! Também estou recebendo este erro ao tentar carregar um modelo .fbx externo que é exportado da Autodesk. Alguém pode me dar uma solução para isso

Obrigado!

https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
Observe que isso é muito temporal.
Eu preciso limpar e otimizar o código.
E a funcionalidade pode ser interrompida agora.

@ hmtri1011

@RicoLiu Isso é o que eu ganhei quando usei o THREE.FBXLoader. Implementei um exemplo loader_fbx substituindo a URL do modelo.

E quando usei THREE.FBXLoader2, obtive o erro THREE.FBXLoader2 is not a constructor

image

Você pode usar o webgl_loader_fbx.example:

  1. carregar https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
    em vez do FBXLoader2.js do branch threejs atual,
  2. use THREE.FBXLoader ( sem a versão número 2! ),
  3. (desative as animações, se não houver animações em seu modelo),

e deve funcionar.

@jostschmithals Eu sigo seus passos e recebo um novo erro Zlib is not defined

Parece que seu arquivo de modelo está compactado?

image
Erro total o que eu obtenho

Adicione esta linha em seu exemplo.

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

image
Feito, e outro erro apareceu .... :(

Como escrevi acima, você deve desativar o código de animação (na seção de carregamento e no loop de renderização), se usar o código de exemplo com um arquivo de modelo que não contém nenhuma animação.

Estou tendo um problema diferente, tenho certeza que está relacionado aos materiais. Meu problema é que, sob certas condições, alguns modelos fbx são renderizados e outros não.

Reproduzir:
no arquivo de exemplo webgl_loader_fbx.html, apenas dentro de init () coloque o seguinte código para criar um ambiente

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

O que basicamente adiciona apenas um skydome e um terreno com 2 imagens.

Depois que a cena for inicializada, execute: loadSkyDomeAndGroundBowl (cena);

Você verá que os modelos 2 fbx são carregados e renderizados corretamente neste novo ambiente.

Agora, se você substituir a referência xsi_man_skinning.fbx pelo TestcudeWithImages.fbx (também comentar o código de animação), verá que o código não é renderizado.

Também notei isso com outros arquivos fbx. Os arquivos binários fbx não parecem ser compatíveis com os ambientes.

Ou eu poderia estar fazendo algo errado ...
(e sim, está usando o arquivo FBXLoader2 mais recente)

Este é meu código de exemplo:
`



three.js - teste 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 você pode me dar uma solução correta para isso. Eu também desativo o código animado

@adam-clarey eu testei, e a razão pela qual você não pode ver o cubo é que ele fica sob o plano do solo (se você orbitar com a câmera, deverá vê-lo). Além disso, tudo está funcionando bem para mim com o seu código.

@takahirox : A malha dentro do grupo criado por FBXLoader é transladada e girada, de forma que o ponto de pivô não seja colocado no centro do cubo como no modelo original, mas no centro de sua parte superior. Este parece ser um bug menor?

(a imagem é exibida corretamente na parte superior ...)

@ hmtri1011 Você desativou a função animate (). Portanto, sua cena não é renderizada de forma alguma 😉

(Deve ser suficiente, neste caso, desativar apenas as linhas que você já comentou.)

@jostschmithals tks: D agora funciona

Bom local, @jostschmithals , obrigado.

Importa a versão binária do arquivo? Eu tenho arquivos fbx com a versão 7400 que renderizam bem, mas um com a versão 7500 e apresenta erros.

"FBXLoader: Tipo de propriedade desconhecido"
onde a variável 'tipo' é uma string vazia

@adam-clarey Não tenho conhecimento detalhado sobre fbx. Eu só entrei neste tópico porque achei a questão interessante se / como os dados da imagem poderiam ser incluídos no arquivo de modelo. Portanto, gostaria de encaminhar esta questão para @takahirox.

Eu sei que a especificação de> = 7500 é um pouco diferente de <7500 e
estou trabalhando nisso para oferecer suporte> = 7500.
Você pode compartilhar os dados do modelo binário da versão 7500 para o teste?

Portanto, após mais testes, 7200 e 7500 parecem estar bem.

No entanto, 6100 e 7300 não são renderizados.
house_fs.fbx.zip
DutchHouse.FBX.zip

Você compartilharia os arquivos da versão ascii?
Podemos esclarecer se o problema é específico de binários ou não.

E espero que possamos resolver este problema porque FBXLoader suporta binário agora (talvez ainda não seja perfeito, embora).
Vamos fazer outra questão para melhoria de FBXLoader .

@takahirox Parece bom!

@ adam-clarey
Acho que tenho esse bug.

"FBXLoader: Tipo de propriedade desconhecido"
onde a variável 'tipo' é uma string vazia

em FBXLoader.js
mudar para

            while ( ! this.endOfContent( reader ) ) {

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

            }

11956

Olá pessoal,
Percebi que o FBXLoader apenas suporta o arquivo FBX como> = 7.0.
Agora eu quero carregar o arquivo fbx abaixo de 7.0, por favor, diga como fazer isso?
Aqui estão meus arquivos fbx https://github.com/nxhoang/Three.js-Fxb-and-Textures/tree/master/models/fbx
Muito obrigado.

@nxhoang como discutimos aqui , só oferecemos suporte a versões FBX acima de 6100 (binário) ou 7000 (ASCII).

Se precisar usar arquivos FBX mais antigos, você precisará atualizá-los (é melhor carregá-los no 3ds max ou Maya para fazer isso) ou convertê-los para outro formato.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

zsitro picture zsitro  ·  3Comentários

akshaysrin picture akshaysrin  ·  3Comentários

ghost picture ghost  ·  3Comentários

scrubs picture scrubs  ·  3Comentários

fuzihaofzh picture fuzihaofzh  ·  3Comentários