Three.js: GLTFExporter GLB kompatibel dengan penampil Facebook

/ping @zellski

Hai! Ya, pemeriksaan RGBA itu akan hilang dalam dua minggu. Jangan bekerja di sekitarnya. :)

Saya mencoba mengonversi WaltHead.obj ke glb. Saya memuatnya di https://threejs.org/editor/ dan mengekspornya ke GLB dari sana (yang seharusnya sudah memiliki tambalan terbaru).

Inilah WaltHead.glb dan inilah yang saya dapatkan di validator Facebook:

Your GLB File has the following errors: The 3D model could not be posted: The JSON portion of this model file is invalid.

🤔

Ini adalah JSON yang valid secara sintaksis, tetapi nol dalam cuplikan dari WaltHead.gltf ini tidak sesuai dengan skema jenis:

    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 48480,
      "max": [
        null,
        null
      ],
      "min": [
        null,
        null
      ],
      "type": "VEC2"
    }

Alat validator Khronos glTF juga mencantumkan sekitar 10.000 contoh kesalahan lain dalam file, semuanya dalam urutan:

        /accessors/2: Accessor element at index 28922 is NaN or Infinity.

Jadi sepertinya pengakses sedang dibuat selama ekspor glTF, untuk diisi dengan indeks, tetapi tidak pernah benar-benar menerimanya?

UV adalah NaN:

@mrdoob @donmccurdy diperbaiki! https://github.com/mrdoob/three.js/pull/13400
Meskipun kami masih tidak dapat menunjukkan contoh itu karena

[msg] => Mesh primitives without indices are (temporary) unsupported.

(ditambahkan ke daftar tugas)

@zellski apakah Anda memiliki perkiraan tentang fitur itu? ;)

@fernandojsg Yang ini sedikit lebih rumit. Ini akan diperbaiki, tetapi mungkin perlu waktu sedikit lebih lama. tl;dr Mungkin sebulan?

Penjelasan yang lebih panjang: masalahnya mirip dengan warna simpul di atas, karena implementasi klien kami yang tertinggal, dan validator saya di backend hanya melindungi mereka dari model yang belum dapat mereka tangani.

Jelas kita harus mendukung geometri yang tidak terindeks, semakin cepat semakin baik. Idealnya pada klien, tetapi juga pada saat itu saya harus memiliki kode backend saya hingga kekuatan penuh Death Star, di mana kami mengubah semua .gltf yang diunggah dengan malas/sesuai permintaan, tergantung pada kebutuhan klien individu. Pada saat itu kami dapat melakukan hal-hal keren seperti membuat geometri terindeks di server untuk kenyamanan klien kami.

Saya berasumsi kesalahan di atas muncul ketika three.js mencoba mengekspor primitif yang secara alami tidak diindeks dalam representasi runtime-nya?

Saya berasumsi kesalahan di atas muncul ketika three.js mencoba mengekspor primitif yang secara alami tidak diindeks dalam representasi runtime-nya?

@zellski itu saja! Beberapa primitif atau objek yang dimuat pada tiga tidak diindeks. Kasus penggunaan pertama yang saya pikir untuk pemuat glb facebook adalah memasukkan gambar dari aplikasi A-Painter kami (info lebih lanjut: https://blog.mozvr.com/tag/a-painter/) dan kami menggunakan geometri yang tidak diindeks di sana juga, jadi akan sangat bagus jika mendapat dukungan untuk itu;)
Saya hanya ingin tahu apakah itu ada di peta jalan, jadi mengetahui itu saja dan kita bisa memilikinya dalam waktu sekitar satu bulan, lebih dari masuk akal ;) terima kasih telah berbagi info itu!

Kita mungkin harus menambahkan atribut indeks bodoh untuk sementara (seperti pada 0, 1, 2, 3, 4, 5, 6, 7, 8, ...)

@mrdoob maksud Anda memiliki beberapa metode untuk mengonversi yang tidak diindeks menjadi diindeks seperti yang Anda inginkan, atau menambahkan peretasan langsung pada eksportir?

Ya, tambahkan peretasan temporal di eksportir...

Saya tidak tahu, saya hanya ingin hal-hal berfungsi dan tidak perlu memberi tahu orang-orang, "oh? model Anda tidak berfungsi di facebook? itu karena ... Anda tahu apa itu geometri terindeks? ya, Anda tidak boleh tetapi ..."

Ya saya mengerti! Ok saya akan melihat apakah saya bisa menambahkan beberapa hack yang tidak terlalu kotor :)

@zellski untuk konteks...

Saya telah menambahkan Export GLB di http://threejs.org/editor/ yang menggunakan GLTFExporter .

