Three.js: Prise en charge de la géométrie solide constructive (CSG)

Créé le 29 mars 2019  ·  56Commentaires  ·  Source: mrdoob/three.js

CSG est une fonctionnalité très importante… d'autres frameworks 3D prennent en charge CSG intégré ( Babylon.js ), le seul CSG que je peux trouver est le plugin obsolète de 7 ans ( https://github.com/chandlerprall/ThreeCSG )

Je propose que ce plug-in soit mis à jour pour bufferGeometry et ajouté à la base de code three.js en tant que plug-in officiel pour la prise en charge de CSG.

Je suis prêt à contribuer des fonds pour que cela se produise.

Enhancement

Commentaire le plus utile

J'ai fait une autre conversion de la bibliothèque madebyevan CSG que vous trouverez peut-être utile.. cela fonctionne avec les trois (103) actuels et a corrigé certains problèmes que j'avais avec l'ancien module. Il autorise les géométries tampons mais uniquement en les convertissant en géométries en interne.

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

J'espère que cela aidera quelqu'un et n'hésitez pas à donner votre avis/suggestions.

Tous les 56 commentaires

Je peux essayer ce week-end... laissez-moi voir comment ça se passe.

Euh, j'ai ajouté un OrbitControls et en inspectant le résultat, cela ne semble pas très correct. Êtes-vous sûr que cette bibliothèque est suffisamment testée ?
Veuillez faire quelques tests dessus avant que j'essaye de le 'bufferiser' 😉
image

L'ajouter à la base de code de base peut être un peu compliqué, la version actuelle ( v1 branch ) est en TypeScript. Fonctionne bien avec r100 (et même r103 ) tu : exemples

Je ne pense pas que le regrouper dans le dossier src/ soit la bonne direction, mais le mettre à jour pour prendre en charge BufferGeometry semble prometteur. Si la bibliothèque est bien testée, je n'en ai aucune idée. :)

L'ajouter à la base de code de base peut être un peu compliqué, la version actuelle ( v1 branch ) est en TypeScript. Fonctionne bien avec r100 (et même r103 ) tu : exemples

Il est donc activement développé. Je n'ai pas vu cette étiquette. Et... il semble que la balise v1 supporte BufferGeometry ! @ThreeDfish

Je vote pour ne pas inclure les fonctionnalités CSG dans ce référentiel. Un meilleur ThreeCSG est pris en charge si nécessaire.

Il est donc activement développé. Je n'ai pas vu cette étiquette. Et... il semble que la balise v1 supporte BufferGeometry ! @ThreeDfish

Je ne pense pas, c'est la seule mention de BufferGeometry dans la version v1 :

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

Quelqu'un a-t-il essayé de contacter le propriétaire du ThreeCSG pour voir quels sont ses plans ou s'il est prêt à prendre des PR pour prendre en charge BufferGeometry ? Cela m'intéresse aussi un peu.

Il semble que personne n'a posé de questions sur BufferGeometry...

Pourquoi ne pas déplacer la conversation vers https://github.com/chandlerprall/ThreeCSG ? Je parie que @chandlerprall serait heureux de voir un tel intérêt pour son projet 😊

FWIW, il existe une nouvelle branche v1 dans ThreeCSG qui est une réécriture et un nettoyage complets. Besoin d'optimiser l'algorithme du sélecteur de plan, puis il est prêt à publier npm. Je serais ravi si quelqu'un souhaite contribuer à des fonctionnalités supplémentaires (voir également https://github.com/chandlerprall/ThreeCSG/issues/51)

Pour ton information:

Outre https://github.com/chandlerprall/ThreeCSG , les bibliothèques CSG suivantes ont été mentionnées dans le fil de discussion récent du forum Discourse :

Je n'ai aucune opinion quant à savoir si l'un de ces trois devrait servir de base pour le support CSG de three.js.

