pascalorg/editorはWebGPUで建築シーンを編集するTurborepo

WebGPUベースの建築エディタとTurborepo構成

Pascal Editor は TypeScript で書かれた 3D 建築エディタで、React Three Fiber と WebGPU を基盤としています。このリポジトリは Turborepo によるモノレポで、apps/editor は Next.js ホスト、packages には core、viewer、editor、nodes、ui が含まれます。README は viewer を 3D レンダリングランタイム、editor を対話ツールと選択を追加する層と説明しています。リポジトリのメタデータはこのプロジェクトを 3D 建築プロジェクトの作成と共有の手段としていますが、README 自体は共有のワークフローを詳述していません。

5つのランタイムパッケージとその役割分担

@pascal-app/core はノードスキーマ、Zustand によるシーン状態、registry 契約、空間クエリ、イベントバスを担当します。@pascal-app/viewer は React Three Fiber によるレンダリングランタイム、共有レンダリングシステム、デフォルトカメラとコントロール、ポストプロセッシングを提供します。@pascal-app/editor には編集ツール、パネル、選択、直接操作 UI が含まれます。@pascal-app/nodes はノード定義、レンダラー、ジオメトリ、システムを備えた組み込み registry プラグインです。README の役割分担表は各パッケージに1つの責務を割り当てており、apps/editor はそれらをまとめる独立した Next.js ホストです。

シーン状態と3つのZustandストア

状態は3つの Zustand ストアに分かれています。@pascal-app/core の useScene はノード、ルート ID、ダーティノード、CRUD 操作を保持し、IndexedDB に永続化し、Zundo による50ステップの undo/redo を備えています。@pascal-app/viewer の useViewer は選択中の building、level、zone の ID、レベル表示モード（stacked、exploded、solo）、カメラモードを追跡します。apps/editor の useEditor はアクティブなツール、構造レイヤー表示、パネル状態、エディタ固有の設定を保持します。README には React コンポーネント向けの購読構文と、React 外のコード向けの getState 呼び出しが示されています。

ノード、階層、シーンregistry

ノードはシーンのデータプリミティブであり、すべて BaseNode を拡張します。id、type、parentId、visible、任意の保存済みカメラ、任意の JSON メタデータを含みます。階層は Site、Building、Level の順で、その下に Wall と Item 子ノード、Slab、Ceiling と Item 子ノード、Roof、Zone、Scan、Guide が続きます。ノードはネストしたツリーではなくフラットな辞書 Record<id, Node> に保存され、親子リンクは parentId と children 配列で保持されます。シーン registry はノード ID を Three.js オブジェクトにマップし、タイプ別にもインデックスするため、システムはシーングラフを走査せずにオブジェクトを解決できます。レンダラーはプレースホルダーメッシュを作成し、useRegistry で登録する React コンポーネントです。

システムはdirtyノードからジオメトリを再計算する

システムは React コンポーネントで、useFrame を通じてレンダーループ内で実行され、ジオメトリとトランスフォームを更新します。createNode、updateNode、deleteNode がノードを変更すると、そのノードは useScene の dirtyNodes セットに追加されます。各フレームでシステムはダーティセットを反復処理し、ノードと登録済みの Three.js オブジェクトを検索してジオメトリを再計算し、フラグをクリアします。コアシステムには WallSystem、SlabSystem、CeilingSystem、RoofSystem、ItemSystem があり、ビューアシステムには LevelSystem、ScanSystem、GuideSystem があります。WallSystem はマイター接合とドア・窓用の CSG 切り抜きを含む壁ジオメトリを生成し、ItemSystem は壁・天井・床にアイテムを配置します。ダーティセットは手動でマークすることもできます。

エディタのツール、選択、プラグイン拡張

エディタはツールバーから起動するツール群でビューアを拡張します。SelectTool、WallTool、ZoneTool、ItemTool、SlabTool です。カスタム選択マネージャは Site、Building、Level、Zone、Items の階層を移動し、各階層に独自のホバーとクリック戦略があります。エディタ固有のシステムには ZoneSystem と、ノードに焦点を合わせるカスタムカメラ制御があります。プラグインは新しいノード種類と左側パネルを拡張する経路で、README は開発者ガイドにリンクし、pascalorg/plugin-trees を実例として挙げています。プラグインは組み込みと同じ Plugin マニフェストを使用し、別の内部 API はありません。

開発コマンドとMITライセンス

開発ではパッケージマネージャに Bun を使います。リポジトリルートで bun install を実行し、bun dev を実行すると、@pascal-app/core と @pascal-app/viewer がビルドされ、両パッケージのウォッチモードが起動し、Next.js エディタが http://localhost:3002 で実行されます。本番ビルドは turbo build を使い、パッケージを指定してフィルタできます。README には core と viewer を公開する npm publish コマンドも示されています。リポジトリは MIT ライセンスで、著作権は Pascal Group Inc. にあります。ライセンスは著作権表示を含めることを条件に、コピーの使用、複製、変更、結合、公開、配布、サブライセンス、販売を許可します。また、保証と責任を明示的に否認し、サポート、セキュリティ保証、本番環境への適合性については何も述べていません。

ノードの変更を即座にGPUへ送るのではなく、dirty状態を経由してジオメトリ再計算をまとめる設計が、このエディタの中心です。選択状態や階層を扱うregistryと、表示用のレンダリング処理を分けて読めるため、プラグインが追加するノード定義の位置も追いやすくなっています。WebGPUが使えないブラウザでの代替経路はREADMEから確認できないので、開発コマンドが通ることと編集画面が動くことを同じ条件だとみなさないでください。

編集部の結論

editorはWebGPUの建築シーン編集をコードと状態管理まで読める開発者に向きます。導入前にmonorepoの開発コマンド、ブラウザのWebGPU対応、3つのZustandストアが扱う状態を確認し、MITライセンスのコード再利用と実行時のブラウザ条件を別々に判断してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes