Three.js: CSG(Constructive Solid Geometry) 지원

이번 주말에 시도해 볼 수 있습니다... 어떻게 되는지 보겠습니다.

음, OrbitControls를 추가했고 결과를 검사했는데 그다지 정확하지 않은 것 같습니다. 이 라이브러리가 충분히 테스트되었습니까?
'버퍼라이즈'하기 전에 몇 가지 테스트를 해보세요 😉

핵심 코드 기반에 추가하는 것은 약간 복잡할 수 있습니다. 현재 버전( v1 branch )은 TypeScript에 있습니다. r100 (심지어 r103 )와도 잘 작동합니다: 예

src/ 폴더에 묶는 것이 올바른 방향이라고 생각하지 않지만 BufferGeometry를 지원하도록 업데이트하는 것은 유망한 것 같습니다. 라이브러리가 잘 테스트되었는지 여부는 모르겠습니다. :)

핵심 코드 기반에 추가하는 것은 약간 복잡할 수 있습니다. 현재 버전( v1 branch )은 TypeScript에 있습니다. r100 (심지어 r103 )와도 잘 작동합니다: 예

그래서 적극적으로 개발하고 있습니다. 나는 그 태그를 보지 못했다. 그리고... v1 태그가 BufferGeometry를 지원하는 것 같습니다! @ThreeDfish

나는 이 리포지토리에 CSG 기능을 포함하지 않기로 투표합니다. 필요한 경우 더 나은 ThreeCSG 가 지원됩니다.

그래서 적극적으로 개발하고 있습니다. 나는 그 태그를 보지 못했다. 그리고... v1 태그가 BufferGeometry를 지원하는 것 같습니다! @ThreeDfish

나는 그렇게 생각하지 않습니다. 이것은 v1 버전에서 BufferGeometry 에 대한

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

누구든지 ThreeCSG 소유자에게 연락하여 계획이 무엇인지 확인하거나 BufferGeometry를 지원하기 위해 PR을 받을 의사가 있는지 확인해본 사람이 있습니까? 저도 이것에 약간 관심이 있습니다.

아무도 BufferGeometry에 대해 묻지 않은 것 같습니다 ...

대화를 https://github.com/chandlerprall/ThreeCSG 로 @chandlerprall 이 그의 프로젝트에 관심을 갖게 되어 기쁠 것입니다 😊

