Three.js: Format Biner FBX tidak didukung?

Dibuat pada 14 Okt 2016  ·  100Komentar  ·  Sumber: mrdoob/three.js

Deskripsi masalah

qq 20161014151051

FBXLoader hanya mendukung format teks FBX?

Versi Three.js
  • [ ] Dev
  • [x] r81
  • [ ] ...

    Peramban
  • [x] Semuanya

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

    OS
  • [x] Semuanya

  • [ ] Jendela
  • [ ] Linux
  • [ ] Android
  • [ ] iOS
    Persyaratan Perangkat Keras (kartu grafis, Perangkat VR, ...)
Enhancement

Komentar yang paling membantu

Saya akan mulai mengerjakan parser biner FBX lagi mulai April.
LMK jika ada yang terburu-buru.

Semua 100 komentar

Ya. Saat ini FBXLoader hanya mendukung format ASCII di versi 7.

Versi Three.js : r77

qq 20161014175807

Mengapa?

/ping @yamahigashi

Mengapa?

karena tidak ada referensi implementasi sumber terbuka? jika Anda tahu satu, saya akan penasaran untuk melihatnya.

Ah, tunggu, saya pikir ini tentang biner. Untuk ASCII FBX di bawah v7, saya memiliki kode di sini dan banyak model uji di suatu tempat di hard drive saya.

Adakah di sini yang telah membuat atau sedang membuat parser FBX biner?
Jika tidak, saya ingin mencoba membuatnya...

Anda harus menyukai hal-hal rekayasa terbalik untuk melakukan ini) dan, Anda mungkin beruntung jika itu adalah tag sederhana, tetapi jika mereka membuat serial setiap tipe data secara unik, Anda pantas: Anda menghadapi mengutak-atik satu nomor per model dan menyimpannya untuk melihat apa yang telah berubah, pada suatu waktu.

Terima kasih atas sarannya.
Saya telah berhasil membuat parser biner FBX dengan melihat situs ini sekarang.

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

Saya akan mencoba membuat ObjectParser yang membuat objek
dari hasil parser biner selanjutnya.

oh wow, seseorang sudah melewati neraka, dan ada spesifikasinya)

@takahirox Akan sangat bagus jika parser baru memiliki struktur yang mirip seperti THREE.PLYLoader . Implementasi ini menggunakan logika yang seragam untuk membuat objek THREE.BufferGeometry setelah mem-parsing data dari input ASCII atau Binary (lihat penggunaan metode handleElement ).

oke saya coba. Dan saya berpikir jika saya juga dapat menggunakannya untuk MMDLoader .

BTW adakah di sini yang tahu jika format biner FBX tetap sama bahkan di bawah versi 7?

Saya tidak punya ide.

Mungkin @mrdoob tahu?

@takahirox apakah Anda membagikan parser fbx biner Anda di mana saja?

Belum... Akan segera saya lakukan!

@takahirox Ada pembaruan :) ? Terima kasih!

Maaf aku sibuk akhir-akhir ini... tapi segera!

@takahirox Luar

Saya akan mulai mengerjakan parser biner FBX lagi mulai April.
LMK jika ada yang terburu-buru.

@takahirox Apakah Anda memiliki sesuatu yang kasar untuk dibagikan? Kami sedang melakukan presentasi di akhir minggu dan benar-benar dapat menggunakan pemuatan biner FBX untuk demo.

Hai @takahirox Saya sebenarnya sedang terburu-buru, apakah ada pembaruan tentang ini? Saya dapat membantu jika memungkinkan, tetapi ini semua masih baru bagi saya.

Saya baru mulai mengerjakannya lagi.
Setidaknya, saya masih perlu beberapa minggu untuk membagikannya.

Berapa minggu menurutmu?

Hm, mungkin dua atau tiga minggu?

Hanya ingin tahu, bisakah ini dilakukan dalam seminggu atau lebih jika saya dapat mensponsori beberapa pekerjaan pengembang?

Yah, aku tidak bisa berjanji tapi aku akan mencoba.
Apakah Anda memiliki data model tertentu yang dapat Anda bagikan?
Ingin bekerja dengan mereka sebagai referensi.

testfile.fbx.zip
Ini mirip dengan apa yang kita butuhkan jika itu membantu

Sementara itu...

Untuk https://with.in/watch/under-neon-lights/ kami menggunakan FBX teks biasa tetapi kami mengubah ekstensi menjadi .fbx.txt sehingga server akan melakukan gzip. Saya juga cukup banyak mengoptimalkan FBXLoader2 . Itu akhirnya menjadi alur kerja yang cukup baik.

Saya ingin tahu apakah ada yang FBXLoader mendukung yang FBXLoader2 tidak atau kita sudah bisa menggantinya...