J'ai fait une autre conversion de la bibliothèque madebyevan CSG que vous trouverez peut-être utile.. cela fonctionne avec les trois (103) actuels et a corrigé certains problèmes que j'avais avec l'ancien module. Il autorise les géométries tampons mais uniquement en les convertissant en géométries en interne.

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

J'espère que cela aidera quelqu'un et n'hésitez pas à donner votre avis/suggestions.

@manthrax Votre projet serait un bon ajout au fil de discussion suivant dans le forum three.js afin que les personnes qui recherchent un plugin le trouveront réellement👍

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

Impressionnant! Je ne sais pas dans quelle mesure c'est faisable, mais je pense que l'une de ces solutions bénéficierait de quelques exemples qui démontrent les performances et les capacités d'édition en temps réel comme de nombreux éditeurs de moteurs.

Ma préférence personnelle est de garder CSG hors de la bibliothèque et de le développer de manière indépendante.

Je suis d'accord avec cela, mais il pourrait être utile d'avoir un ensemble officiel de "repos connexes". J'ai créé une organisation que nous pouvons utiliser pour cela si nous décidons d'aller de l'avant. github.com/threejs est pris par @enricomarino , mais github.com/three-js était là. Je vais transférer la propriété à qui que ce soit, j'ai juste pensé que c'était bien de sauter sur le nom !

Ainsi, cette organisation est disponible pour quiconque souhaite créer des projets liés à three.js qui ne correspondent pas tout à fait ici.

https://github.com/three-js

J'ai créé l'organisation https://github.com/threejs pour héberger des projets liés à three.js.

En fait, à ce moment-là, j'ai pensé à diviser le dépôt mono "three.js" en plusieurs dépôts,
tels que "threejs/core", "treejs/examples", "threejs/editor", "threejs/docs",
depuis que le "mrdoob/three.js" est devenu très volumineux et lourd à télécharger...
mais c'est une autre histoire...

Si vous souhaitez l'utiliser, l'organisation est à votre disposition !

J'ai ajouté une démo et une capture d'écran à la bibliothèque :

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

Faites-moi savoir si quelqu'un a besoin d'aide!

@yomboprime @ThreeDfish
J'ai ajouté une capture d'écran et une démo à la bibliothèque CSG que j'ai portée. Faites-moi savoir si vous le trouvez utile.
https://github.com/manthrax/THREE-CSGMesh

@yomboprime @ThreeDfish
J'ai ajouté une capture d'écran et une démo à la bibliothèque CSG que j'ai portée. Faites-moi savoir si vous le trouvez utile.
https://github.com/manthrax/THREE-CSGMesh

