Three.js: Dukungan Geometri Padat Konstruktif (CSG)

Dibuat pada 29 Mar 2019  ·  56Komentar  ·  Sumber: mrdoob/three.js

CSG adalah fitur yang sangat penting… kerangka kerja 3D lainnya memiliki dukungan untuk CSG bawaan ( Babylon.js ), satu-satunya CSG yang dapat saya temukan adalah plugin yang sudah ketinggalan zaman 7 tahun ( https://github.com/chandlerprall/ThreeCSG )

Saya mengusulkan agar plug-in ini diperbarui untuk bufferGeometry dan ditambahkan ke basis kode three.js sebagai plug-in resmi untuk dukungan CSG.

Saya bersedia menyumbangkan dana untuk melihat hal ini terjadi.

Enhancement

Komentar yang paling membantu

Saya melakukan konversi lain dari perpustakaan CSG madebyevan yang mungkin berguna bagi Anda.. ini berfungsi dengan tiga (103) saat ini dan memperbaiki beberapa masalah yang saya miliki dengan modul yang lebih lama di luar sana. Ini memungkinkan buffergeometri tetapi hanya dengan mengubahnya menjadi geometri secara internal.

https://github.com/manthrax/THREE-CSGMesh

Semoga ini bisa membantu seseorang dan jangan ragu untuk memberikan umpan balik/saran.

Semua 56 komentar

Saya bisa mencobanya akhir pekan ini ... biarkan saya melihat bagaimana kelanjutannya.

Um, saya telah menambahkan OrbitControls dan memeriksa hasilnya sepertinya tidak terlalu benar. Apakah Anda yakin perpustakaan ini cukup teruji?
Silakan lakukan beberapa tes sebelum saya mencoba 'Bufferize' itu
image

Menambahkannya ke basis kode inti mungkin agak rumit, versi saat ini ( v1 branch ) ada di TypeScript. Bekerja dengan baik dengan r100 (dan bahkan r103 ) Anda: contoh

Saya tidak berpikir menggabungkannya ke dalam folder src/ adalah arah yang benar, tetapi memperbaruinya untuk mendukung BufferGeometry terdengar menjanjikan. Apakah perpustakaan sudah teruji dengan baik, saya tidak tahu. :)

Menambahkannya ke basis kode inti mungkin agak rumit, versi saat ini ( v1 branch ) ada di TypeScript. Bekerja dengan baik dengan r100 (dan bahkan r103 ) Anda: contoh

Jadi dikembangkan secara aktif. Saya tidak melihat tanda itu. Dan... sepertinya tag v1 mendukung BufferGeometry! @ThreeDfish

Saya memilih untuk tidak memasukkan fitur CSG ke dalam repo ini. Lebih baik ThreeCSG didukung jika perlu.

Jadi dikembangkan secara aktif. Saya tidak melihat tanda itu. Dan... sepertinya tag v1 mendukung BufferGeometry! @ThreeDfish

Saya rasa tidak, ini adalah satu -