@kyle-larson?

Catatan: The FBX Contoh sudah menggunakan FBXLoader2 , juga.

@mrdoob Satu-satunya perbedaan antara FBXLoader dan FBXLoader2 adalah penggunaan buffer Indeks. FBXLoader2 tidak menggunakan buffer indeks. Selain itu, FBXLoader2 harus menyertakan semua fitur pemuat sebelumnya.

Ah! Saatnya untuk menggantinya

Apakah ada pembaruan tentang ini teman-teman? Senang membantu di mana saya bisa.

Apakah Anda memiliki versi file teks testfile.fbx.zip?
Saya ingin membandingkan.

Kemajuan pengurai biner...

image

@adam-clarey

Bisakah Anda membagikan tangkapan layar model?
Bahkan file teks tidak dapat dimuat di Three.js.

Tangkapan layar model lain....

image

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

Terlihat bagus! 😀

Terima kasih semua!

Saya akan mencoba dan mengunggah tangkapan layar segera. Pada dasarnya kasus penggunaan saya adalah dapat menggabungkan gambar dan model material ke dalam satu file

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

Berikut adalah blok sederhana dengan bahan gambar yang dipanggang ke dalam fbx dengan gambar yang menyertainya seperti apa yang terlihat di blender

Maksudmu, data gambar tekstur harus dalam file fbx?

Ya. Saya mungkin salah mengekspor model itu

Saya tidak dapat menemukan data gambar dalam data biner fbx...
Beri tahu saya jika ada yang tahu spesifikasi data gambar tekstur panggang.

mungkin coba yang ini
block2.fbx.zip

Masih tidak dapat menemukan...
Apakah file-file itu dapat dimuat di pemirsa lain?

Tolong beri tahu saya jika ada yang tahu spesifikasi data gambar tekstur panggang.

Saya baru saja mencoba membuka block2.fbx.zip dengan blender dan dengan 3ds max. Keduanya hanya menampilkan nama file, tetapi tidak ada gambar. Tampaknya hanya ada referensi ke .../Users/adamclarey/Documents/burger-screen.jpg dalam file.

Yup, parser saya mengekstrak nama file tetapi tidak ada data gambar.

Oke. Saya jelas melakukan sesuatu yang salah. Blender bukanlah aplikasi yang paling intuitif untuk digunakan. Saya akan mencoba sesuatu yang lain

Saya tidak pernah mendengar bahwa data gambar dapat dimasukkan ke dalam format ekspor/impor 3D (tetapi hanya jalur relatif ke sumber daya).

Apakah ini mungkin?

Saya baru menyadari: itu mungkin.

Saya akan membuat file tes seperti itu dan mempostingnya di sini.

Barang bagus.

FBX ini dibuat dalam 3ds max dan diekspor dengan opsi "embed media":
TestcubeWithImage.zip

Tangkapan layar dari 3ds max:

testcubescreenshot

Dibuka dalam blender (pada mesin yang berbeda):

screenshot_blender

Di blender saya tidak menemukan opsi untuk mengekspor FBX dengan gambar yang dipanggang hingga sekarang. Mungkin memanggang harus dilakukan sebelum mengekspor? - Saya tidak punya pengalaman dengan blender.

@takahirox Ini file yang sama, juga dibuat dalam 3ds max, tetapi diekspor tanpa opsi "embed media":

Testcube.zip

Mungkin menarik untuk tujuan perbandingan.

Jika Anda membutuhkan file lain untuk pengujian, jangan ragu untuk mempostingnya di sini.

Saya menemukan data yang tampak seperti data gambar di bawah properti Video.ID.properties.Content dari TestcubeWithImage.fbx.
Ini tidak ada di file biner lain yang diposting di utas ini.

Saya akan melihat lebih dekat ...

image

Kemajuan ...

image

Jadi, tekstur yang disematkan terlihat ok sekarang.
Adakah yang bisa berbagi fbx biner termasuk animasi jika Anda punya?

Berikut adalah 3 file uji dengan berbagai jenis animasi keyframe:

AnimationTranslate.zip
AnimationMorph.zip
AnimationBones.zip

Tapi sayangnya saya tidak berhasil menghasilkan file yang berperilaku dengan cara yang sama di program yang berbeda.

Mereka semua dibuat dengan 3ds max.

  • Semua baik-baik saja saat mengimpor ulang ke 3ds max.
  • Contoh AnimationTranslate tidak masalah di Blender dan Clara.io.
  • Contoh AnimationMorph baik-baik saja di Blender, tetapi animasinya tidak berfungsi di Clara.io.
  • Contoh AnimationBones oke di Clara.io, tapi animasinya kurang oke di Blender.