FWIW에는 완전한 재작성 및 정리인 ThreeCSG의 최신 v1 분기가 있습니다. 평면 선택기 알고리즘을 최적화해야 npm 게시할 준비가 됩니다. 추가 기능을 제공하고 싶은 사람이 있다면 기쁠 것입니다(https://github.com/chandlerprall/ThreeCSG/issues/51 참조).

귀하의 정보:

https://github.com/chandlerprall/ThreeCSG 외에도 다음 CSG 라이브러리가 최근 Discourse 포럼 스레드에서 언급되었습니다.

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

이 세 가지 중 어느 것이 three.js의 CSG 지원을 위한 기반이 되어야 하는지에 대해서는 의견이 없습니다.

나는 나중에 유용하게 사용할 수 있는 madebyevan CSG 라이브러리의 또 다른 변환을 수행했습니다. 현재 3개(103)에서 작동하며 이전 모듈에서 발생했던 몇 가지 문제를 수정했습니다. 버퍼 지오메트리를 허용하지만 내부적으로 지오메트리로 변환해야만 합니다.

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

이것이 누군가를 돕고 피드백/제안을 자유롭게 제공하기를 바랍니다.

@manthrax 귀하의 프로젝트는 three.js 포럼의 다음 스레드에 추가되면 플러그인을 찾는 사람들이 실제로 찾을 수 있을 것입니다👍

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

엄청난! 얼마나 실현 가능한지는 잘 모르겠지만, 현재 많은 엔진 편집자들이 가지고 있는 것과 같은 성능과 실시간 편집 기능을 보여주는 몇 가지 예에서 이러한 솔루션이 도움이 될 것이라고 생각합니다.

내 개인적인 선호는 CSG를 ​​라이브러리에서 제외하고 독립적으로 개발하는 것입니다.

나는 이것에 동의하지만 "관련 리포지토리"의 공식 세트를 갖는 것이 유용할 수 있습니다. 우리가 계속 진행하기로 결정하면 이를 위해 사용할 수 있는 조직을 만들었습니다. github.com/threejs 은 @enricomarino 가 가져갔지만 github.com/three-js 이(가) 거기에 있었습니다. 나는 소유권을 누구에게나 양도할 것입니다. 이름에 뛰어드는 것이 좋다고 생각했습니다!

따라서 이 조직은 여기에 적합하지 않은 three.js와 관련된 프로젝트를 만들고자 하는 모든 사람이 사용할 수 있습니다.

https://github.com/three-js

저는 three.js와 관련된 프로젝트를 호스팅하기 위해 https://github.com/threejs 라는 조직을 만들었습니다.

사실 당시에는 "three.js" 모노 레포를 여러 레포로 나눌 생각이었는데,
"threejs/core", "treejs/examples", "threejs/editor", "threejs/docs",
"mrdoob/three.js"가 다운로드하기에 매우 크고 무거워졌기 때문에...
그러나 이것은 다른 이야기입니다 ...

당신이 그것을 사용하고 싶다면 조직은 당신의 처분에 있습니다!

라이브러리에 데모와 스크린샷을 추가했습니다.

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

도움이 필요한 사람이 있으면 알려주세요!

@yomboprime @ThreeDfish
포팅한 CSG 라이브러리에 스크린샷과 데모를 추가했습니다. 유용하다고 생각되면 알려주십시오.
https://github.com/manthrax/THREE-CSGMesh

@yomboprime @ThreeDfish
포팅한 CSG 라이브러리에 스크린샷과 데모를 추가했습니다. 유용하다고 생각되면 알려주십시오.
https://github.com/manthrax/THREE-CSGMesh

@ThreeDfish 그래도 관심이 있다면 이 라이브러리에서 CSG.toBufferGeometry 함수를 만들 수 있습니다. CSG는 여전히 Geometry를 입력으로 허용하지만 출력은 Geometry(추가 부울 연산의 경우) 또는 BufferGeometry(렌더링을 위한 최종 출력)일 수 있습니다.
@manthrax 는 어떻게 생각

@enricomarino github.com/threejs에 대한 액세스 권한을 줄 수 있습니까? LWOLoader 대한 테스트 모델로 리포지토리를 설정하고 싶습니다. 😛 연락처를 찾기 힘든 분이시군요.

@yomboprime 뭘 물어

내가 포팅한 버전은 BufferGeometry 또는 Geometry 메쉬를 모두 허용합니다. BufferGeometry로 변환할 수 있는 Geometry를 출력합니다.

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

그래서 변환이 매우 간단하기 때문에 추가 도우미 기능이 정말로 필요한지 모르겠습니다.

Geometry -> BufferGeometry 변환은 불행히도 손실이 매우 큽니다. (흰색) 꼭짓점 색상을 추가하는 것 외에도 인덱스된 지오메트리를 인덱스 해제하고 꼭짓점 수를 늘립니다. BufferGeometry로 최종 출력하는 것이 이상적일 것입니다.

CSG 작업은 인덱싱에 대해 신경 쓰지 않습니다. 그것은 무엇이든 상관없이 삼각형당 3개의 고유한 버텍스에서 작동하고 출력합니다.

또한 정점 색상을 처리하지 않습니다.

결과 메쉬를 최적화하는 것은 다른 도구/도우미 기능인 imho를 사용하여 수행할 수 있거나 수행해야 하는 것입니다.

그렇지 않으면 실제로 별도의 라이브러리에 있어야 하는 멍청한 기능을 복제하는 것입니다.

THREE.js에서 지오메트리를 최적화하기 위한 유틸리티 측면에서 분명히 공간이 있다는 데 동의합니다. 문제는 BufferGeometry 이상에 적용됩니다. 그러나 런타임에 js를 통해 대형 버퍼에 최적화를 적용하는 것은 복잡한 작업입니다. 그리고 복잡성을 줄이기 위해 적용하는 모든 기술(예: octtree/kdtree 무엇이든 .. 꽤 빨리 복잡해지고 자체 매개변수화 세트가 필요합니다.

코드 "복잡성/유연성/유틸리티"와 "gpu에 최적화된 울트라 최적화" 사이에는 자바스크립트가 아닌 설정에서는 후자에 최적화되지만 js/웹 시나리오에서는 전자이고 후자를 추구해야 한다고 결정한 경우에만 wabasm과 같은 것을 사용하여 데이터를 처리합니다.

말할 것도 없이 이러한 CSG 작업은 이미 꽤 느립니다. 내 git의 데모는 상자와 8개의 하위 영역에서 프레임당 10개의 작업으로 거의 상호 작용하지 않습니다...

즉.. 방금 babylon csg 데모를 보았고 .. 정확히 동일한 라이브러리의 포트라고 확신합니다.
그리고 그 데모에서도 실시간으로 수행되지 않습니다.
https://www.babylonjs.com/demos/csg/

다음은 실시간으로 더 간단한 예제를 수행하여 변환한 버전입니다.

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

나는 CSG 작업이 특히 실시간 친화적이지 않으며 도서관이 그런 척 할 필요가 없다는 데 동의합니다. 그러나 Geometry는 결국 three.js 라이브러리에서 제거되고 examples/js/* 및 examples/jsm/* 됩니다. 그 시점에서 사용자는 결과적으로 BufferGeometry를 사용하는 것이 더 쉬울 것입니다. CSG 코드에 Geometry에 대한 내부 종속성이 있는 경우에는 당연히 괜찮아 보입니다.

이렇게 말할텐데...

당신이 입력, 체인 운영하려면 Geometry 출력하는 Geometry CSG는 데이터 구조에서만 작동하기 때문에, 의미가 있습니다.

그러나 Geometry 는 곧 더 이상 렌더링할 수 없으므로 최종 단계에서 출력을 BufferGeometry 로 변환해야 합니다.

@manthrax QuickHull 구현은 고유한 클래스 집합을 사용하므로 토폴로지 작업을 더 쉽게 수행할 수 있습니다. 예를 들어 하프 에지 구현은 이 컨텍스트에서 Geometry 로 작업하는 것보다 훨씬 낫습니다. Geometry 는 렌더링에 중점을 두고 있으므로 CSG에서도 다른 유형의 클래스가 더 잘 작동할 수 있습니다.

피드백 @donmccurdy @WestLangley @Mugen87에 감사
Geometry 지원 중단에 대비하여 BufferGeometry와 함께 기본적으로 작동하도록 하는 방법을 살펴보겠습니다.
또한 색상 및 재료/그룹 지원도 추가하고 싶습니다.

@enricomarino 사실, 나는 내 사용자 이름에서 그것을 옮기고 일을 조금 나누는 것을 고려하면서 조직으로 무엇을 할 계획인지 확인하기 위해 메시지를 보낼 계획이었습니다. 어떻게 보일지 아직 확실하지 않지만 지금은 저를 조직에 추가하시겠습니까?

@mrdoob 확실히!

안녕하세요.. CSG 라이브러리의 더 멋진 데모를 만들고 관심 있는 사람이 있으면 일반 세대에서 버그를 수정했습니다.

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

그리고 gh:
https://github.com/manthrax/THREE-CSGMesh

BufferGeometry 최적화 버전과 입력 간의 재료 분리를 유지하는 것을 추가하여 SCAD 소프트웨어와 같은 것에 직접 사용할 수 있도록 하는 방법을 찾고 있습니다.

영감을 얻기 위해 그리고 누군가가 정말로 깊이 파고 싶어할 경우를 대비하여 이 링크를 여기에 놓을 것이라고 생각했습니다. Unity에서 정말 인상적인 성능과 콘텐츠 생성 기능을 제공하는 이 CSG 도구를 발견했습니다.

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

그리고 작성자가 구현에 대한 몇 가지 기사를 작성한 것 같습니다(총 6개 부분이 있음).

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

csg 라이브러리를 이식했고 현재 매우 잘 작동합니다.
필요한 경우 이 프로젝트를 업데이트할 수 있습니다.

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

이에 대한 업데이트가 있습니까?

@manthrax 의 라이브러리는 완벽하게 작동합니다!

@만스락스

BufferGeometry 최적화 버전을 추가하려고 합니다.

현재 THREE.Geometry 를 사용하고 있습니까?

그래서 나는 그것을 쉬게 할 수 없었고 https://openjscad.org/ 의 핵심 CSG 라이브러리인 https://github.com/jscad/csg.js를 살펴보았습니다.
나는 그것을 브라우저화하고 내 자신의 3개의 BufferGeometry 어댑터를 작성했으며 실제로 @manthrax가 그의 코드를 기반으로 한 라이브러리보다 훨씬 빠릅니다. (그리고 꼭짓점 채색을 지원합니다)

32개의 면을 가진 구체를 사용하여 눈을 자르는 동일한 주사위의 경우,
THREE-CSGMesh는 112초가 걸렸고,
jscad/csg는 2.5초 걸렸습니다!!!

45배 빨라...

나는 그것에서 라이브러리를 만드는 것에 대해 생각하고 있습니다. 당신이 그것에 대해 어떻게 생각하는지 알려주십시오 ...

@SebiTimeWaster

어디서나 repo에서 사용할 수 있습니까? csg.js도 MIT 라이선스인 것 같습니다.

@mrdoob

BufferGeometry 최적화 버전을 추가하려고 합니다.

현재 THREE.Geometry를 사용하고 있습니까?

코드베이스를 간단히 살펴보면 예 처럼 보이지만 사용 합니다.

아직 관심이 있다면 만들겠습니다...

아직 관심이 있다면 만들겠습니다...

헤헤 이 스레드가 관심의 증거라고 생각합니다! 그러나 적어도 더 빠른 버전이 있는지 확인하는 데 관심이 있습니다. 더 이상 당장은 필요하지 않지만 나중에 필요할 수도 있습니다. three.js에서 csg.js를 시작하는 방법에 대한 간단한 예일지라도 CSG에 대한 라이브러리로 이동하는 것이 좋을 것입니다.

아직 관심이 있다면 만들겠습니다...

예, csg에 대한 공식 예제/솔루션은 훌륭할 것입니다!

알겠습니다...

나는 대부분 @evanw 의 끝났 습니다 .
약간의 정리가 필요합니다. 이번 주에 시간을 내서 여기에서 공유하겠습니다.

@mrdoob 이

@SebiTimeWaster 지금까지 귀하의 의견을 보지 못했습니다. 더 즐거운 것 같아요 😁

@looeee 는 전체 포트입니까 아니면 그냥 래퍼입니까? 어쨌든 csg.js는 CSG 작업을 위해 데이터를 많은 내부 구조로 변환해야 하는 것처럼 보였어요. 맞나요? 들어오고 나가는 길에 BufferGeometry로 또는 BufferGeometry에서 변환할 수 있어야 하는 것 같았습니다.

@looeee 여기 안의 새 저장소를 의미합니까?
흥미롭겠지만 mrdoob이 아직 준비되지 않은 것 같습니다.

이 저장소가 전체 CSG 라이브러리를 유지 관리하기에 적합한 장소인지 확신할 수 없습니다... examples/js(m)/libs/ 에서 CSG 라이브러리의 축소된 빌드를 사용하여 예제를 추가할까요?

그래서, 여기에 모든 것에 대한 나의 견해가 있습니다(https://github.com/jscad/csg.js를 기반으로 함):
https://github.com/SebiTimeWaster/three-csg
예를 들어(스트레스 테스트):
https://sebitimewaster.github.io/three-csg/examples/example2.html

@looeee 동일한 스트레스 테스트를 구현하면 코드를 서로 비교하고 최적화할 수 있습니다...

@looeee 는 전체 포트입니까 아니면 그냥 래퍼입니까?

몇 가지 사소한 변경 사항이 있는 csg.js용 래퍼에 불과한 분기가 하나 있습니다.

• 코드를 모듈화
• 함수 이름을 three.js에 정렬하고 사용자 정의 벡터 클래스 대신 Vector3 사용했습니다.
• 사소한 API 개선

그 브랜치는 완성되었고, 조금 정리되면 공유하겠습니다. 그러나, 그것은 느립니다.

속도 개선 작업을 하는 다른 지점이 있습니다. 가능한 한 많은 처리를 피하기 위해 조기 종료를 계산하는 것과 관련하여 여기에서 수행할 수 있는 많은 작업이 있습니다.

@SebiTimeWaster , 나는 당신의 코드를 간단히 살펴보았고 당신은 내가 생각하는 각 폴리곤에 대해 경계 구를 사용하여 이와 같은 일을 하고 있습니까? 시간을 찾을 때 내 라이브러리를 사용하여 예제를 다시 만들려고 합니다.

@SebiTimeWaster csg 구현이 텍스처 좌표를 처리할 수 있습니까?

다음은 텍스처 좌표가 내에서 어떻게 보이는지입니다.

리포지토리는 다음과 같습니다.
https://github.com/looeee/threejs-csg

위에서 설명한 것처럼 csg.js의 래퍼에 매우 가까운 _master_와 _advanced_라는 두 가지 분기가 있습니다. 거기에서 LogicalOR 및 complement 방법을 사용하여 모든 CSG 작업을 표현했습니다.

조합 : _(왼쪽 || 오른쪽)_
빼기 : _!(!왼쪽 || 오른쪽)_
교차 : _!(!왼쪽 || !오른쪽)_

그렇게 하면 연산을 추론하기가 조금 더 쉬워지고 빼기와 교차가 약간 더 빨라집니다. 또한 전체 CSG 작업을 수행하기 전에 높은 수준의 경계 상자 기반 병합 및 컬링을 수행하는 몇 가지 실험이 있는데, 이는 한 번에 많은 작업을 수행할 때 상당한 속도 향상을 제공합니다.

그러나 다른 구현에서 가장 많이 사용되는 더 나은 접근 방식은 기하 도형 및 작업의 BVH를 만들고 트리를 탐색하여 최종 기하 도형을 생성하는 것입니다.

@SebiTimeWaster 지금은 이것으로 더 나아가지 않고 대체 CSG 구현을 조사하기로 결정했습니다. 내 저장소에서 유용한 것이 있으면 자유롭게 가져갈 수 있습니다.

편집: 이 트윗은 내 감정을 정확히 요약합니다

위에 링크한 Unity용 Realtime CSG 플러그인의 소스가 Github에 게시되어 있고 이에 대해 자세히 알아보는 데 관심이 있는 사람이 있다면 MIT 라이선스를 받은 것 같습니다.

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

그는 또한 자신의 블로그에 CSG 플러그인에 대한 몇 가지 기술적인 게시물을 가지고 있습니다.

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

올해 3월 CSG에 대한 새로운 GDC 연설도 있었습니다.

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

Unity에서 직접 작업한 것은 아니지만 동영상의 성능은 훌륭해 보입니다.

Unity CSG를 ​​기반으로 하지만 독립 실행형 C# 앱인 이 앱도 있습니다. 이해하기 더 쉬울 수 있습니다. 다만 너무 오래되어서 개발이 안 될 수도 있습니다.

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

Godot 엔진은 또한 내가 테스트한 CSG를 ​​가지고 있으며 매우 괜찮은 성능을 가지고 있습니다. 문서 / 코드 .

Carve CSG 및 xcsg (Carve 사용) 및 Cork 도 있습니다.

여기에서 가장 좋은 솔루션은 이러한 기존 솔루션(CPP이고 다른 많은 패키지에서 사용되는 것으로 보이므로 Carve) 중 하나를 사용하여 Wasm으로 변환하는 것인지 궁금합니다.

여기에서 가장 좋은 솔루션은 이러한 기존 솔루션(CPP이고 다른 많은 패키지에서 사용되는 것으로 보이므로 Carve) 중 하나를 사용하여 Wasm으로 변환하는 것인지 궁금합니다.

나는 emscripten에 익숙하지 않지만 그것은 나쁜 접근 방식처럼 들리지 않습니다. Carve와 Cork는 GPL 및 LGPL 라이선스를 받은 것처럼 보이므로 염두에 두어야 할 사항입니다.

분명히 Blender는 부울 연산 도구를 업데이트했으며 이 트윗 에 따르면 이 문서의 접근 방식을 사용합니다.

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