function convertGeometryToTriangles(geometry) {
        if (isBufferGeometry(geometry)) {
            throw new Error('threecsg: Only Three.Geometry is supported.');
        }

Adakah yang mencoba menghubungi pemilik ThreeCSG untuk melihat apa rencana mereka atau apakah mereka terbuka untuk mengambil PR untuk mendukung BufferGeometry? Saya juga sedikit tertarik dengan ini.

Sepertinya tidak ada yang bertanya di sana tentang BufferGeometry ...

Mengapa tidak mengalihkan percakapan ke https://github.com/chandlerprall/ThreeCSG? Saya yakin @chandlerprall akan senang melihat minat seperti itu pada proyeknya 😊

FWIW ada cabang v1 yang lebih baru di ThreeCSG yang merupakan penulisan ulang dan pembersihan lengkap. Perlu mengoptimalkan algoritme pemilih bidang dan kemudian siap untuk diterbitkan npm. Saya akan senang jika ada yang ingin menyumbangkan fitur tambahan (lihat juga https://github.com/chandlerprall/ThreeCSG/issues/51)

Untuk informasi anda:

Selain https://github.com/chandlerprall/ThreeCSG , pustaka CSG berikut disebutkan di utas forum Wacana baru-baru ini:

Saya tidak memiliki pendapat apakah salah satu dari ketiganya harus berfungsi sebagai dasar untuk dukungan CSG three.js.

Saya melakukan konversi lain dari perpustakaan CSG madebyevan yang mungkin berguna bagi Anda.. ini berfungsi dengan tiga (103) saat ini dan memperbaiki beberapa masalah yang saya miliki dengan modul yang lebih lama di luar sana. Ini memungkinkan buffergeometri tetapi hanya dengan mengubahnya menjadi geometri secara internal.

https://github.com/manthrax/THREE-CSGMesh

Semoga ini bisa membantu seseorang dan jangan ragu untuk memberikan umpan balik/saran.

@manthrax Proyek Anda akan menjadi tambahan yang bagus untuk utas berikut di forum three.js sehingga orang yang mencari plugin akan benar-benar menemukannya👍

https://discourse.threejs.org/t/Looking-for-updated-plug-in-for-csg/6785

Luar biasa! Saya tidak yakin seberapa layak itu tetapi saya pikir salah satu dari solusi ini akan mendapat manfaat dari beberapa contoh yang menunjukkan kinerja dan kemampuan pengeditan waktu nyata seperti yang dimiliki banyak editor mesin, sekarang.

Preferensi pribadi saya adalah menjauhkan CSG dari perpustakaan dan mengembangkannya secara mandiri.

Saya setuju dengan ini, tetapi mungkin berguna untuk memiliki satu set resmi "repo terkait". Saya telah membuat sebuah organisasi yang dapat kita gunakan untuk ini jika kita memutuskan untuk melanjutkan. github.com/threejs diambil oleh @enricomarino , tetapi github.com/three-js ada di sana. Saya akan mentransfer kepemilikan kepada siapa pun, hanya berpikir itu baik untuk melompat pada nama!

Jadi, organisasi ini tersedia bagi siapa saja yang ingin membuat proyek yang terkait dengan three.js yang kurang pas di sini.

https://github.com/three-js

Saya membuat organisasi https://github.com/threejs untuk meng-host proyek yang terkait dengan three.js.

Sebenarnya, pada waktu itu, saya berpikir untuk membagi mono repo "three.js" menjadi beberapa repo,
seperti "threejs/core", "treejs/examples", "threejs/editor", "threejs/docs",
sejak "mrdoob/three.js" menjadi sangat besar dan berat untuk diunduh...
tapi ini cerita lain...

Jika Anda ingin menggunakannya, organisasi siap membantu Anda!

Saya telah menambahkan demo dan tangkapan layar ke perpustakaan:

https://github.com/manthrax/THREE-CSGMesh

Beri tahu saya jika ada yang membutuhkan bantuan dengan itu!

@yomboprime @ThreeDfish
Saya telah menambahkan tangkapan layar dan demo ke pustaka CSG yang saya porting. Beri tahu saya jika Anda merasa berguna.
https://github.com/manthrax/THREE-CSGMesh

@yomboprime @ThreeDfish
Saya telah menambahkan tangkapan layar dan demo ke pustaka CSG yang saya porting. Beri tahu saya jika Anda merasa berguna.
https://github.com/manthrax/THREE-CSGMesh

@ThreeDfish Jika Anda masih tertarik, saya dapat membuat fungsi CSG.toBufferGeometry di perpustakaan ini. CSG masih akan menerima Geometri sebagai masukan, tetapi keluarannya dapat berupa Geometri (untuk operasi boolean lebih lanjut) atau BufferGeometry (keluaran akhir untuk rendering).
Bagaimana menurut Anda @manthrax ?

@enricomarino dapatkah Anda memberi saya akses ke github.com/threejs ? Saya ingin menyiapkan repo dengan model uji untuk LWOLoader . BTW Anda orang yang sulit menemukan detail kontak untuk

@yomboprime Saya tidak yakin apa yang Anda tanyakan ..

Versi yang saya porting menerima mesh BufferGeometry atau Geometry.. ini menghasilkan Geometry, yang dapat dikonversi ke BufferGeometry dengan

mesh.geometry = new THREE.BufferGeometry().fromGeometry(mesh.geometry)

Jadi saya tidak tahu apakah memang ada kebutuhan untuk fungsi pembantu tambahan karena konversinya cukup mudah.

Sayangnya, konversi Geometry -> BufferGeometry cukup lossy – ini akan menghapus indeks geometri yang diindeks dan meningkatkan jumlah simpul, selain menambahkan warna simpul (putih). Hasil akhir sebagai BufferGeometry mungkin ideal.

Operasi CSG tidak peduli dengan pengindeksan. Ini beroperasi dan menghasilkan 3 vert unik per segitiga tidak peduli apa.

Itu juga tidak menangani warna vertex.

Mengoptimalkan mesh yang dihasilkan adalah sesuatu yang dapat/harus dilakukan dengan alat/fungsi pembantu lainnya, imho.

Kalau tidak, itu hanya menduplikasi fungsionalitas bodoh yang seharusnya ada di perpustakaan terpisah.

Saya setuju bahwa pasti ada ruang dalam hal utilitas untuk mengoptimalkan geometri di THREE.js. Masalahnya berlaku untuk lebih dari sekadar BufferGeometry. Tetapi menerapkan optimasi ke buffer besar, melalui js, pada saat runtime, adalah operasi yang sulit.. dan teknik apa pun yang Anda terapkan untuk mengurangi kerumitan, yaitu octtree/kdtree apa pun.. menjadi rumit cukup cepat dan memerlukan serangkaian parameterisasi sendiri, dll.

Saya merasa seperti ada tradeoff antara kode "kompleksitas/fleksibilitas/utilitas" vs "ultra dioptimalkan untuk gpu" yang dalam pengaturan non javascript, Anda akan mengoptimalkan yang terakhir, tetapi dalam skenario js/web, Anda akan bertujuan untuk yang pertama, dan hanya jika Anda memutuskan Anda perlu mengejar yang terakhir, Anda akan menggunakan sesuatu seperti wabasm untuk mengolah data.

Belum lagi operasi CSG ini sudah sangat lambat.. Demo di git saya hampir tidak interaktif dengan hanya 10 operasi per frame pada kotak dan 8 subdiv sphere...

Yang mengatakan .. saya baru saja melihat demo babylon csg .. dan saya cukup yakin itu adalah port dari perpustakaan yang sama persis,
Dan itu juga tidak dilakukan secara realtime dalam demo itu.
https://www.babylonjs.com/demos/csg/

Ini adalah versi yang saya ubah dengan melakukan contoh yang lebih sederhana secara realtime:

http://vectorslave.com/csg/CSGDemo.html

Saya setuju bahwa operasi CSG tidak terlalu ramah waktu nyata, dan perpustakaan tidak perlu berpura-pura demikian. Namun, perhatikan bahwa Geometry pada akhirnya akan dihapus dari perpustakaan three.js, dan dipindahkan ke examples/js/* dan examples/jsm/* . Pada saat itu, pengguna hampir pasti akan lebih mudah menggunakan BufferGeometry sebagai hasilnya. Jika kode CSG memiliki ketergantungan internal pada Geometri, itu tampaknya baik-baik saja.

Saya akan mengatakannya seperti ini ...

Jika Anda ingin operasi rantai, memasukkan Geometry dan mengeluarkan Geometry masuk akal, karena CSG beroperasi pada struktur data itu saja.

Namun perlu diketahui bahwa Geometry akan segera tidak lagi dapat dirender, sehingga output harus dikonversi ke BufferGeometry pada langkah terakhir.

@manthrax Implementasi QuickHull menggunakan set kelas sendiri sehingga operasi topologi lebih mudah dilakukan. Misalnya implementasi setengah sisi jauh lebih baik daripada bekerja dengan Geometry dalam konteks ini. Karena Geometry difokuskan pada rendering, jenis kelas lain mungkin bekerja lebih baik bahkan untuk CSG.

Hargai feedbacknya @donmccurdy @WestLangley @Mugen87 .
Saya akan melihat cara membuatnya bekerja secara native dengan BufferGeometry sebagai persiapan untuk penghentian Geometry.
Saya juga ingin menambahkan dukungan warna dan material/grup.

@enricomarino Sebenarnya, saya berencana mengirimi Anda pesan untuk melihat apa yang Anda rencanakan dengan org saat saya mempertimbangkan untuk memindahkannya dari nama pengguna saya dan membaginya sedikit. Belum yakin bagaimana tampilannya, tetapi apakah Anda ingin menambahkan saya ke organisasi untuk saat ini?

@mrdoob yakin!

Hai semua.. Saya membuat demo perpustakaan CSG yang lebih bersinar, dan memperbaiki bug pada generasi normal, jika ada yang tertarik:

http://vectorslave.com/csg/CSGShinyDemo.html

dan gh:
https://github.com/manthrax/THREE-CSGMesh

Saya sedang mencari untuk menambahkan versi pengoptimalan BufferGeometry, dan sesuatu yang menjaga pemisahan material antara input, sehingga dapat langsung digunakan untuk sesuatu seperti perangkat lunak SCAD.

Hanya berpikir saya akan menjatuhkan tautan ini di sini untuk mendapatkan inspirasi dan jika ada yang ingin menyelam lebih dalam ke dalamnya. Saya menemukan alat CSG ini di Unity yang memiliki beberapa kinerja dan kemampuan pembuatan konten yang sangat mengesankan:

https://assetstore.unity.com/packages/tools/modeling/realtime-csg-69542

Dan sepertinya pembuatnya telah menulis beberapa artikel tentang implementasinya (total ada enam bagian):

http://sandervanrossen.blogspot.com/2010/05/realtime-csg-optimizations.html
http://sandervanrossen.blogspot.com/2010/05/realtime-csg-part-5.html

Saya mem-porting pustaka csg dan saat ini berfungsi dengan sangat baik.
Saya dapat memperbarui proyek ini jika diperlukan.

https://github.com/FishOrBear/csg.ts

Ada pembaruan tentang ini?

perpustakaan dari @manthrax bekerja dengan sempurna!

@mantraks

Saya ingin menambahkan versi pengoptimalan BufferGeometry

Apakah saat ini menggunakan THREE.Geometry ?

jadi saya tidak bisa membiarkannya beristirahat dan melihat ke https://github.com/jscad/csg.js yang merupakan perpustakaan inti CSG https://openjscad.org/
saya menjelajahinya dan menulis adaptor TIGA BufferGeometry milik saya sendiri dan sebenarnya JAUH lebih cepat daripada perpustakaan tempat

untuk dadu yang sama yang menggunakan bola dengan 32 wajah untuk memotong mata,
TIGA-CSGMesh membutuhkan waktu 112 detik,
jscad/csg butuh 2,5 detik!!!

itu 45 kali lebih cepat...

saya sedang berpikir untuk membuat perpustakaan darinya, beri tahu saya pendapat Anda tentangnya...

@SebiTimeWaster

Apakah tersedia di repo di mana saja? Sepertinya csg.js adalah lisensi MIT juga.

@mrdoob

Saya ingin menambahkan versi pengoptimalan BufferGeometry

Apakah saat ini menggunakan THREE.Geometry?

Melihat basis kode secara singkat sepertinya ya itu masih menggunakan THREE.Geometry tetapi hanya pada input dan output untuk mengubahnya ke dan dari struktur internal untuk operasi CSG.

belum gan, kalo ada yg minat ane buatin...

belum gan, kalo ada yg minat ane buatin...

Heh saya pikir utas ini adalah bukti minat! Tapi setidaknya saya tertarik untuk memeriksanya jika Anda memiliki versi yang lebih cepat. Saya tidak memiliki kebutuhan mendesak untuk itu lagi tetapi saya mungkin di masa depan. Akan menyenangkan untuk pergi ke perpustakaan untuk CSG dalam tiga bahkan jika itu hanya contoh singkat tentang bagaimana memulai dengan csg.js di tiga.js.

belum gan, kalo ada yg minat ane buatin...

Ya, contoh/solusi resmi untuk csg akan sangat bagus!

Saya ikut...

Saya sebagian besar selesai dengan port BufferGeometry dari
Perlu sedikit dirapikan, yang akan saya temukan waktu untuk minggu ini, kemudian saya akan membagikannya di sini.

@mrdoob apakah Anda ingin perpustakaan CSG di repo ini? Kalau begitu aku akan membuat PR. Kalau tidak, saya akan membuat repo baru untuk itu.

@SebiTimeWaster Saya tidak melihat komentar Anda sebelumnya, oops. Makin banyak makin seru menurutku 😁

@looeee apakah ini port penuh atau hanya pembungkus? Sepertinya csg.js harus mengonversi data ke banyak struktur internal untuk operasi CSG, bukan? Sepertinya Anda hanya dapat mengonversi ke dan dari BufferGeometry saat masuk dan keluar.

@looeee maksud Anda repo baru di sini ?
akan menarik tapi saya kira mrdoob belum siap.

Saya tidak yakin repositori ini adalah tempat yang tepat untuk memelihara pustaka CSG lengkap... mungkin menambahkan contoh, menggunakan versi pustaka CSG yang diperkecil di examples/js(m)/libs/ ?

Jadi, inilah pendapat saya tentang semuanya (ini didasarkan pada https://github.com/jscad/csg.js):
https://github.com/SebiTimeWaster/three-csg
dengan contoh (tes stres):
https://sebitimewaster.github.io/three-csg/examples/example2.html

@looeee bagaimana kalau Anda menerapkan tes stres yang sama, maka kami dapat membandingkan dan mengoptimalkan kode kami satu sama lain ...

@looeee apakah ini port penuh atau hanya pembungkus?

Saya memiliki satu cabang yang cukup banyak hanya pembungkus untuk csg.js dengan beberapa perubahan kecil:

  • memodulasi kode
  • menyelaraskan nama fungsi ke three.js dan menggunakan Vector3 alih-alih kelas vektor khusus,
  • peningkatan API kecil

Cabang itu selesai, dan saya akan membagikannya setelah saya merapikannya sedikit. Namun, itu lambat.

Saya memiliki cabang lain di mana saya sedang mengerjakan peningkatan kecepatan. Ada banyak hal yang dapat dilakukan di sini, terutama yang berkaitan dengan perhitungan out awal untuk menghindari pemrosesan sebanyak mungkin.

@SebiTimeWaster , saya telah melihat sekilas kode Anda dan Anda melakukan sesuatu seperti ini menggunakan bola pembatas untuk setiap poligon, saya pikir? Saya akan mencoba membuat ulang contoh Anda menggunakan perpustakaan saya ketika saya menemukan waktu.

@SebiTimeWaster dapatkah implementasi csg Anda menangani koordinat tekstur?

Inilah bagaimana koordinat tekstur terlihat di milik saya.

2020-06-08 20_20_34-Discoverthreejs com - three js CSG Demo A

Berikut reponya:
https://github.com/looeee/threejs-csg

Ada dua cabang, _master_, yang cukup dekat dengan pembungkus csg.js seperti yang saya jelaskan di atas, dan _advanced_. Di sana saya telah menyatakan semua operasi CSG menggunakan metode LogicalOR dan complement :

Serikat : _(Kiri || Kanan)_
Kurangi : _!(!Kiri || Kanan)_
Intersect : _!(!Kiri || !Kanan)_

Melakukan hal itu membuat operasi sedikit lebih mudah untuk dipikirkan dan juga membuat pengurangan dan perpotongan sedikit lebih cepat. Ada juga beberapa eksperimen dengan melakukan penggabungan dan pemusnahan berbasis kotak pembatas tingkat tinggi sebelum melakukan operasi CSG penuh, yang memberikan beberapa percepatan yang layak saat melakukan banyak operasi sekaligus.

Pendekatan yang lebih baik, bagaimanapun, dan apa yang tampaknya paling banyak digunakan dalam implementasi lain, adalah membuat BVH geometri dan operasi dan melintasi pohon untuk menghasilkan geometri akhir.

@SebiTimeWaster untuk saat ini saya telah memutuskan untuk melihat implementasi CSG alternatif daripada melangkah lebih jauh dengan yang ini. Jika ada sesuatu yang berguna dari repo saya, silakan ambil.

EDIT: Tweet ini meringkas perasaan saya dengan tepat

Sepertinya sumber plugin Realtime CSG untuk Unity yang saya tautkan di atas telah diposting di Github dan dilisensikan MIT jika ada yang tertarik untuk mempelajarinya lebih dalam:

https://github.com/LogicalError/realtime-CSG-for-unity

Dia juga memiliki beberapa posting teknis tentang plugin CSG-nya di blognya juga, jika Anda kembali sedikit:

https://sandervanrossen.blogspot.com/search?q=Realtime+CSG

Ada juga pembicaraan GDC yang lebih baru darinya pada bulan Maret tahun ini di CSG:

https://www.youtube.com/watch?v=Iqmg4gblreo

Saya sendiri tidak main-main dengan karyanya di Unity tetapi kinerja dalam video tampak hebat.

Ada juga yang didasarkan pada Unity CSG tetapi merupakan aplikasi C# yang berdiri sendiri, mungkin lebih mudah dipahami. Ini cukup sedikit lebih tua sehingga mungkin tidak berkembang.

https://github.com/LogicalError/Realtime-CSG-demo

Mesin Godot juga memiliki CSG yang saya uji dan memiliki kinerja yang sangat baik. dokumen / kode .

Ada juga Carve CSG dan xcsg (yang menggunakan Carve), dan Cork .

Saya ingin tahu apakah solusi terbaik di sini adalah mengambil salah satu dari solusi yang ada (mungkin Carve karena itu CPP dan tampaknya digunakan di banyak paket lain) dan mengubahnya menjadi Wasm.

Saya ingin tahu apakah solusi terbaik di sini adalah mengambil salah satu dari solusi yang ada (mungkin Carve karena itu CPP dan tampaknya digunakan di banyak paket lain) dan mengubahnya menjadi Wasm.

Saya kurang akrab dengan emscripten tetapi itu tidak terdengar seperti pendekatan yang buruk. Sepertinya Carve dan Cork memiliki lisensi GPL dan LGPL, jadi itu adalah sesuatu yang perlu diingat.

Rupanya Blender baru saja memperbarui alat operasi booleannya dan menurut tweet ini menggunakan pendekatan dari makalah ini:

http://www.cs.columbia.edu/cg/mesh-arrangements/

Apakah halaman ini membantu?
0 / 5 - 0 peringkat