@takahirox Tim kami telah mencari parser FBX biner three.js untuk sementara waktu sekarang, dan ini tampak hebat! Sudahkah Anda membuat sumbernya tersedia di mana saja? Untuk tujuan kita, kita harus dapat mengekstrak jerat, normal, UV, dan pemandangan visual dari FBX, dan tampaknya itu berfungsi dengan baik.

Jika sumbernya tersedia, akan sangat bagus jika Anda bisa mengarahkan saya ke tempat itu.

Terima kasih atas kerja bagusnya!

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

Perhatikan bahwa ini sangat sementara.
Saya perlu membersihkan dan mengoptimalkan kode.
Dan fungsi bisa rusak sekarang.

@takahirox Harap dicatat: Setelah beberapa pengujian di berbagai program saya memperbarui komentar saya sebelumnya.

@jostschmithals

Terima kasih.
Translate dan Bone sepertinya berfungsi sekarang.
FBXLoader belum mendukung animasi Morph bahkan dengan file ascii.
Ini akan menjadi karya kami selanjutnya....

Saya sudah mencoba memuat file testcube di proyek three.js saya tetapi tidak ada yang dimuat.
Saya mendapatkan 404 pada file gambar, setelah memeriksa objek FBXTree saya dapat melihatnya masih memiliki referensi ke filepath absolut.

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

Saya baru saja mengujinya (pada mesin di mana jpg asli tidak tersedia), dan berfungsi dengan baik.

Catatan: Anda harus menggunakan
https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js ,
tetapi loader hanya disebut THREE.FBXLoader (tanpa nomor versi 2).

Itulah yang saya gunakan. Saya akan menyelidiki lebih lanjut

Coba TestcubeWithImage.fbx
Testcube.fbx tidak menyertakan data gambar sehingga Anda harus mendapatkan 404

@ Dalam pengujian saya yang berfungsi dengan baik, saya mendapatkan output konsol yang persis sama seperti @adam-clarey - kecuali pesan GET ... 404 .

BTW: Saya menguji pada Windows 10.

Kemajuan...
Animasi tampaknya berfungsi dengan baik sekarang

image

Bisakah Anda menempelkan kode yang Anda gunakan untuk memuat model? Untuk beberapa alasan itu tidak memuat untuk saya.

Saya sudah mencoba mengganti file Testcube ke contoh webgl_loader_fbx.html (juga menukar file FBXLoader2.js) dan masih tidak merender model.

@adam-clarey Itulah yang saya lakukan (menonaktifkan animasi, tentu saja), dan itu berhasil tanpa perubahan lain.

betapa anehnya...

screen shot 2017-05-08 at 09 50 40

Dan apakah Anda yakin menggunakan TestcubeWithImage.fbx (seperti yang ditunjukkan oleh @takahirox )?
Ada pesan kesalahan lebih lanjut?
OS mana yang Anda gunakan?
Sama di semua browser?

AAHHH, betapa bodohnya aku! Saya baru saja menggulir ke atas sampai saya menemukan file testcube pertama.

Kesalahanku

Hai! Saya juga mendapatkan kesalahan ini ketika mencoba memuat model .fbx eksternal yang diekspor dari Autodesk. Adakah yang bisa memberi saya solusi untuk ini

Terima kasih!

https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
Perhatikan bahwa ini sangat sementara.
Saya perlu membersihkan dan mengoptimalkan kode.
Dan fungsi bisa rusak sekarang.

@hmtri1011

@RicoLiu Inilah yang saya dapatkan saat menggunakan THREE.FBXLoader. Saya menerapkan contoh loader_fbx dengan mengganti URL model.

Dan ketika saya menggunakan THREE.FBXLoader2 saya mendapatkan kesalahan THREE.FBXLoader2 is not a constructor

image

Anda dapat menggunakan webgl_loader_fbx.example:

  1. muat https://github.com/takahirox/three.js/blob/FixLoaderBinaryParser/examples/js/loaders/FBXLoader2.js
    alih-alih FBXLoader2.js dari cabang threejs saat ini,
  2. gunakan THREE.FBXLoader ( tanpa nomor versi 2 ! ),
  3. (nonaktifkan animasi, jika tidak ada animasi dalam model Anda),

dan itu harus bekerja.

@jostschmithals Saya mengikuti langkah Anda kemudian mendapatkan kesalahan baru Zlib is not defined

Tampaknya file model Anda dikompresi?

image
Kesalahan Penuh apa yang saya dapatkan

Tambahkan baris ini dalam contoh Anda.

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