@ThreeDfish Si vous êtes toujours intéressé, je peux créer une fonction CSG.toBufferGeometry dans cette bibliothèque. Le CSG accepterait toujours Geometry comme entrée, mais la sortie pourrait être Geometry (pour d'autres opérations booléennes) ou BufferGeometry (sortie finale pour le rendu).
Qu'en pensez-vous @manthrax ?

@enricomarino pouvez-vous me donner accès à github.com/threejs ? J'aimerais créer un dépôt avec des modèles de test pour le LWOLoader . BTW, vous êtes une personne difficile à trouver les coordonnées de 😛

@yomboprime Je ne sais pas ce que vous demandez ..

La version que j'ai portée accepte à la fois les maillages BufferGeometry ou Geometry.

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

Donc, je ne sais pas s'il y a vraiment besoin d'une fonction d'aide supplémentaire car la conversion est assez simple.

La conversion Geometry -> BufferGeometry est malheureusement assez coûteuse – elle désindexera la géométrie indexée et augmentera le nombre de sommets, en plus d'ajouter des couleurs de sommet (blanches). La sortie finale en tant que BufferGeometry serait probablement idéale.

L'opération CSG ne se soucie pas de l'indexation. Il fonctionne et génère 3 verts uniques par triangle, quoi qu'il arrive.

Il ne gère pas non plus les couleurs des sommets.

L'optimisation du maillage résultant est quelque chose qui peut/devrait être fait avec d'autres outils/fonctions d'assistance, à mon humble avis.

Sinon, il s'agit simplement de dupliquer une fonctionnalité stupide qui devrait en fait se trouver dans une bibliothèque distincte.

Je suis d'accord qu'il y a définitivement un espace en termes d'utilitaire pour optimiser la géométrie dans THREE.js. Le problème s'applique à plus que juste BufferGeometry. Mais appliquer des optimisations à de grands tampons, via js, au moment de l'exécution, sont des opérations rapides.

J'ai l'impression qu'il y a un compromis entre le code "complexité/flexibilité/utilité" et "ultra optimisé pour le gpu" que dans un paramètre non javascript, vous optimiseriez pour ce dernier, mais dans un scénario js/web, vous viseriez le premier, et seulement si vous décidez que vous devez poursuivre le dernier, vous utiliseriez quelque chose comme le wabasm pour analyser les données.

Sans oublier que ces opérations CSG sont déjà assez lentes.. La démo dans mon git est à peine interactive avec seulement 10 opérations par image sur une boîte et une sphère de 8 subdiv...

Cela dit .. je viens de regarder la démo babylon csg .. et je suis à peu près sûr que c'est un portage de la même bibliothèque,
Et cela ne se fait pas non plus en temps réel dans cette démo.
https://www.babylonjs.com/demos/csg/

Voici la version que j'ai convertie en faisant un exemple plus simple en temps réel :

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

Je suis d'accord que les opérations CSG ne sont pas particulièrement conviviales en temps réel, et que la bibliothèque n'a pas besoin de prétendre qu'elles le sont. Cependant, notez que Geometry sera finalement supprimé de la bibliothèque three.js et déplacé dans examples/js/* et examples/jsm/* . À ce stade, les utilisateurs auront presque certainement plus de facilité à utiliser BufferGeometry comme résultat. Si le code CSG a une dépendance interne sur Geometry, cela semble bien bien sûr.

Je le dirais comme ça...

Si vous souhaitez enchaîner les opérations, la saisie de Geometry et la sortie de Geometry logiques, car CSG ne fonctionne que sur cette structure de données.

Mais sachez que Geometry ne pourra bientôt plus être rendu, donc la sortie devra être convertie en BufferGeometry à l'étape finale.

@manthrax L'implémentation QuickHull utilise son propre ensemble de classes, ce qui facilite les opérations topologiques. Par exemple, une implémentation à mi- Geometry est bien meilleure que de travailler avec Geometry se concentre sur le rendu, d'autres types de classes pourraient mieux fonctionner même pour CSG.

Appréciez les commentaires @donmccurdy @WestLangley @Mugen87 .
Je vais chercher à le faire fonctionner nativement avec BufferGeometry en préparation de la dépréciation de Geometry.
Je souhaite également ajouter une prise en charge de la couleur et du matériel/groupe.

@enricomarino En fait, je prévoyais de vous envoyer un message pour voir ce que vous prévoyiez de faire avec l'organisation alors que j'envisageais de le retirer de mon nom d'utilisateur et de diviser un peu les choses. Vous ne savez pas encore à quoi cela devrait ressembler, mais souhaitez-vous m'ajouter à l'organisation pour le moment ?

@mrdoob bien sûr !

Salut à tous.. J'ai fait une démo plus brillante de la bibliothèque CSG, et corrigé un bug dans la génération normale, si quelqu'un est intéressé :

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

et le gh :
https://github.com/manthrax/THREE-CSGMesh

J'envisage d'ajouter une version d'optimisation de BufferGeometry et quelque chose qui préserve la séparation des matériaux entre les entrées, afin qu'elle puisse être directement utilisée pour quelque chose comme un logiciel SCAD.

J'ai juste pensé que je laisserais tomber ces liens ici pour m'inspirer et au cas où quelqu'un voudrait les approfondir. Je suis tombé sur cet outil CSG dans Unity qui possède des performances et des capacités de création de contenu vraiment impressionnantes :

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

Et il semble que le créateur ait écrit quelques articles sur la mise en œuvre (il y a six parties au total) :

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

J'ai porté une bibliothèque csg et cela fonctionne très bien en ce moment.
Je peux mettre à jour ce projet si besoin.

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

Une mise à jour pour ceci?

la bibliothèque de @manthrax fonctionne parfaitement !

@manthrax

Je cherche à ajouter une version d'optimisation de BufferGeometry

Utilise-t-il THREE.Geometry en ce moment ?

donc je ne pouvais pas le laisser reposer et j'ai regardé https://github.com/jscad/csg.js qui est la bibliothèque CSG de base de https://openjscad.org/
Je l'ai consulté et j'ai écrit mon propre adaptateur TROIS BufferGeometry et il est en fait BEAUCOUP plus rapide que la bibliothèque sur laquelle @manthrax a basé son code. (et il prend en charge la coloration des sommets)

pour le même dé qui utilise des sphères à 32 faces pour découper les yeux,
THREE-CSGMesh a pris 112 secondes,
jscad/csg a pris 2,5 secondes !!!

c'est 45 fois plus rapide...

J'envisage d'en faire une bibliothèque, dites moi ce que vous en pensez...

@SebiTimeWaster

Est-il disponible dans un dépôt n'importe où? On dirait que csg.js est aussi une licence MIT.

@mrdoob

Je cherche à ajouter une version d'optimisation de BufferGeometry

Utilise-t-il THREE.Geometry pour le moment ?

En regardant brièvement la base de code, il semble que oui, elle utilise toujours THREE.Geometry mais uniquement sur l'entrée et la sortie pour la convertir vers et depuis une structure interne pour les opérations CSG.

pas encore, s'il y a de l'intérêt j'en créerais un...

pas encore, s'il y a de l'intérêt j'en créerais un...

Heh je pense que ce fil est une preuve d'intérêt! Mais au moins, je suis intéressé à le vérifier si vous avez une version plus rapide. Je n'en ai plus besoin dans l'immédiat, mais je le ferai peut-être à l'avenir. Ce serait bien d'avoir accès à la bibliothèque pour CSG en trois, même si ce n'est qu'un exemple rapide pour savoir comment démarrer avec csg.js en trois.js.

pas encore, s'il y a de l'intérêt j'en créerais un...

Oui, un exemple/une solution officielle pour csg serait génial !

Je suis dessus...

J'en ai principalement fini avec un port BufferGeometry du
A besoin d'un peu de rangement, que je vais trouver du temps pour cette semaine, alors je vais le partager ici.

@mrdoob voulez-vous une bibliothèque CSG dans ce repo ? Si c'est le cas, je ferai un PR. Sinon, je vais faire un nouveau repo pour cela.

@SebiTimeWaster Je n'avais pas vu votre commentaire avant maintenant, oups. Plus on est de fous je suppose 😁

@looeee est-ce un port complet ou juste un wrapper ? Il semblait que csg.js devait de toute façon convertir les données en de nombreuses structures internes pour les opérations CSG, n'est-ce pas ? Il semblait que vous deviez simplement pouvoir convertir vers et depuis BufferGeometry à l'entrée et à la sortie.

@looeee voulez-vous dire un nouveau dépôt ici ?
serait intéressant mais je risque de supposer que mrdoob n'est pas encore prêt.

Je ne suis pas sûr que ce référentiel soit le bon endroit pour maintenir une bibliothèque CSG complète... peut-être ajouter un exemple, en utilisant une version minifiée de la bibliothèque CSG dans examples/js(m)/libs/ ?

Alors, voici mon point de vue sur le tout (il est basé sur https://github.com/jscad/csg.js):
https://github.com/SebiTimeWaster/three-csg
avec un exemple (stress test) :
https://sebitimewaster.github.io/three-csg/examples/example2.html

@looeee et si vous

@looeee est-ce un port complet ou juste un wrapper ?

J'ai une branche qui est à peu près juste un wrapper pour csg.js avec quelques changements mineurs :

  • modularisé le code
  • aligné les noms de fonction sur three.js et utilisé Vector3 au lieu d'une classe vectorielle personnalisée,
  • améliorations mineures de l'API

Cette branche est terminée, et je la partagerai une fois que je l'aurai un peu rangé. Cependant, c'est lent.

J'ai une autre branche où je travaille sur des améliorations de vitesse. Il y a beaucoup à faire ici, principalement à faire avec le calcul des premiers outs pour éviter autant de traitement que possible.

@SebiTimeWaster , j'ai

@SebiTimeWaster votre implémentation

Voici à quoi ressemblent les coordonnées de texture dans le mien.

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

Voici le dépôt :
https://github.com/looeee/threejs-csg

Il existe deux branches, _master_, qui est assez proche d'un wrapper de csg.js comme je l'ai décrit ci-dessus, et _advanced_. Là, j'ai exprimé toutes les opérations CSG en utilisant les méthodes LogicalOR et complement :

Syndicat : _(Gauche || Droite)_
Soustraire : _!(!Left || Right)_
Intersection : _!(!Gauche || !Droite)_

Cela rend les opérations un peu plus faciles à raisonner et permet également de soustraire et de se croiser légèrement plus rapidement. Il existe également des expériences consistant à effectuer une fusion et une suppression de haut niveau basées sur un cadre de délimitation avant d'effectuer les opérations CSG complètes, ce qui donne des accélérations décentes lors de l'exécution de plusieurs opérations à la fois.

Une meilleure approche, cependant, et ce qui semble être le plus utilisé dans d'autres implémentations, consiste à créer un BVH de géométries et d'opérations et à parcourir l'arbre pour générer la géométrie finale.

@SebiTimeWaster pour l'instant, j'ai décidé d'étudier des implémentations alternatives de CSG plutôt que d'aller plus loin avec celle-ci. S'il y a quelque chose d'utile dans mon repo, n'hésitez pas à le prendre.

EDIT : Ce tweet résume exactement mes sentiments

Il semble que la source du plugin Realtime CSG pour Unity que j'ai lié ci-dessus a été publiée sur Github et est sous licence MIT si quelqu'un est intéressé à approfondir cela :

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

Il a également quelques articles techniques sur son plugin CSG sur son blog, si vous revenez un peu en arrière :

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

Il y a également eu une nouvelle conférence GDC de sa part en mars de cette année sur CSG :

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

Je ne me suis pas moqué de son travail dans Unity moi-même, mais la performance dans les vidéos est excellente.

Il y a aussi celui-ci qui est basé sur Unity CSG mais qui est une application C# autonome, cela pourrait être plus facile à comprendre. Il est un peu plus ancien, donc il n'est peut-être pas aussi développé.

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

Le moteur Godot a également du CSG que j'ai testé et il a des performances très décentes. doc / code .

Il y a aussi Carve CSG et xcsg (qui utilise Carve) et Cork .

Je me demande si la meilleure solution ici serait de prendre l'une de ces solutions existantes (probablement Carve puisqu'il s'agit de CPP et semble être utilisé dans de nombreux autres packages) et de la convertir en Wasm.

Je me demande si la meilleure solution ici serait de prendre l'une de ces solutions existantes (probablement Carve puisqu'il s'agit de CPP et semble être utilisé dans de nombreux autres packages) et de la convertir en Wasm.

Je connais moins emscripten mais cela ne semble pas être une mauvaise approche. Il semble que Carve et Cork soient sous licence GPL et LGPL, c'est donc quelque chose à garder à l'esprit.

Apparemment, Blender vient de mettre à jour son outil d'opérations booléennes et, selon ce tweet, utilise les approches de cet article :

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

Cette page vous a été utile?
0 / 5 - 0 notes