Three.js: Suporte de Geometria Sólida Construtiva (CSG)

Posso tentar neste fim de semana ... deixe-me ver como corre.

Hum, eu adicionei um OrbitControls e inspecionando o resultado não parece muito correto. Tem certeza de que esta biblioteca foi suficientemente testada?
Por favor, faça alguns testes antes de tentar 'Bufferizar' 😉

Adicioná-lo à base de código do núcleo pode ser um pouco complicado, a versão atual ( v1 branch ) está em TypeScript. Funciona bem com r100 (e até r103 ) mil: exemplos

Não acho que empacotá-lo na pasta src/ seja a direção certa, mas atualizá-lo para suportar BufferGeometry parece promissor. Se a biblioteca foi bem testada, não tenho ideia. :)

Adicioná-lo à base de código do núcleo pode ser um pouco complicado, a versão atual ( v1 branch ) está em TypeScript. Funciona bem com r100 (e até r103 ) mil: exemplos

Portanto, é desenvolvido ativamente. Eu não vi essa etiqueta. E ... parece que a tag v1 suporta BufferGeometry! @ThreeDfish

Eu voto para não incluir recursos CSG neste repo. Melhor ThreeCSG é suportado se necessário.

Portanto, é desenvolvido ativamente. Eu não vi essa etiqueta. E ... parece que a tag v1 suporta BufferGeometry! @ThreeDfish

Acho que não, esta é a única menção de BufferGeometry na versão v1:

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

Alguém já tentou entrar em contato com o proprietário do ThreeCSG para ver quais são seus planos ou se está aberto a fazer RP para apoiar o BufferGeometry? Também estou um pouco interessado nisso.

Parece que ninguém perguntou lá sobre BufferGeometry ...

Por que não mudar a conversa para https://github.com/chandlerprall/ThreeCSG? Aposto que @chandlerprall ficaria feliz em ver tal interesse em seu projeto 😊