image
Selesai, dan kesalahan lain muncul .... :(

Seperti yang saya tulis di atas, Anda harus menonaktifkan kode animasi (di bagian pemuatan dan di loop render), jika Anda menggunakan kode contoh dengan file model yang tidak berisi animasi apa pun.

Saya mengalami masalah yang berbeda, saya yakin terkait dengan materi. Masalah saya adalah bahwa dalam kondisi tertentu beberapa model fbx dirender dan beberapa tidak.

Untuk mereproduksi:
di file contoh webgl_loader_fbx.html, tepat di dalam init() tempatkan kode berikut untuk membuat lingkungan

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

Yang pada dasarnya hanya menambahkan skydome dan ground dengan 2 gambar.

Kemudian setelah adegan diinisialisasi, jalankan: loadSkyDomeAndGroundBowl(scene);

Anda akan melihat bahwa 2 model fbx memuat dan merender dengan baik dalam lingkungan baru ini.

Sekarang, jika Anda mengganti referensi xsi_man_skinning.fbx dengan TestcudeWithImages.fbx (juga mengomentari kode animasi), Anda akan melihat bahwa kode tersebut tidak ditampilkan sama sekali.

Saya perhatikan ini dengan file fbx lainnya juga. File fbx biner tampaknya tidak kompatibel dengan lingkungan.

Atau saya bisa saja melakukan sesuatu yang salah ...
(dan ya itu menggunakan file FBXLoader2 terbaru)

Ini adalah contoh kode saya:
`



three.js - tes FBXLloader
<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 dapatkah Anda memberi saya solusi yang tepat untuk ini. Saya juga menonaktifkan kode animasi

@adam-clarey Saya telah mengujinya, dan alasan mengapa Anda tidak dapat melihat kubus adalah karena ia berada di bawah bidang dasar (jika Anda mengorbitnya dengan kamera, Anda akan melihatnya). Selain itu, semua ini berfungsi dengan baik untuk saya dengan kode Anda.

@takahirox :

(gambar ditampilkan dengan benar di atas meskipun ...)

@hmtri1011 Anda telah menonaktifkan fungsi animate() Anda. Oleh karena itu adegan Anda tidak ditampilkan sama sekali

(Seharusnya cukup dalam kasus ini untuk menonaktifkan hanya baris yang sudah Anda komentari.)

@jostschmithals tks :D berfungsi sekarang

Tempat yang bagus @jostschmithals , terima kasih.

Haruskah penting versi biner apa file itu? Saya punya file fbx dengan versi 7400 yang dirender dengan baik, tetapi satu dengan versi 7500 dan error.

"FBXLoader: Jenis properti tidak diketahui"
di mana variabel 'tipe' adalah string kosong

@adam-clarey Saya tidak memiliki pengetahuan rinci tentang fbx. Saya hanya bergabung dengan utas ini karena saya menemukan pertanyaan menarik apakah/bagaimana data gambar dapat dimasukkan ke dalam file model. Jadi saya ingin meneruskan pertanyaan ini ke @takahirox.

Saya tahu spesifikasi >=7500 sedikit berbeda dari <7500, dan
saya sedang mengerjakannya untuk mendukung >= 7500.
Bisakah Anda membagikan data model biner versi 7500 untuk pengujian?

Jadi setelah pengujian lebih lanjut, 7200 dan 7500 tampaknya baik-baik saja.

Namun, 6100 dan 7300 tidak merender.
house_fs.fbx.zip
DutchHouse.FBX.zip

Maukah Anda membagikan file versi ascii?
Kami dapat mengklarifikasi apakah masalahnya spesifik biner atau tidak.

Dan saya harap kami menutup masalah ini karena FBXLoader mendukung biner sekarang (mungkin belum sempurna).
Mari buat masalah lain untuk peningkatan FBXLoader .

@takahirox Kedengarannya bagus!

@adam-clarey
Saya pikir saya punya bug ini.

"FBXLoader: Jenis properti tidak diketahui"
di mana variabel 'tipe' adalah string kosong

di FBXLoader.js
mengubah

            while ( ! this.endOfContent( reader ) ) {

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

            }

11956

Halo semuanya,
Saya perhatikan bahwa FBXLoader hanya mendukung file FBX menjadi >= 7.0.
Sekarang saya ingin memuat file fbx di bawah 7.0, tolong beri tahu cara melakukannya?
Ini file fbx saya https://github.com/nxhoang/Three.js-Fxb-and-Textures/tree/master/models/fbx
Terima kasih banyak.

@nxhoang seperti yang kita bahas di sini , kami hanya mendukung versi FBX di atas 6100 (Binary) atau 7000 (ASCII).

Jika Anda perlu menggunakan file FBX lama, Anda harus memperbaruinya (paling baik memuatnya ke dalam 3ds max atau Maya untuk melakukan ini), atau mengonversinya ke format lain.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat