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の所有者に連絡して、彼らの計画が何であるか、または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

これら3つのうちのどれかが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メッシュの両方を受け入れます。Geometryを出力します。これは、次のコマンドでBufferGeometryに変換できます。

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

したがって、変換は非常に簡単なので、追加のヘルパー関数が本当に必要かどうかはわかりません。

Geometry -> BufferGeometry変換は、残念ながらかなり損失があります。（白の）頂点の色を追加するだけでなく、インデックス付きのジオメトリのインデックスを解除し、頂点の数を増やします。 BufferGeometryとしての最終出力はおそらく理想的です。

CSG操作はインデックス付けを気にしません。 何があっても、三角形ごとに3つの固有の頂点を操作して出力します。

また、頂点の色も処理しません。

結果のメッシュを最適化することは、他のツール/ヘルパー関数、imhoで実行できる/実行する必要があるものです。

それ以外の場合は、実際には別のライブラリにあるはずのダム機能を複製しているだけです。

THREE.jsのジオメトリを最適化するためのユーティリティに関しては、間違いなくスペースがあることに同意します。 この問題は、BufferGeometry以外にも当てはまります。 しかし、実行時にjsを介して大規模なバッファーに最適化を適用することは、厄介な操作です。複雑さを軽減するために適用する手法、つまりocttree / kdtreeは非常に高速に複雑になり、独自のパラメーター化のセットが必要になります。

コード「複雑度/柔軟性/ユーティリティ」と「GPU用に超最適化」の間にはトレードオフがあるように感じます。JavaScript以外の設定では後者用に最適化されますが、js / webシナリオでは前者であり、後者を追求する必要があると判断した場合にのみ、wabasmなどを使用してデータを処理します。

言うまでもなく、これらのCSG操作はすでにかなり遅いです..私のgitのデモは、ボックスと8つのサブディビジョン球でフレームごとに10の操作しかなく、ほとんどインタラクティブではありません...

そうは言っても..私はちょうどbabyloncsgデモを見ました..そして私はそれがまったく同じライブラリの移植であるとかなり確信しています、
また、そのデモでもリアルタイムで実行されていません。
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でもうまく機能する可能性があります。

@WestLangley @ Mugen87 @donmccurdyのフィードバックを感謝しています。
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のライブラリは完璧に機能します！

@manthrax

BufferGeometry最適化バージョンの追加を検討しています

現在THREE.Geometryしていますか？

私はそれを休ませて、に見えたことができなかったので、 https://github.com/jscad/csg.jsのコアCSGライブラリであるhttps://openjscad.org/
私はそれをブラウザ化して、自分のTHREE BufferGeometryアダプターを作成しました。実際、 @ manthraxが彼のコードに基づいているライブラリよりもはるかに高速です。 （そしてそれは頂点の色付けをサポートします）

32面の球を使用して目を切り取る同じサイコロの場合、
THREE-CSGMeshは112秒かかりましたが、
jscad / csgは2.5秒かかりました!!!

それは45倍速いです...

私はそれからライブラリを作成することを考えています、あなたがそれについてどう思うか教えてください...

@SebiTimeWaster

どこのレポでも利用できますか？ csg.jsもMITライセンスのようです。

@mrdoob

BufferGeometry最適化バージョンの追加を検討しています

現在、THREE.Geometryを使用していますか？

コードベースを簡単に見ると、はい、まだTHREE.Geometryを使用しているように見え

まだ、興味があれば私はそれを作成します...

まだ、興味があれば私はそれを作成します...

このスレッドは興味のある証拠だと思います！ しかし、少なくとも私はあなたがより速いバージョンを持っているかどうかそれをチェックすることに興味があります。 すぐに必要になることはもうありませんが、将来的には必要になるかもしれません。 three.jsでcsg.jsを使い始める方法の簡単な例であっても、CSGのライブラリに3つで行くといいでしょう。

まだ、興味があれば私はそれを作成します...

はい、csgの公式の例/ソリューションは素晴らしいでしょう！

今してます...

私は主に@evanwのcsg.jsのBufferGeometryポートで終わりました。
少し片付けが必要です。今週の時間を見つけたら、ここで共有します。

@mrdoobこのリポジトリにCSGライブラリが必要ですか？ もしそうなら、私はPRをします。 それ以外の場合は、新しいリポジトリを作成します。

@SebiTimeWaster今まであなたのコメントを見ていませんでした、おっと。 私が推測するより多くの喜び😁

@looeeeは完全なポートですか、それとも単なるラッパーですか？ とにかく、csg.jsはCSG操作のためにデータを多くの内部構造に変換する必要があるように見えましたね。 出入りの途中で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のラッパーであるブランチが1つあります。

• コードをモジュール化
• 関数名をthree.jsに揃え、カスタムベクトルクラスの代わりにVector3使用しました。
• マイナーなAPIの改善

そのブランチは完成しました。少し整理したら共有します。 しかし、それは遅いです。

速度の向上に取り組んでいる別のブランチがあります。 ここでできることはたくさんあります。主に、できるだけ多くの処理を回避するために早期アウトを計算することです。

@SebiTimeWaster 、コードを

@SebiTimeWaster csg実装はテクスチャ座標を処理できますか？

これが私のテクスチャ座標の見え方です。

リポジトリは次のとおりです。
https://github.com/looeee/threejs-csg

上記で説明したcsg.jsのラッパーに非常に近い_master_と_advanced_の2つのブランチがあります。 そこで、 LogicalORおよびcomplementメソッドを使用してすべてのCSG操作を表現しました。

ユニオン：_（左||右）_
減算：_！（！左||右）_
交差：_！（！左||！右）_

そうすることで、操作の推論が少し簡単になり、減算と交差がわずかに速くなります。 完全なCSG操作を実行する前に、高レベルのバウンディングボックスベースのマージとカリングを実行する実験もいくつかあります。これにより、一度に多くの操作を実行するときに、ある程度のスピードアップが得られます。

ただし、より良いアプローチ、および他の実装で最も使用されていると思われる方法は、ジオメトリと操作のBVHを作成し、ツリーをトラバースして最終的なジオメトリを生成することです。

@SebiTimeWaster今のところ、これをさらに進めるのではなく、代替のCSG実装を検討することにしました。 私のレポから何か役に立つものがあれば、遠慮なくそれを取ってください。

編集：このツイートは私の気持ちを正確に要約しています

上でリンクしたUnity用のRealtimeCSGプラグインのソースが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もあります。

ここでの最善の解決策は、これらの既存の解決策の1つ（おそらくCPPであり、他の多くのパッケージで使用されているように見えるため、Carve）を取得してWasmに変換することでしょうか。

ここでの最善の解決策は、これらの既存の解決策の1つ（おそらくCPPであり、他の多くのパッケージで使用されているように見えるため、Carve）を取得してWasmに変換することでしょうか。

私はemscriptenにあまり詳しくありませんが、それは悪いアプローチのようには聞こえません。 ただし、CarveとCorkはGPLとLGPLのライセンスを取得しているようですので、注意が必要です。

どうやらBlenderはブール演算ツールを更新したばかりで、このツイートによると、このペーパーのアプローチを使用しています。

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