Pascal Editor: Webで実現する3D建築デザインの革新 • 日替わり OSS

リポジトリ

pascalorg/editor
主要言語: TypeScript / ライセンス: MIT / ★ 18,674

「Pascal Editor」は、Webブラウザ上で動作する画期的な3D建築エディタです。React Three Fiberと次世代のWebグラフィックスAPIであるWebGPUを基盤としており、ユーザーはブラウザから直接、建築プロジェクトをデザイン、作成、共有できます。従来のデスクトップアプリケーションに匹敵するリッチな3D体験をWebにもたらすことを目指し、建築設計の初期段階からインテリアデザイン、さらには施工計画まで、幅広い用途で活用される可能性を秘めています。

このプロジェクトの最大の魅力は、高機能な3Dモデリング環境をWebブラウザという手軽なプラットフォームで提供している点にあります。特別なソフトウェアのインストールは不要で、URLにアクセスするだけでどこからでも建築デザイン作業を開始できます。これにより、設計チーム内でのコラボレーションや、クライアントとのリアルタイムなデザインレビューが格段にスムーズになります。単なる3Dビューアではなく、直感的な編集機能を備えている点が、Pascal Editorを既存の多くのWebベースの3Dツールと一線を画す要因となっています。

主要な特徴と技術スタック

Pascal Editorは、最先端のWeb技術を駆使して構築されており、そのアーキテクチャは非常に洗練されています。以下に主要な技術要素とその役割を解説します。

WebGPUによる高性能グラフィックス

WebGPUは、WebGLの後継として開発されているWeb標準のグラフィックスAPIです。GPUリソースへのより低レベルなアクセスを可能にし、並列処理能力を最大限に引き出すことで、デスクトップアプリケーションに匹敵する複雑な3Dシーンや高性能なグラフィックス表現をWeb上で実現します。Pascal Editorはこれを早期に採用することで、大規模な建築モデルやリアルタイムなレンダリングにおいて、高いパフォーマンスとビジュアル品質を両立しています。

React Three Fiberによる宣言的3D開発

React Three Fiberは、Three.jsをReactのコンポーネントとして宣言的に記述できるライブラリです。Reactの持つコンポーネントベースの思想と状態管理のメリットを3Dシーン構築にもたらし、開発者はより直感的かつ効率的に3Dアプリケーションを構築できます。Pascal Editorでは、これにより3Dシーンの要素（壁、窓、フロアなど）をReactコンポーネントとして扱い、アプリケーション全体の一貫性と保守性を高めています。

モノレポ構成と責務分離

リポジトリはTurborepoを用いたモノレポ構成を採用しており、以下の主要なパッケージに分けられています。これにより、各コンポーネントが独立した責務を持ち、再利用性と拡張性を高めています。

@pascal-app/core: ノードスキーマ、シーンの状態管理（Zustand）、レジストリ契約など、アプリケーションの中核となるロジックを担います。
@pascal-app/viewer: React Three Fiberを通じた3Dレンダリングランタイム、共有レンダリングシステム、デフォルトのカメラ・コントロールなどを提供します。
@pascal-app/editor: 編集ツール、パネル、選択管理、直接操作UIなど、エディタ固有の機能を提供します。
@pascal-app/nodes: 組み込みのノード定義、レンダラー、ジオメトリ、システムなどをプラグイン形式で提供します。

この分離により、例えばviewerパッケージだけを使ってカスタムの3Dビューアを構築したり、nodesパッケージを拡張して独自の建築要素を追加したりといった柔軟な対応が可能になります。

Zustandによる効率的な状態管理

Pascal Editorでは、軽量で高速な状態管理ライブラリであるZustandを積極的に活用しています。特に、シーン全体の状態を管理するuseSceneストア、ビューア固有の状態を管理するuseViewerストア、エディタ固有の状態を管理するuseEditorストアと、それぞれの責務を明確に分離しています。これにより、複雑な3Dアプリケーションにおける状態の変更が効率的に処理され、パフォーマンスが最適化されています。また、useSceneストアにはZundoミドルウェアが導入されており、IndexedDBへの永続化と、最大50ステップのUNDO/REDO機能が標準で提供されています。