Video: cara mengekspor model sebagai glTF di Editor Three.js :D

https://twitter.com/superhoge/status/966689549803053056

Percayalah, saya memahami keengganan untuk menambahkan peretasan. Cukup sulit untuk mempertahankan pandangan sabar sekarang setelah kami meluncurkan...

Bisakah Anda membuat peretasan GLTFExporter di garpu yang digunakan di http://threejs.org/editor/ tetapi tidak di tempat lain? Saya berharap kami akan memperbaiki kekurangan ini pada saat r91 keluar, jadi sepertinya tidak ada gunanya bagi Anda untuk menulis kode yang bertanggung jawab dan hati-hati untuk itu.

Bisakah Anda membuat peretasan GLTFExporter di garpu yang digunakan di http://threejs.org/editor/ tetapi tidak di tempat lain?

Ya, jangan khawatir!

Saya berharap kami akan memperbaiki kekurangan ini pada saat r91 keluar

Oh, saya bertujuan untuk merilis ~ 1 Maret. Mengubah siklus rilis ke awal bulan untuk mendapatkan rilis bulan yang tepat.

Sepertinya kami masih memiliki lebih banyak fitur untuk ditambahkan sebelum mempromosikan ini. Saya tidak berpikir kami mengekspor peta kekasaran, metalik, normal atau alfa.

Tes terbaru, menggunakan 2 peta difus, awan satu menjadi png transparan:
https://www.facebook.com/fakemrdoob/posts/950266411809572

Tidak yakin dari mana alphaTest: 0.5 itu berasal...

Hanya menggunakan solusi untuk indeks :)
https://www.facebook.com/fernandojsg/posts/1015640595122044

Ini dia https://github.com/mrdoob/three.js/pull/13410

@mrdoob apakah Anda keberatan menambahkan fitur yang hilang yang Anda temukan dan yang tidak terkait dengan persyaratan facebook tentang masalah ini: https://github.com/mrdoob/three.js/issues/11951
Meskipun saya perlu memperbarui status di sana

Kedengarannya bagus. Saya akan menguji dengan mengekspor dan menyeret kembali ke editor.
Haruskah kita menutup yang ini?

@mrdoob Saya akan membiarkannya terbuka sampai RGB vs RGBA untuk masalah warna titik akan diselesaikan di sisi facebook, jadi jika orang datang ke sini mencari bantuan, mereka dapat membacanya daripada membuka masalah lain.

Btw saya baru saja menemukan tautan ini dengan beberapa info berguna: https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials

Rupanya tekstur perlu kekuatan 2 ...
https://twitter.com/drupalati/status/967486854630055936

Bukankah Three.js secara otomatis mengonversi gambar dari non-power-of-two menjadi power-of-two dengan cepat?

Ya maaf. Klien seluler belum mengubah ukuran, jadi kami harus menolaknya selama validasi untuk sementara waktu. Kami mungkin akan melakukan pengubahan ukuran di server, karena kami memiliki kendali penuh atas jalur pengiriman. Saya berharap pembatasan ini juga akan dicabut dalam 2-3 minggu.

@takahirox Ya, three.js akan mengubah ukuran dengan cepat. Tetapi klien asli Facebook tidak menggunakan three.js.

Daftar lengkap fitur glTF yang belum didukung Facebook, dalam urutan kasar ETA:

• Tidak ada warna vertex RGB; harus RGBA.
• Tidak ada tekstur NPOT untuk kombinasi penjepit/filter tertentu
• Hanya diindeks, geometri segitiga.
• Tidak ada animasi (diam-diam diabaikan)
• Tidak ada pengakses yang jarang (validasi gagal)
• Tidak ada target morf (jika ada mesh yang memiliki properti 'target', model gagal validasi)
• Tidak ada kamera (diam-diam diabaikan) (untuk saat ini)

Juga:

• Ukuran file maksimum 3 MB
• Tidak ada dimensi tekstur yang lebih besar dari 4096
• Tidak ada ekstensi selain KHR_material_unlit (untuk saat ini)

Saya pikir itu saja.

Saya membuat PR #13424 untuk tekstur force POT karena menurut saya itu tidak hanya berguna untuk FB.

Saat menggunakan GLTFExporter untuk mengekspor mesh multi material (array material), saya mendapatkan kesalahan ini:

GLTFExporter.js:623 Uncaught TypeError: Cannot read property 'toArray' of undefined
    at processMaterial (GLTFExporter.js:623)

@Ben-Mack Itu masalah yang diketahui dan saya sedang mengerjakannya sekarang. (Tapi itu akan memakan waktu sedikit).