FWIW, há uma ramificação v1 mais recente em ThreeCSG que é uma reescrita e limpeza completa. Precisa otimizar o algoritmo do seletor de plano e, em seguida, está pronto para publicação npm. Eu ficaria emocionado se alguém quiser contribuir com recursos adicionais (consulte também https://github.com/chandlerprall/ThreeCSG/issues/51)

Para a sua informação:

Além de https://github.com/chandlerprall/ThreeCSG , as seguintes bibliotecas CSG foram mencionadas no recente tópico do fórum Discourse:

• https://evanw.github.io/csg.js/
• https://github.com/jscad/OpenJSCAD.org

Não tenho opinião se algum desses três deve servir como base para o suporte CSG do three.js.

Eu fiz outra conversão da biblioteca CSG madebyevan que vocês podem achar útil .. ela funciona com os três atuais (103) e consertei alguns problemas que tive com o módulo mais antigo lá fora. Ele permite buffergeometrias, mas apenas convertendo-as em geometrias internamente.

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

Espero que isso ajude alguém e fique à vontade para dar feedback / sugestões.

@manthrax Seu projeto seria uma boa adição ao seguinte tópico no fórum three.js para que as pessoas que estão procurando por um plugin possam realmente encontrá-lo👍

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

Impressionante! Não tenho certeza de como isso é viável, mas acho que qualquer uma dessas soluções se beneficiaria de alguns exemplos que demonstram o desempenho e os recursos de edição em tempo real como muitos editores de motores têm, agora.

Minha preferência pessoal é manter o CSG fora da biblioteca e desenvolvê-lo de forma independente.

Eu concordo com isso, mas pode ser útil ter um conjunto oficial de "repositórios relacionados". Criei uma organização que podemos usar para isso, se decidirmos ir em frente. github.com/threejs foi levado por @enricomarino , mas github.com/three-js estava lá. Vou transferir a propriedade para quem quer que seja, só percebi que era bom pular no nome!

Então, essa organização está à disposição de qualquer pessoa que queira criar projetos relacionados ao three.js que não se encaixem bem aqui.

https://github.com/three-js

Criei a organização https://github.com/threejs para hospedar projetos relacionados a three.js.

Na verdade, naquela época, pensei em dividir o repositório mono "three.js" em repositórios múltiplos,
como "threejs / core", "treejs / examples", "threejs / editor", "threejs / docs",
já que o "mrdoob / three.js" se tornou muito grande e pesado para baixar ...
mas essa é outra história...

Se desejar utilizá-lo, a organização está à sua disposição!

Adicionei uma demonstração e uma captura de tela à biblioteca:

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

Avise-me se alguém precisar de ajuda com isso!

@yomboprime @ThreeDfish
Adicionei uma captura de tela e uma demonstração à biblioteca CSG que transferi. Deixe-me saber se você achar isso útil.
https://github.com/manthrax/THREE-CSGMesh

@yomboprime @ThreeDfish
Adicionei uma captura de tela e uma demonstração à biblioteca CSG que transferi. Deixe-me saber se você achar isso útil.
https://github.com/manthrax/THREE-CSGMesh

@ThreeDfish Se você ainda estiver interessado, posso fazer uma função CSG.toBufferGeometry nesta biblioteca. O CSG ainda aceitaria geometria como entrada, mas a saída poderia ser geometria (para outras operações booleanas) ou BufferGeometry (saída final para renderização).
O que você acha @manthrax ?

@enricomarino, você pode me dar acesso a github.com/threejs? Eu gostaria de configurar um repo com modelos de teste para LWOLoader . Aliás, você é uma pessoa difícil de encontrar detalhes de contato para 😛

@yomboprime Não tenho certeza do que você está perguntando ..

A versão que portei aceita tanto BufferGeometry ou malha de geometria .. ela produz geometria, que pode ser convertida em BufferGeometry com

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

Portanto, não sei se realmente há necessidade de uma função auxiliar extra, pois a conversão é bastante direta.

A conversão de Geometry -> BufferGeometry infelizmente tem muitas perdas - ela desindexará a geometria indexada e aumentará a contagem de vértices, além de adicionar cores de vértice (brancas). A saída final como BufferGeometry provavelmente seria ideal.

A operação CSG não se preocupa com a indexação. Ele opera e produz 3 verts exclusivos por triângulo, não importa o quê.

Ele também não lida com cores de vértice.

Otimizar a malha resultante é algo que pode / deve ser feito com outras ferramentas / funções auxiliares, imho.

Caso contrário, ele está apenas duplicando funcionalidades idiotas que deveriam estar em uma biblioteca separada.

Eu concordo que definitivamente há um espaço em termos de um utilitário para otimizar a geometria em THREE.js. O problema se aplica a mais do que apenas BufferGeometry. Mas aplicar otimizações a grandes buffers, via js, em tempo de execução, são operações complicadas .. e quaisquer técnicas que você aplicar para reduzir a complexidade, ou seja, octtree / kdtree qualquer .. tornam-se complicadas muito rápido e requerem seu próprio conjunto de paramaterizações etc.

Eu sinto que há uma troca entre o código "complexidade / flexibilidade / utilidade" vs "ultra otimizado para o gpu" que em uma configuração não javascript, você otimizaria para o último, mas em um cenário js / web, você tentaria o primeiro, e somente se você decidir que precisa seguir o último, você usaria algo como wabasm para processar os dados.

Sem mencionar que essas operações CSG já são muito lentas .. A demonstração no meu git é quase interativa com apenas 10 operações por quadro em uma caixa e uma esfera de 8 subdiv ...

Dito isso ... acabei de ver a demonstração do babylon csg ... e tenho certeza que é uma versão da mesma biblioteca,
E também não está sendo feito em tempo real nessa demonstração.
https://www.babylonjs.com/demos/csg/

Aqui está a versão que converti fazendo um exemplo mais simples em tempo real:

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

Concordo que as operações CSG não são especialmente amigáveis ​​em tempo real e que a biblioteca não precisa fingir que sim. No entanto, observe que a geometria será eventualmente removida da biblioteca three.js e movida para examples/js/* e examples/jsm/* . Nesse ponto, os usuários quase certamente terão mais facilidade em usar BufferGeometry como resultado. Se o código CSG tiver uma dependência interna da geometria, isso parece bom, é claro.

Eu diria assim ...

Se você deseja encadear as operações, inserir Geometry e gerar Geometry faz sentido, já que CSG opera apenas nessa estrutura de dados.

Mas esteja ciente de que Geometry logo não será mais renderizável, então a saída terá que ser convertida para BufferGeometry na etapa final.

@manthrax A implementação do QuickHull usa um conjunto próprio de classes para que as operações topológicas sejam feitas com mais facilidade. Por exemplo, uma implementação de meia-borda é muito melhor do que trabalhar com Geometry neste contexto. Como Geometry é focado em renderização, outros tipos de classes podem funcionar melhor até mesmo para CSG.

Agradeço o feedback @WestLangley @ Mugen87 .
Vou tentar fazer com que funcione nativamente com BufferGeometry na preparação para a descontinuação do Geometry.
Também quero adicionar cor e suporte de material / grupo.

@enricomarino Na verdade, eu estava planejando enviar uma mensagem para você ver o que você planejava fazer com a organização, pois estava pensando em removê-la do meu nome de usuário e dividir um pouco as coisas. Ainda não tenho certeza de como deve ser, mas gostaria de me adicionar à organização por enquanto?

@mrdoob com certeza!

Olá a todos .. Fiz uma demonstração mais brilhante da biblioteca CSG e consertei um bug na geração normal, se alguém estiver interessado:

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

e o gh:
https://github.com/manthrax/THREE-CSGMesh

Estou pensando em adicionar uma versão de otimização BufferGeometry e algo que preserva a separação de material entre as entradas, para que possa ser usado diretamente para algo como um software SCAD.

Apenas pensei em colocar esses links aqui para obter inspiração e no caso de alguém querer realmente mergulhar neles. Eu encontrei esta ferramenta CSG no Unity que tem alguns recursos realmente impressionantes de desempenho e criação de conteúdo:

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

E parece que o criador escreveu alguns artigos sobre a implementação (há seis partes no total):

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

Transformei uma biblioteca csg e ela está funcionando muito bem no momento.
Posso atualizar este projeto, se necessário.

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

alguma atualização disso?

a biblioteca de @manthrax funciona perfeitamente!

@manthrax

Estou pensando em adicionar uma versão de otimização BufferGeometry

Ele está usando THREE.Geometry no momento?

então eu não poderia deixar isso descansar e olhei em https://github.com/jscad/csg.js que é a biblioteca CSG central de https://openjscad.org/
Eu naveguei e escrevi meu próprio adaptador THREE BufferGeometry e é na verdade MUITO mais rápido do que a biblioteca que @manthrax baseou seu código. (e suporta coloração de vértice)

para o mesmo dado que usa esferas com 32 faces para cortar os olhos,
THREE-CSGMesh levou 112 segundos,
jscad / csg levou 2,5 segundos !!!

que é 45 vezes mais rápido ...

estou pensando em criar uma biblioteca a partir disso, deixe-me saber o que você acha disso ...

@SebiTimeWaster

Ele está disponível em um repo em qualquer lugar? Parece que csg.js também é uma licença do MIT.

@mrdoob

Estou pensando em adicionar uma versão de otimização BufferGeometry

Ele está usando THREE.Geometry no momento?

Olhando brevemente para a base de código, parece que sim, ainda usa THREE.Geometry, mas apenas na entrada e na saída para convertê-la de e para uma estrutura interna para operações CSG.

ainda não, se houver interesse eu criaria um ...

ainda não, se houver interesse eu criaria um ...

Heh eu acho que esse tópico é uma evidência de interesse! Mas pelo menos estou interessado em verificar se você tem uma versão mais rápida. Eu não tenho mais uma necessidade imediata dele, mas terei no futuro. Seria bom ir para a biblioteca para CSG em três, mesmo que seja apenas um exemplo rápido de como começar a usar csg.js em three.js.

ainda não, se houver interesse eu criaria um ...

Sim, um exemplo / solução oficial para csg seria ótimo!

Eu estou trabalhando nisso...

Eu já terminei com uma porta BufferGeometry do
Precisa de um pouco de arrumação, que encontrarei tempo para esta semana, depois compartilharei aqui.

@mrdoob , você quer uma biblioteca CSG neste repo? Se for assim, farei um PR. Caso contrário, farei um novo repositório para ele.

@SebiTimeWaster Não vi seu comentário antes, opa. Quanto mais, melhor eu acho 😁

@looeee é uma porta completa ou apenas um invólucro? Parecia que csg.js tinha que converter dados em muitas estruturas internas para operações CSG de qualquer maneira, certo? Parecia que você deveria ser capaz de converter de e para BufferGeometry na entrada e saída.

@looeee , você quer dizer um novo repo aqui ?
seria interessante, mas acho que mrdoob ainda não está pronto.

Não tenho certeza se este repositório é o lugar certo para manter uma biblioteca CSG completa ... talvez adicionar um exemplo, usando uma compilação reduzida da biblioteca CSG em examples/js(m)/libs/ ?

Então, aqui está minha opinião sobre a coisa toda (é baseada em https://github.com/jscad/csg.js):
https://github.com/SebiTimeWaster/three-csg
com um exemplo (teste de estresse):
https://sebitimewaster.github.io/three-csg/examples/example2.html

@looeee, que tal você implementar o mesmo teste de estresse, então podemos comparar e otimizar nosso código um contra o outro ...

@looeee é uma porta completa ou apenas um invólucro?

Eu tenho um branch que é praticamente apenas um invólucro para csg.js com algumas pequenas alterações:

• modularizou o código
• alinhou nomes de função a three.js e usou Vector3 vez de uma classe de vetor personalizada,
• pequenas melhorias de API

Esse galho está completo e vou compartilhá-lo assim que arrumar um pouco. No entanto, está lento.

Eu tenho outro ramo onde estou trabalhando em melhorias de velocidade. Há muito que pode ser feito aqui, principalmente com relação ao cálculo das primeiras saídas para evitar o máximo de processamento possível.

@SebiTimeWaster , dei uma olhada rápida em seu código e você está fazendo algo assim usando esferas delimitadoras para cada polígono, eu acho? Tentarei recriar seu exemplo usando minha biblioteca quando tiver tempo.

@SebiTimeWaster pode sua implementação csg lidar com coordenadas de textura?

Veja como as coordenadas de textura ficam na minha.

Aqui está o repo:
https://github.com/looeee/threejs-csg

Existem duas ramificações, _master_, que é muito parecido com um invólucro de csg.js como descrevi acima, e _advanced_. Lá, expressei todas as operações CSG usando os métodos LogicalOR e complement :

União : _ (Esquerda || Direita) _
Subtrair : _! (! Esquerda || Direita) _
Cruze : _! (! Esquerda ||! Direita) _

Isso torna as operações um pouco mais fáceis de raciocinar e também torna a subtração e a interseção um pouco mais rápidas. Existem também alguns experimentos para fazer uma mesclagem e seleção com base na caixa delimitadora de alto nível antes de fazer as operações CSG completas, o que dá alguns aceleramentos decentes ao realizar muitas operações ao mesmo tempo.

Uma abordagem melhor, no entanto, e o que parece ser mais usado em outras implementações, é criar um BVH de geometrias e operações e percorrer a árvore para gerar a geometria final.

@SebiTimeWaster, por enquanto, decidi olhar para implementações alternativas de CSG em vez de ir mais longe com esta. Se houver algo útil no meu repositório, fique à vontade para aceitá-lo.

EDIT: Este tweet resume meus sentimentos exatamente

Parece que a fonte do plug-in CSG em tempo real para Unity que vinculei acima foi postada no Github e é licenciada pelo MIT se alguém estiver interessado em se aprofundar nisso:

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

Ele também tem alguns posts técnicos sobre seu plugin CSG em seu blog, se você voltar um pouco:

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

Também houve uma palestra mais recente dele na GDC em março deste ano no CSG:

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

Eu não baguncei o trabalho dele no Unity, mas o desempenho nos vídeos parece ótimo.

Também existe este que é baseado no Unity CSG, mas é um aplicativo C # autônomo, pode ser mais fácil de entender. É um pouco mais antigo, portanto, pode não ser tão desenvolvido.

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

O motor Godot também tem CSG que testei e tem um desempenho muito decente. docs / código .

Há também Carve CSG e xcsg (que usa Carve) e Cork .

Eu me pergunto se a melhor solução aqui seria pegar uma dessas soluções existentes (provavelmente Carve, pois é CPP e parece ser usado em muitos outros pacotes) e convertê-la para Wasm.

Eu me pergunto se a melhor solução aqui seria pegar uma dessas soluções existentes (provavelmente Carve, pois é CPP e parece ser usado em muitos outros pacotes) e convertê-la para Wasm.

Estou menos familiarizado com o emscripten, mas isso não parece uma abordagem ruim. Parece que o Carve e o Cork têm licença GPL e LGPL, então isso é algo para se manter em mente.

Aparentemente o Blender acabou de atualizar sua ferramenta de operações booleanas e de acordo com este tweet usa abordagens deste artigo:

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