A-Frame: Membatasi jumlah wajah dan simpul pada model

Saya mengalami masalah dengan kinerja A-Frame dan semua yang saya coba tidak berpengaruh. Di situs A-Frame dalam Praktik Terbaik - Kinerja berikut disebutkan:

Batasi jumlah wajah dan simpul pada model.

Model ini memiliki hampir 100 ribu simpul dan 30 ribu sisi. Bagaimana cara mengurangi jumlah sisi dan/atau simpul? Merupakan persyaratan bahwa pengguna dapat berinteraksi dengan setiap kotak dalam model secara terpisah, misalnya. dengan mengubah warna atau transparansi atau posisinya. Apakah ada cara untuk membuat mesh atau apa pun dan tetap memiliki interaksi penuh dengan setiap elemennya?

Selain itu, saya tidak tahu bagaimana cara meningkatkan kinerja. Adegan tersebut tidak memiliki cahaya, tekstur, tabrakan, raycaster, dan semua hal berat lainnya. Ini hanya beberapa kotak...


performance three.js 3d
person naraesk    schedule 20.03.2018    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Masalah dalam adegan ini bukanlah jumlah simpul atau wajah (masing-masing 100k dan 30k baik-baik saja), namun ukuran grafik adegan dan jumlah panggilan penarikan GPU. Ada 2400 <a-box/> elemen, masing-masing memerlukan panggilan undian terpisah, dan itu terlalu banyak. Jumlah panggilan undian harus serendah mungkin, idealnya ‹ 100.

Agar 2.400 kotak tetap interaktif, Anda harus (1) membuat komponen khusus yang menempatkan semua kotak ke dalam satu rel THREE.BufferGeometry dan mengubah posisi dan warna titik dalam geometry.attributes.position dan geometry.attributes.color, atau (2) menggunakan teknik seperti penciptaan. Keduanya memerlukan beberapa JS khusus, bukan hanya markup HTML, karena keduanya tidak dimasukkan ke dalam A-Frame sebagai komponen.

person Don McCurdy    schedule 21.03.2018
comment
tautan kedua mengarah ke bagian masalah three.js, maksud Anda seperti ini ? - person Piotr Adam Milewski; 21.03.2018
comment
Terima kasih atas jawaban anda. Saya belum pernah menggunakan BufferGeometry karena dokumentasi three.js mengatakan Ini menjadikan BufferGeometry terbaik- cocok untuk objek statis di mana Anda tidak perlu banyak memanipulasi geometri setelah membuat instance. yang bukan kasus penggunaan saya. Tapi setahu saya, BufferGeometry hanya kurang nyaman tapi fiturnya sama dengan Geometry ya? - person naraesk; 21.03.2018
comment
@PiotrAdamMilewski ups, terima kasih! Maksud saya aframe-instancing tetapi tautan Anda juga relevan. - person Don McCurdy; 21.03.2018
comment
@naraesk — THREE.Geometry hampir tidak digunakan lagi, tapi ya, ini juga bisa berfungsi. BufferGeometry agak kurang nyaman untuk digunakan, tetapi (meskipun ada dokumentasinya) pasti dapat digunakan untuk objek dinamis. Setiap atribut di BufferGeometry Anda dapat menggunakan .dynamic, .updateRange(), dan .needsUpdate, lihat dokumen BufferAttribute . - person Don McCurdy; 21.03.2018