@zellski ada rencana untuk dukungan draco di fb? Saya bisa mendapatkan mesh saya dari 40MB ke 5mb tetapi beberapa MB terakhir itu tidak mau turun.

@webprofusion-chrisc (pria itu panjang @ untuk keyboard ponsel) ya, Draco pasti ada di peta jalan. Ini membutuhkan sedikit pekerjaan rekayasa sehingga setidaknya satu bulan keluar, tetapi — dalam banyak hal kami telah membangun asumsi kami di sekitarnya — seperti yang Anda katakan, untuk banyak model, batas 3 MB tidak dapat dipertahankan. (Saya masih tidak yakin apa yang bisa kami lakukan untuk membantu tekstur.)

(Saya masih tidak yakin apa yang bisa kami lakukan untuk membantu tekstur.)

@donmccurdy mendapatkan beberapa kemajuan di depan itu: https://github.com/mrdoob/three.js/pull/12877

Kita dapat mengharapkan tekstur 25–30% lebih kecil dari GLTFExporter dengan #12877.

Jangka panjang, Binomial bekerja dengan Khronos untuk membuat ekstensi untuk tekstur terkompresi lintas platform di glTF: https://www.khronos.org/blog/call-for-participation-gltf-creating-a-compressed-texture-extension .

Oke... Setelah #12877 dan #13451 ekspor GLB yang dulunya 3,3MB sekarang menjadi 480KB 😊

Dingin! #13451 maksudnya, ukuran file gambar akan lebih besar jika kita mengubah jpg ke png?

Dingin! #13451 maksudnya, ukuran file gambar akan lebih besar jika kita mengubah jpg ke png?

Ya. #13451 adalah sedikit solusi karena fakta bahwa editor tidak mengizinkan mengubah format tekstur saat ini. Tapi kami tetap melakukan hal yang sama di perpustakaan...

https://github.com/mrdoob/three.js/blob/dev/src/loaders/TextureLoader.js#L34

Tapi ya, GLTFExpoter saat ini disimpan sebagai jpg ketika texture.format === THREE.RGBFormat .

https://github.com/mrdoob/three.js/blob/dev/examples/js/exporters/GLTFExporter.js#L493

Mana yang tidak ideal, karena kami mengompresi ulang jpg... Tapi saya rasa lebih baik daripada ekspor yang terlalu besar?

Saya harus menambahkan kode ke FBX2glTF yang benar-benar memeriksa nilai alfa dari bahkan gambar RGBA, karena orang (atau, lebih tepatnya, alat orang) membuatnya secara default, dan cukup sering sama sekali tidak perlu menyimpannya sebagai PNG. Bahkan setelah mencoba pengolah PNG berkemampuan GPU yang paling brutal, pengoptimalan non-linier di luar sana, tampaknya JPEG benar-benar menguasai... perbedaan ukurannya sangat luar biasa!

Saya sedikit khawatir tentang pendarahan antar-saluran untuk hal-hal seperti tekstur ORM (oklusi/kekasaran/logam) di mana setiap komponen membawa data yang sama sekali tidak bergantung pada data komponen lain... tetapi dalam praktiknya tampaknya berfungsi dengan baik.

Eksportir juga dapat membuat tingkat kualitas opsional saat menggunakan canvas.toDataURL( mimeType ) - tekstur saya dihasilkan saat runtime dari gambar komposit, itu juga akan membantu.

@zellski untuk saluran/penampil fb Saya kira Anda bisa melakukan seperti sketchfab dan menyajikan versi tekstur resolusi rendah, lalu streaming tekstur resolusi tinggi/penuh dan menggantinya dalam model saat dimuat. Bukan pekerjaan kecil tapi bisa dilakukan.

@webprofusion-chrisc Ya, kami mungkin akhirnya melakukan itu. Saat ini kami telah menggunakan .glb sebagai entitas yang ditransmisikan, yang sulit untuk digabungkan dengan streaming tipe LOD selektif (karena hanya ada satu file berurutan tanpa akses acak). Tapi saya berharap kita akan mengevaluasi kembali asumsi dasar cukup sering, tergantung pada bagaimana keadaannya. :)

GLTFExporter dapat mengekspor BufferGeometry dan mengimpor ke Facebook dengan baik. Tetapi Geometry atau BufferGeometry dikonversi menggunakan metode fromGeometry tidak berfungsi di Facebook. Saya selalu menerima ini di validator FB:

[msg] => Atribut Vertex COLOR_0 tipe RGB (sementara) tidak didukung. Mereka harus RGBA.

Langkah untuk mereproduksi:

• Menggunakan misc_exporter_gltf contoh terbaru di dev, Export Sphere atau Walthead bekerja dengan baik di FB, tetapi hasil export Scene1 tidak dapat diimpor ke FB.

