Three.js: Unterstützung für konstruktive Festkörpergeometrie (CSG)

Erstellt am 29. März 2019  ·  56Kommentare  ·  Quelle: mrdoob/three.js

CSG ist ein sehr wichtiges Feature… andere 3D-Frameworks unterstützen CSG-Integration ( Babylon.js ), das einzige CSG, das ich finden kann, ist das 7 Jahre veraltete Plugin ( https://github.com/chandlerprall/ThreeCSG )

Ich schlage vor, dass dieses Plug-In für BufferGeometry aktualisiert und als offizielles Plug-In für die CSG-Unterstützung der Three.js-Codebasis hinzugefügt wird.

Ich bin bereit, Gelder zu spenden, um dies zu erreichen.

Enhancement

Hilfreichster Kommentar

Ich habe eine weitere Konvertierung der madebyevan CSG-Bibliothek durchgeführt, die Sie vielleicht nützlich finden werden. Sie funktioniert mit den aktuellen drei (103) und hat einige Probleme behoben, die ich mit dem älteren Modul hatte. Es erlaubt Puffergeometrien, aber nur, indem sie intern in Geometrien umgewandelt werden.

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

Ich hoffe, dies hilft jemandem und zögern Sie nicht, Feedback / Vorschläge zu geben.

Alle 56 Kommentare

Ich kann es dieses Wochenende ausprobieren ... mal sehen, wie es läuft.

Ähm, ich habe OrbitControls hinzugefügt und wenn ich das Ergebnis betrachte, scheint es nicht sehr korrekt zu sein. Sind Sie sicher, dass diese Bibliothek ausreichend getestet wurde?
Bitte machen Sie einige Tests, bevor ich versuche, es zu 'puffern' 😉
image

Das Hinzufügen zur Kerncodebasis könnte etwas kompliziert sein, die aktuelle Version ( v1 branch ) ist in TypeScript. Funktioniert gut mit r100 (und sogar r103 ) du: Beispiele

Ich glaube nicht, dass es die richtige Richtung ist, es in den Ordner src/ zu bündeln, aber es klingt vielversprechend, es zu aktualisieren, um BufferGeometry zu unterstützen. Ob die Bibliothek gut getestet ist, keine Ahnung. :)

Das Hinzufügen zur Kerncodebasis könnte etwas kompliziert sein, die aktuelle Version ( v1 branch ) ist in TypeScript. Funktioniert gut mit r100 (und sogar r103 ) du: Beispiele

Es wird also aktiv weiterentwickelt. Ich habe das Etikett nicht gesehen. Und... es scheint, dass das v1-Tag BufferGeometry unterstützt! @ThreeDfish

Ich stimme dafür, keine CSG-Funktionen in dieses Repository aufzunehmen. Besser ThreeCSG wird bei Bedarf unterstützt.

Es wird also aktiv weiterentwickelt. Ich habe das Etikett nicht gesehen. Und... es scheint, dass das v1-Tag BufferGeometry unterstützt! @ThreeDfish

Ich glaube nicht, dies ist die einzige Erwähnung von BufferGeometry in der Version v1:

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

Hat jemand versucht, den Besitzer des ThreeCSG zu kontaktieren, um zu erfahren, was seine Pläne sind oder ob er bereit ist, PRs zur Unterstützung von BufferGeometry zu nehmen? Das interessiert mich auch ein bisschen.

Anscheinend hat dort niemand nach BufferGeometry gefragt...

Warum nicht die Konversation auf https://github.com/chandlerprall/ThreeCSG verlagern @chandlerprall würde sich über ein solches Interesse an seinem Projekt freuen

