Three.js: 构造实体几何 (CSG) 支持

这个周末我可以试一试……让我看看进展如何。

嗯，我添加了一个 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 的所有者，看看他们的计划是什么，或者他们是否愿意接受 PR 来支持 BufferGeometry？ 我对这个也有点兴趣。

似乎没有人问那里关于 BufferGeometry ......

为什么不把话题转移到https://github.com/chandlerprall/ThreeCSG？ 我敢打赌@chandlerprall会很高兴看到对他的项目如此感兴趣😊

FWIW 在 ThreeCSG 中有一个更新的v1分支，它是一个完整的重写和清理。 需要优化平面选择器算法，然后准备npm发布。 如果有人想贡献额外的功能，我会很高兴（另见 https://github.com/chandlerprall/ThreeCSG/issues/51）

供你参考：

除了https://github.com/chandlerprall/ThreeCSG之外，最近的 Discourse 论坛主题中还提到了以下 CSG 库：

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

对于这三个中的任何一个是否应该作为three.js的CSG支持的基础，我没有意见。

我对 madebyevan CSG 库进行了另一次转换，你们可能会发现它很有用..它适用于当前的三个 (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

我创建了组织https://github.com/threejs来托管与 Three.js 相关的项目。

其实当时我想把“three.js”mono repo拆分成多个repo，
例如“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 网格。它输出 Geometry，可以将其转换为 BufferGeometry

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

所以我不知道是否真的需要额外的辅助函数，因为转换非常简单。

不幸的是， Geometry -> BufferGeometry转换非常有损 - 除了添加（白色）顶点颜色之外，它还会取消索引索引几何并增加顶点数。 最终输出为 BufferGeometry 可能是理想的。

CSG 操作不关心索引。 无论如何，它都会对每个三角形运行并输出 3 个唯一的顶点。

它也不处理顶点颜色。

优化生成的网格是可以/应该使用其他工具/辅助函数来完成的，恕我直言。

否则它只是复制实际上应该在一个单独的库中的愚蠢的功能。

我同意在 THREE.js 中优化几何的实用程序方面肯定有空间。 该问题不仅仅适用于 BufferGeometry。 但是在运行时通过 js 对大缓冲区应用优化是繁琐的操作......以及你应用的任何技术来降低复杂性，即八叉树/kdtree 无论如何......变得非常复杂并且需要他们自己的一组参数化等等。

我觉得代码“复杂性/灵活性/实用性”与“针对 gpu 超优化”之间存在权衡，在非 javascript 设置中，您会针对后者进行优化，但在 js/web 场景中，您的目标是前者，只有当你决定需要追求后者时，你才会使用像 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的反馈。
我将研究使其与 BufferGeometry 一起使用，为 Geometry 弃用做准备。
我还想添加颜色和材料/组支持。

@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

并且看起来创建者已经写了几篇关于实现的文章（一共六部分）：

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的库运行完美！

@manthrax

我正在考虑添加一个 BufferGeometry 优化版本

它现在使用THREE.Geometry吗？

所以我不能让它休息，看着https://github.com/jscad/csg.js其中的核心是CSG库https://openjscad.org/
我浏览了它并编写了我自己的三个 BufferGeometry 适配器，它实际上比@manthrax基于他的代码的库

对于使用具有 32 个面的球体来切出眼睛的同一个骰子，
三 CSGMesh 耗时 112 秒，
jscad/csg 耗时 2.5 秒！！！

快了 45 倍……

我正在考虑用它创建一个库，让我知道你的想法......

@SebiTimeWaster

它可以在任何地方的回购中获得吗？ 看起来 csg.js 也是 MIT 许可证。

@mrdoob

我正在考虑添加一个 BufferGeometry 优化版本

目前是否使用 THREE.Geometry ？

简单地看一下代码库，看起来是的，它仍然使用 THREE.Geometry但只是在输入和输出上将其转换为 CSG 操作的内部结构。

还没有，如果有兴趣我会创建一个...

还没有，如果有兴趣我会创建一个...

嘿，我认为这个线程是兴趣的证据！ 但至少我有兴趣看看你是否有更快的版本。 我不再立即需要它，但我将来可能会需要它。 即使这只是一个关于如何在three.js 中开始使用csg.js 的快速示例，也可以在三个中访问CSG 库。

还没有，如果有兴趣我会创建一个...

是的，csg 的官方示例/解决方案会很棒！

我在这...

我主要完成了 @evanw 的csg.js的 BufferGeometry 端口。
需要整理一下，这周有空我会在这里分享的。

@mrdoob你想要这个 repo 中的 CSG 库吗？ 如果是这样，我会做一个公关。 否则，我会为它制作一个新的回购。

@SebiTimeWaster我之前没有看到你的评论，哎呀。 我猜越多越好😁

@looeee它是一个完整的端口还是只是一个包装器？ 看起来 csg.js 无论如何都必须将数据转换为 CSG 操作的许多内部结构，对吗？ 看起来您应该能够在进出的方式与 BufferGeometry 之间进行转换。

@looeee你的意思是这里有一个新的 repo 吗？
会很有趣，但我猜测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 改进

那个分支已经完成了，我整理一下再分享。 然而，它是sloooow。

我有另一个分支，我正在努力提高速度。 这里可以做很多事情，主要是计算提前退出，以避免尽可能多的处理。

@SebiTimeWaster ，我快速浏览了您的代码，您正在使用我认为的每个多边形的边界球体做这样的事情？ 当我找到时间时，我会尝试使用我的图书馆重新创建您的示例。

@SebiTimeWaster你的 csg 实现可以处理纹理坐标吗？

这是我的纹理坐标的外观。

这是回购：
https://github.com/looeee/threejs-csg

有两个分支，_master_，非常接近我上面描述的 csg.js 的包装器，以及 _advanced_。 我已经使用LogicalOR和complement方法表达了所有 CSG 操作：

联合：_(左||右)_
减法：_!(!Left || Right)_
相交：_!(!Left || !Right)_

这样做会使操作更容易推理，也使减法和相交稍微快一点。 在执行完整的 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 。

我想知道这里的最佳解决方案是否是采用这些现有解决方案之一（可能是 Carve，因为它是 CPP 并且似乎在许多其他包中使用）并将其转换为 Wasm。

我想知道这里的最佳解决方案是否是采用这些现有解决方案之一（可能是 Carve，因为它是 CPP 并且似乎在许多其他包中使用）并将其转换为 Wasm。

我对 emscripten 不太熟悉，但这听起来不错。 不过，看起来 Carve 和 Cork 是 GPL 和 LGPL 许可的，所以要记住这一点。

显然 Blender 刚刚更新了它的布尔运算工具，根据这条推文使用了本文中的方法：

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