ノードベースのデータモデルとシステムアーキテクチャ

Pascal Editorの3Dシーンは「ノード」と呼ばれるデータプリミティブで構成されています。Site、Building、Level、Wall、Slab、Item（ドア、窓など）といった建築要素がノードとして定義され、parentIdによって階層的な関係が構築されます。これらのノードは、@pascal-app/coreのZustandストア内でフラットな辞書形式で管理されており、柔軟なモデル表現と効率的なデータアクセスを両立しています。

レンダリングプロセスでは、各ノードタイプに対応するReactコンポーネント（NodeRenderer）がThree.jsオブジェクトのプレースホルダーを作成し、シーンレジストリに登録します。その後、「システム」と呼ばれるReactコンポーネントが、React Three FiberのuseFrameフックを用いて、変更があったノード（dirty nodes）のジオメトリやトランスフォームを効率的に更新します。これにより、必要な部分だけを再描画することで、パフォーマンスを維持しつつ複雑な建築モデルを表現しています。

例えば、壁のノードデータが変更されると、WallSystemがその壁のジオメトリを再計算し、レンダリングに反映するといった流れです。

npm install @pascal-app/core @pascal-app/viewer @pascal-app/editor @pascal-app/nodes

import { loadPlugin } from '@pascal-app/core'
import { builtinPlugin } from '@pascal-app/nodes'

await loadPlugin(builtinPlugin)

どんな現場で役立つか

Pascal Editorは、そのWebベースかつ高性能な特性から、多岐にわたる分野での活用が期待されます。

建築・設計事務所: 初期コンセプトデザインの迅速な作成、施主へのインタラクティブなプレゼンテーション、デザインレビュー時のリアルタイムな変更対応に役立ちます。複数人での共同作業が容易なため、リモートワーク環境下でのプロジェクト進行にも適しています。
インテリアデザイン: 部屋のレイアウト検討、家具の配置シミュレーション、空間の質感や照明効果の視覚化に活用できます。クライアントの要望を即座に反映し、その場でデザイン案を提示することで、コミュニケーションの円滑化を図れます。
建設現場・施工管理: 簡易的な施工計画の作成や、現場状況の3Dモデルへの反映、進捗共有などに利用できる可能性があります。複雑なCADソフトを使わずとも、直感的にモデルを操作できる点が強みです。
教育・研究機関: 3Dモデリングや建築学の学習教材として、実際に手を動かしながら建築デザインの基礎から応用までを学べる環境を提供します。新しい建築デザイン手法の研究開発プラットフォームとしても有望です。
Web開発コミュニティ: WebGPU、React Three Fiber、Zustandといった最先端のWeb技術を組み合わせた大規模アプリケーションの参考実装として、そのアーキテクチャや実装パターンは非常に価値があります。独自の3Dエディタや可視化ツールを開発する際の基盤としても利用可能です。

今後の展望と貢献の機会

Pascal Editorはまだ発展途上のプロジェクトですが、WebGPUの普及とともにその性能を最大限に引き出す最適化が進むことで、さらなる進化を遂げるでしょう。

OSSプロジェクトとして、建築業界の専門家やWeb開発者からのフィードバックやコントリビューションは、機能拡張や安定性向上に不可欠です。具体的には、カスタムノードやシステムを定義するプラグインエコシステムの発展、BIMデータ形式（IFCなど）とのインポート/エクスポート機能の強化、そしてユーザーインターフェースや操作性の改善などが考えられます。開発者は、TypeScript、React、Three.js、WebGPUといった技術スタックの知識を活かし、バグ修正、新機能提案、ドキュメント改善など、様々な形でプロジェクトに貢献できます。

Webブラウザ上での3D建築デザインの可能性を広げるPascal Editorは、今後のWeb技術の進化と建築分野のデジタル化を牽引する存在として、大いに注目されるべきでしょう。