FWIW gibt es einen neueren v1- Zweig in ThreeCSG, der komplett neu geschrieben und bereinigt wird. Sie müssen den Ebenenauswahlalgorithmus optimieren und dann ist er bereit für die npm-Veröffentlichung. Ich würde mich freuen, wenn jemand zusätzliche Features beisteuern möchte (siehe auch https://github.com/chandlerprall/ThreeCSG/issues/51)

Für Ihre Information:

Neben https://github.com/chandlerprall/ThreeCSG wurden die folgenden CSG-Bibliotheken im aktuellen Discourse-Forum-Thread erwähnt:

Ich habe keine Meinung dazu, ob einer dieser drei als Grundlage für die CSG-Unterstützung von Three.js dienen sollte.

Ich habe eine weitere Konvertierung der madebyevan CSG-Bibliothek durchgeführt, die Sie vielleicht nützlich finden werden. Sie funktioniert mit den aktuellen drei (103) und hat einige Probleme behoben, die ich mit dem älteren Modul hatte. Es erlaubt Puffergeometrien, aber nur, indem sie intern in Geometrien umgewandelt werden.

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

Ich hoffe, dies hilft jemandem und zögern Sie nicht, Feedback / Vorschläge zu geben.

@manthrax Dein Projekt wäre eine gute Ergänzung zum folgenden Thread im three.js Forum, damit Leute, die nach einem Plugin suchen, es tatsächlich finden👍

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

Genial! Ich bin mir nicht sicher, wie machbar das ist, aber ich denke, jede dieser Lösungen würde von einigen Beispielen profitieren, die die Leistung und die Echtzeit-Bearbeitungsfunktionen demonstrieren, wie sie viele Engine-Editoren jetzt haben.

Meine persönliche Präferenz ist es, CSG aus der Bibliothek herauszuhalten und es unabhängig zu entwickeln.

Ich stimme dem zu, aber es könnte nützlich sein, einen offiziellen Satz "verwandter Repos" zu haben. Ich habe eine Organisation geschaffen, die wir dafür nutzen können, wenn wir uns entscheiden, weiterzumachen. github.com/threejs wird von @enricomarino genommen , aber github.com/three-js war da. Ich übergebe das Eigentum an wen auch immer, ich dachte nur, es wäre gut, auf den Namen zu springen!

Diese Organisation steht also jedem zur Verfügung, der Projekte im Zusammenhang mit Three.js erstellen möchte, die hier nicht ganz hineinpassen.

https://github.com/three-js

Ich habe die Organisation https://github.com/threejs erstellt , um Projekte im Zusammenhang mit Three.js zu hosten.

Eigentlich dachte ich damals daran, das Mono-Repo "three.js" in mehrere Repos aufzuteilen,
wie "threejs/core", "treejs/examples", "threejs/editor", "threejs/docs",
seit die "mrdoob/three.js" sehr groß und schwer herunterzuladen geworden ist...
aber das ist eine andere geschichte...

Wenn Sie es nutzen möchten, steht Ihnen die Organisation zur Verfügung!

Ich habe der Bibliothek eine Demo und einen Screenshot hinzugefügt:

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

Melde mich, wenn jemand dabei Hilfe braucht!

@yomboprime @ThreeDfish
Ich habe der portierten CSG-Bibliothek einen Screenshot und eine Demo hinzugefügt. Lassen Sie es mich wissen, wenn Sie es nützlich finden.
https://github.com/manthrax/THREE-CSGMesh

@yomboprime @ThreeDfish
Ich habe der portierten CSG-Bibliothek einen Screenshot und eine Demo hinzugefügt. Lassen Sie es mich wissen, wenn Sie es nützlich finden.
https://github.com/manthrax/THREE-CSGMesh

@ThreeDfish Wenn Sie immer noch interessiert sind, kann ich eine CSG.toBufferGeometry Funktion in dieser Bibliothek erstellen . Die CSG würde weiterhin Geometry als Eingabe akzeptieren, aber die Ausgabe könnte Geometry (für weitere boolesche Operationen) oder BufferGeometry (endgültige Ausgabe für das Rendern) sein.
Was denkst du @manthrax ?

@enricomarino kannst du mir Zugang zu github.com/threejs geben? Ich möchte ein Repo mit Testmodellen für das LWOLoader einrichten. Übrigens, Sie sind schwer zu finden Kontaktdetails für 😛

@yomboprime Ich bin mir nicht sicher, was du

Die von mir portierte Version akzeptiert sowohl BufferGeometry- als auch Geometry-Netze. Sie gibt Geometrie aus, die mit in BufferGeometry konvertiert werden kann

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

Ich weiß also nicht, ob wirklich eine zusätzliche Hilfsfunktion erforderlich ist, da die Konvertierung ziemlich einfach ist.

Die Konvertierung von Geometry -> BufferGeometry ist leider ziemlich verlustbehaftet – sie deindiziert indizierte Geometrie und erhöht die Anzahl der Scheitelpunkte, zusätzlich zum Hinzufügen von (weißen) Scheitelpunktfarben. Die endgültige Ausgabe als BufferGeometry wäre wahrscheinlich ideal.

Die CSG-Operation kümmert sich nicht um die Indizierung. Es arbeitet mit und gibt 3 einzigartige Verts pro Dreieck aus, egal was passiert.

Es verarbeitet auch keine Scheitelpunktfarben.

Die Optimierung des resultierenden Netzes kann/sollte mit anderen Tools/Hilfsfunktionen durchgeführt werden, imho.

Ansonsten ist es nur das Duplizieren von dummer Funktionalität, die eigentlich in einer separaten Bibliothek sein sollte.

Ich stimme zu, dass es definitiv einen Platz in Bezug auf ein Dienstprogramm zum Optimieren der Geometrie in THREE.js gibt. Das Problem betrifft mehr als nur BufferGeometry. Aber das Anwenden von Optimierungen auf große Puffer über js zur Laufzeit sind schwierige Operationen.. und alle Techniken, die Sie anwenden, um die Komplexität zu reduzieren, dh octtree/kdtree was auch immer.

Ich habe das Gefühl, dass es einen Kompromiss zwischen Code "Komplexität / Flexibilität / Dienstprogramm" und "ultraoptimiert für die GPU" gibt, den Sie in einer Nicht-Javascript-Einstellung für letztere optimieren würden, aber in einem js / Web-Szenario würden Sie darauf abzielen Ersteres, und nur wenn Sie sich für Letzteres entscheiden, würden Sie so etwas wie Wabasm verwenden, um die Daten zu verarbeiten.

Ganz zu schweigen davon, dass diese CSG-Operationen bereits ziemlich langsam sind. Die Demo in meinem Git ist mit nur 10 Operationen pro Frame auf einer Box und einer 8-Subdiv-Kugel kaum interaktiv ...

Das heißt, ich habe mir gerade die babylon csg-Demo angesehen und bin mir ziemlich sicher, dass es sich um eine Portierung der exakt gleichen Bibliothek handelt.
Und das geschieht auch in dieser Demo nicht in Echtzeit.
https://www.babylonjs.com/demos/csg/

Hier ist die Version, die ich mit einem einfacheren Beispiel in Echtzeit konvertiert habe:

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

Ich stimme zu, dass der CSG-Betrieb nicht besonders echtzeitfreundlich ist und die Bibliothek nicht so tun muss, als ob er es wäre. Beachten Sie jedoch, dass Geometry schließlich aus der Three.js-Bibliothek entfernt und in examples/js/* und examples/jsm/* verschoben wird. An diesem Punkt wird es den Benutzern mit ziemlicher Sicherheit leichter fallen, BufferGeometry als Ergebnis zu verwenden. Wenn der CSG-Code eine interne Abhängigkeit von Geometry hat, scheint das natürlich in Ordnung zu sein.

ich würde es so sagen...

Wenn Sie Operationen verketten möchten, ist die Eingabe von Geometry und die Ausgabe von Geometry sinnvoll, da CSG nur mit dieser Datenstruktur arbeitet.

Beachten Sie jedoch, dass Geometry bald nicht mehr renderbar sein wird, sodass die Ausgabe im letzten Schritt in BufferGeometry konvertiert werden muss.

@manthrax Die QuickHull-Implementierung verwendet einen eigenen Satz von Klassen, sodass topologische Operationen einfacher durchgeführt werden können. Zum Beispiel ist eine Half-Edge-Implementierung in diesem Kontext viel besser als mit Geometry zu arbeiten. Da sich Geometry auf das Rendern konzentriert, funktionieren andere Klassentypen möglicherweise sogar für CSG besser.

Schätzen Sie das Feedback @donmccurdy @WestLangley @Mugen87 .
Ich werde prüfen, ob es nativ mit BufferGeometry funktioniert, um die Einstellung von Geometry vorzubereiten.
Ich möchte auch Farb- und Material-/Gruppenunterstützung hinzufügen.

@enricomarino Eigentlich hatte ich vor, dir eine Nachricht zu senden, um zu sehen, was du mit der

@mrdoob sicher!

Hallo zusammen.. Ich habe eine glänzendere Demo der CSG-Bibliothek erstellt und einen Fehler in der normalen Generierung behoben, falls es jemanden interessiert:

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

und das gh:
https://github.com/manthrax/THREE-CSGMesh

Ich überlege, eine BufferGeometry-Optimierungsversion hinzuzufügen und etwas, das die Materialtrennung zwischen den Eingängen beibehält, damit es direkt für so etwas wie eine SCAD-Software verwendet werden könnte.

Ich dachte nur, ich stelle diese Links hier zur Inspiration und für den Fall, dass jemand wirklich tief in sie eintauchen möchte. Ich bin in Unity auf dieses CSG-Tool gestoßen, das über einige wirklich beeindruckende Leistungs- und Inhaltserstellungsfunktionen verfügt:

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

Und es sieht so aus, als hätte der Ersteller einige Artikel zur Implementierung geschrieben (insgesamt gibt es sechs Teile):

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

Ich habe eine csg-Bibliothek portiert und sie funktioniert im Moment sehr gut.
Ich kann dieses Projekt bei Bedarf aktualisieren.

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

Gibt es hierzu Neuigkeiten?

die Bibliothek von @manthrax funktioniert einwandfrei!

@manthrax

Ich überlege, eine BufferGeometry-Optimierungsversion hinzuzufügen

Wird derzeit THREE.Geometry ?

Also konnte ich es nicht ruhen lassen und schaute mir https://github.com/jscad/csg.js an , die Kern-CSG-Bibliothek von https://openjscad.org/
Ich habe es browserifiziert und meinen eigenen THREE BufferGeometry-Adapter geschrieben und es ist tatsächlich VIEL schneller als die Bibliothek, auf der

für den gleichen Würfel, der Kugeln mit 32 Gesichtern verwendet, um die Augen auszuschneiden,
DREI-CSGMesh dauerte 112 Sekunden,
jscad/csg dauerte 2,5 Sekunden!!!

das ist 45 mal schneller...

Ich denke darüber nach, eine Bibliothek daraus zu erstellen, lass es mich wissen, was du davon hältst...

@SebiTimeWaster

Ist es irgendwo in einem Repo verfügbar? Anscheinend ist csg.js auch eine MIT-Lizenz.

@mrdoob

Ich überlege, eine BufferGeometry-Optimierungsversion hinzuzufügen

Nutzt es derzeit THREE.Geometry?

Wenn man sich kurz die Codebasis ansieht, sieht es so aus, als würde sie immer noch THREE.Geometry verwenden, aber nur für die Eingabe und Ausgabe, um sie in eine und von einer internen Struktur für CSG-Operationen zu konvertieren.

noch nicht, bei interesse würde ich einen erstellen...

noch nicht, bei interesse würde ich einen erstellen...

Heh, ich denke, dieser Thread ist ein Beweis für Interesse! Aber zumindest bin ich daran interessiert, es auszuprobieren, wenn Sie eine schnellere Version haben. Ich habe keinen unmittelbaren Bedarf mehr dafür, aber vielleicht in Zukunft. Es wäre schön, die Bibliothek für CSG in Three zu verwenden, auch wenn dies nur ein kurzes Beispiel für den Einstieg in csg.js in Three.js ist.

noch nicht, bei interesse würde ich einen erstellen...

Ja, ein offizielles Beispiel/eine Lösung für csg wäre toll!

Ich bin dabei...

Ich bin meistens mit einem BufferGeometry-Port von @evanws csg.js fertig .
Braucht ein bisschen Aufräumen, wofür ich diese Woche Zeit finde, dann teile ich es hier.

@mrdoob möchten Sie eine CSG-Bibliothek in diesem Repository? Wenn ja, mache ich eine PR. Ansonsten mache ich ein neues Repo dafür.

@SebiTimeWaster Ich habe deinen Kommentar noch nicht gesehen, oops. Je mehr desto besser denke ich 😁

@looeee ist es ein vollständiger Port oder nur ein Wrapper? Es sah so aus, als müsste csg.js sowieso Daten in viele interne Strukturen für CSG-Operationen konvertieren, oder? Es schien, als ob Sie beim Ein- und Aussteigen nur in und aus BufferGeometry konvertieren sollten.

@looeee meinst du ein neues Repo hier ?
Wäre interessant, aber ich gehe mal davon aus, dass mrdoob noch nicht fertig ist.

Ich bin mir nicht sicher, ob dieses Repository der richtige Ort ist, um eine vollständige CSG-Bibliothek zu verwalten ... vielleicht ein Beispiel hinzufügen, das einen minimierten Build der CSG-Bibliothek in examples/js(m)/libs/ ?

Also, hier ist meine Meinung zu dem Ganzen (basiert auf https://github.com/jscad/csg.js):
https://github.com/SebiTimeWaster/three-csg
mit einem Beispiel (Stresstest):
https://sebitimewaster.github.io/three-csg/examples/example2.html

@looeee wie wäre es,

@looeee ist es ein vollständiger Port oder nur ein Wrapper?

Ich habe einen Branch, der mit ein paar kleinen Änderungen so ziemlich nur ein Wrapper für csg.js ist:

  • den Code modularisiert
  • Funktionsnamen auf Three.js ausgerichtet und Vector3 anstelle einer benutzerdefinierten Vektorklasse verwendet,
  • kleinere API-Verbesserungen

Dieser Zweig ist fertig, und ich werde ihn teilen, sobald ich ihn ein wenig aufgeräumt habe. Es ist jedoch langsam.

Ich habe einen anderen Zweig, in dem ich an Geschwindigkeitsverbesserungen arbeite. Hier kann viel getan werden, hauptsächlich durch die Berechnung von Early-Outs, um so viel Verarbeitung wie möglich zu vermeiden.

@SebiTimeWaster , ich habe mir Ihren Code kurz

@SebiTimeWaster kann Ihre csg-Implementierung Texturkoordinaten verarbeiten?

So sehen Texturkoordinaten in meinem aus.

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

Hier ist das Repo:
https://github.com/looeee/threejs-csg

Es gibt zwei Zweige, _master_, die einem Wrapper von csg.js ziemlich nahe kommen, wie ich oben beschrieben habe, und _advanced_. Dort habe ich alle CSG-Operationen mit den Methoden LogicalOR und complement ausgedrückt:

Union : _(Links || Rechts)_
Subtrahiere : _!(!Links || Rechts)_
Schnittpunkt : _!(!Links || !Rechts)_

Dadurch werden die Operationen etwas leichter nachvollziehbar und auch das Subtrahieren und Überschneiden etwas schneller. Es gibt auch einige Experimente mit einem High-Level-Bounding-Box-basierten Merge and Cull, bevor die vollständigen CSG-Operationen durchgeführt werden, was bei der gleichzeitigen Ausführung vieler Operationen einige anständige Beschleunigungen bietet.

Ein besserer Ansatz, der bei anderen Implementierungen am häufigsten verwendet wird, besteht jedoch darin, eine BVH von Geometrien und Operationen zu erstellen und den Baum zu durchlaufen, um die endgültige Geometrie zu generieren.

@SebiTimeWaster Ich habe mich

EDIT: Dieser Tweet fasst meine Gefühle genau zusammen

Es sieht so aus, als ob die Quelle für das Realtime CSG- Plugin für Unity, das ich oben verlinkt habe, auf Github veröffentlicht wurde und vom MIT lizenziert ist, wenn jemand daran interessiert ist, sich eingehend damit zu befassen:

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

Er hat auch einige technische Beiträge zu seinem CSG-Plugin auf seinem Blog, wenn Sie etwas zurückgehen:

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

Es gab auch einen neueren GDC-Talk von ihm im März dieses Jahres auf CSG:

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

Ich habe selbst nicht mit seiner Arbeit in Unity herumgespielt, aber die Leistung in Videos sieht großartig aus.

Es gibt auch diese, die auf Unity CSG basiert, aber eine eigenständige C#-App ist, die möglicherweise leichter zu verstehen ist. Es ist jedoch schon etwas älter, daher ist es möglicherweise nicht so entwickelt.

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

Der Godot-Motor hat auch CSG, das ich getestet habe, und er hat eine sehr anständige Leistung. Dokumente / Code .

Es gibt auch Carve CSG und xcsg (das Carve verwendet) und Cork .

Ich frage mich, ob die beste Lösung hier wäre, eine dieser bestehenden Lösungen (wahrscheinlich Carve, da es CPP ist und in vielen anderen Paketen verwendet zu werden scheint) und in Wasm zu konvertieren.

Ich frage mich, ob die beste Lösung hier wäre, eine dieser bestehenden Lösungen (wahrscheinlich Carve, da es CPP ist und in vielen anderen Paketen verwendet zu werden scheint) und in Wasm zu konvertieren.

Ich bin mit Emscripten weniger vertraut, aber das klingt nicht nach einem schlechten Ansatz. Es sieht jedoch so aus, als ob Carve und Cork GPL- und LGPL-lizensiert sind, also sollte man das im Hinterkopf behalten.

Anscheinend hat Blender gerade sein boolesches Operationstool aktualisiert und verwendet laut diesem Tweet Ansätze aus diesem Papier:

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

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

akshaysrin picture akshaysrin  ·  3Kommentare

clawconduce picture clawconduce  ·  3Kommentare

seep picture seep  ·  3Kommentare

yqrashawn picture yqrashawn  ·  3Kommentare

filharvey picture filharvey  ·  3Kommentare