Apakah ini perilaku yang diharapkan dan harus menunggu di sisi FB?

Saya berharap BufferGeometry menggunakan fromGeometry akan bekerja secara ekstrak seperti BufferGeometry biasa, mohon pandu saya beberapa perbaikan cepat untuk mengatasi masalah ini.

@Ben-Mack ini adalah sesuatu yang harus diperbaiki dalam beberapa minggu ke depan menurut @zellski -> https://github.com/mrdoob/three.js/issues/13397#issuecomment -367534958

Pada build 161 dan seterusnya (versi App Store saat ini adalah 160) dari aplikasi FB utama, ini tidak akan menjadi crasher lagi dan kami akan menghapus pemeriksaan validasi ini. Saya berharap ini terjadi dalam seminggu.

@zellski itu luar biasa! Terima kasih :)

Membuat saya bertanya-tanya meskipun ...

Alasan "sebenarnya" THREE.GLTFExporter tidak dapat mengekspor THREE.Geometry adalah karena ketika kita mengonversi THREE.Geometry ke THREE.BufferGeometry kita membuat color atribut yang, dalam sebagian besar kasus, penuh dengan nol.

Jadi, satu "solusi" (dan pengoptimalan) adalah tidak mengekspor atribut color jika material.vertexColors disetel ke THREE.NoColors ?

Ops saya tidak tahu itu :D itu pasti optimasi yang harus dilakukan :D

@fernandojsg terima kasih atas pembaruan yang Anda buat, sangat dihargai. Ada dua hal lagi yang perlu ditambahkan:

1. Dukungan mesh multi-bahan. Yang memiliki grup dalam geometri dan lariknya di Mesh.material - saat ini tidak dapat diekspor dengan benar;
2. Kompatibilitas yang lebih baik antara satu-satunya MeshStandardMaterial yang didukung dan hasil yang kami miliki di Facebook. Sejauh ini permukaan metalik dan difus terlihat sangat berbeda di three.js dan di Facebook. Mungkin kita akan memiliki materi khusus "Facebook" suatu hari nanti?

Terima kasih

@ov Saya pikir keduanya kemungkinan akan diperbaiki sekitar r91:

1. ekspor multi-bahan https://github.com/mrdoob/three.js/pull/13536
2. perbaikan logam/kekasaran https://github.com/mrdoob/three.js/pull/13501

Ada kemungkinan bahwa materi Facebook juga belum tepat, tetapi glTF cukup spesifik tentang bagaimana hal-hal akan muncul sehingga pada akhirnya kita harus bertemu.

Oh, kita harus menambahkan kemampuan untuk mengekspor KHR_materials_unlit juga...

EDIT: Dibuka https://github.com/mrdoob/three.js/pull/13566

Alasan "sebenarnya" THREE.GLTFExporter tidak dapat mengekspor THREE.Geometry adalah karena ketika kita mengonversi THREE.Geometry ke THREE.BufferGeometry kita membuat atribut warna yang, dalam kebanyakan kasus, penuh dengan nol.

Jadi, satu "solusi" (dan pengoptimalan) adalah tidak mengekspor atribut warna jika material.vertexColors disetel ke THREE.NoColors?

+1 berharap ini akan segera diperbaiki. Banyak perpustakaan untuk Three.js yang masih berkinerja berdasarkan THREE.Geometry .

( FB masih error ...must be RGBA dengan THREE.Geometry )

@Ben-Mack, perpustakaan mana yang Anda gunakan yang masih menggunakan Geometri? Mungkin kami bisa bekerja sama dengan pemilik untuk memperbaruinya.

@looeee Silakan lihat perpustakaan ini: https://github.com/a-jie/threejs-geometry-modifiers

Halo semuanya -- mulai pagi ini, Facebook tidak lagi menolak warna titik RGB (VEC3) sebagai "tidak valid".

Persyaratan tekstur kekuatan dua tetap untuk saat ini, tetapi saya juga sedang mengerjakannya.

@zellski keren ! :) Saya sangat dekat dengan dukungan penuh untuk seorang pelukis :D Apakah ada rencana untuk mengimplementasikan sisa mode primitif? Saat ini saya yakin hanya TRIANGLE yang didukung, Mungkin bagus untuk mendukung sisanya, misalnya di A-painter kami menggunakan TRIANGLE_STRIP untuk menghemat ruang

Akan gila untuk tidak menerapkannya, bukan? Idealnya semua glTF yang valid harus diterima. Saya tidak tahu bagaimana pekerjaan itu akan diprioritaskan. Kami adalah tim kecil dengan banyak dorongan kuat. :)

Saya pikir masalah ini sekarang dapat ditutup?