最終更新日: 2026年8月20日

How to Integrate CAD File Processing into Web Apps? Step-by-Step Architecture

WebベースのCAD処理：3Dデータのパース、変換、可視化の完全ガイド

エンジニアリング、建設、製造向けソフトウェアは長らく重厚なデスクトップワークステーションに依存してきました。何十年もの間、設計の共同作業は巨大なファイルをエクスポートし、専用のデスクトップソフトを起動するか、リッチなジオメトリを死んだピクセルに平坦化した静的な2D PDFスナップショットで妥協することを意味していました。

現在、プロダクトチームはリアルタイムの設計コラボレーション、クラウドベースの部品見積もり、設計の自動検証、そしてウェブブラウザ内での摩擦のないモデル共有を期待しています。コンピュータ支援設計（CAD）ファイルをウェブに持ち込むことは極めて困難です。専有ファイル形式、非一様有理Bスプライン（NURBS）、巨大なファイルペイロード、そしてブラウザのGPU制約が深刻なアーキテクチャ上の課題を生み出します。

ここでは、最新のウェブアプリケーション内でCADファイルを設計、処理、レンダリングする方法を実践的に、エンドツーエンドで分解して説明します。

1. CADの全体像を理解する：なぜWeb処理が難しいのか

インジェストスクリプトを書いたり、3Dキャンバスライブラリを選択したりする前に、ユーザーがアップロードするフォーマットと、ブラウザが実際にレンダリングできるフォーマットの違いを理解する必要があります。

境界表現（B-Rep） vs. ポリゴンメッシュ

デスクトップCADツール（SolidWorks、CATIA、Autodesk Inventor、Siemens NX）は三角形で考えません。これらはジオメトリを、**B-Rep（境界表現）またはNURBS（非一様有理Bスプライン）**として知られる、数学的に正確な曲線、曲面、ソリッドとして保存します。

  • B-Rep フォーマット（.step, .stp, .iges, .sldprt）: 高い数学的精度、可変エッジ定義、そして複雑なトポロジー関係を持ちます。
  • 図面フォーマット（.dwg, .dxf）: 2D/3D ベクトル製図データで、層が多く、しばしばプロプライエタリです（特にバイナリDWG）。
  • メッシュフォーマット（.stl, .obj, .ply）: 三角形近似です。STLは3Dプリントで一般的ですが、すべてのセマンティック情報（ねじ、正確な半径、材料、アセンブリ）を失います。

ウェブの問題: WebGL と WebGPU エンジンはポイント配列、頂点、三角メッシュしか理解できません。ブラウザは 60 フレーム/秒でパラメトリック NURBS 方程式をネイティブに評価できません。

したがって、CAD をウェブアプリに統合することは根本的に テッセレーションとパイプラインの問題 です。数学的に正確な CAD ソリッドを、重要なエンジニアリング忠実度を失わずに軽量で最適化されたポリゴンメッシュに変換することを意味します。

2. コアアーキテクチャ：取り込みと変換パイプライン

200MB の STEP アセンブリをクライアント側で解析しようとすると、ユーザーのブラウザタブがクラッシュします。実稼働可能な CAD 処理パイプラインは、非同期で疎結合なアーキテクチャに依存しています：

[Browser Client] 
       │ (Direct Upload via Presigned URL)
       ▼
[Cloud Storage: S3 / GCS] 
       │ (Event Trigger)
       ▼
[Message Queue: SQS / RabbitMQ] 
       │
       ▼
[Worker Nodes (Geometry Engine)]
       ├─ Format Parsing
       ├─ Tessellation & Meshing
       ├─ Decimation & Level-of-Detail (LOD)
       └─ Optimization
       │
       ▼
[Derived Output: glTF / GLB / Vector JSON]
       │
       ▼
[Client Web Viewer (Three.js / Babylon.js)]

ステップ 1：Direct-to-Cloud アップロードによる安全な取り込み

大きな CAD バイナリをコアアプリケーションサーバーを通すことは絶対にしないでください。厳格なチャンク分割マルチパートアップロードを備えた、署名付き S3 または Google Cloud Storage のアップロード URL を使用します。CAD アセンブリは、アセンブリ (.sldasm) 内に複数の部品ファイル（.sldprt）をバンドルしたり、.zip アーカイブとして提供されたりすることがよくあります。アップロード層は、マルチファイルおよびフォルダーの取り込みに対応する必要があります。

ステップ 2：非同期変換ワーカー

アップロードが完了すると、イベントが非同期ワーカープールをトリガーします。CAD 変換は CPU とメモリを大量に消費するため、ワーカーはスケーラブルなコンピュート環境（例：AWS ECS、Kubernetes ポッド、または専用コンピュートインスタンス）上に配置してください。

ステップ 3：テッセレーションと特徴抽出

ワーカーはファイルを解析し、メタデータ（バウンディングボックス、部品ツリー、質量特性、レイヤー）を抽出し、数学的なサーフェスを三角形に変換します。

ステップ 4：Web 対応標準への正規化

出力は glTF 2.0（.glb） に変換すべきです—しばしば「3D の JPEG」と呼ばれます—または、特化したアプリケーション向けのカスタムバイナリ形式に変換します。2D 図面データ（.dwg/.dxf）については、SVG やフラットな GeoJSON 形式のジオメトリなどのベクターフォーマットに変換してください。

3. 適切な変換エンジンの選択

バックエンドでのパースとテッセレーションを処理するには、一般的に3つのオプションがあります:

アプローチ典型的なツール長所短所
オープンソースジオメトリカーネルOpen CASCADE (OCCT)、FreeCAD CLI、CadQuery取引ごとのライセンス料は不要；データを完全に管理できます。学習曲線が急峻（C++）；大規模アセンブリでは遅い；手動でのチューニングが必要です。
商用ヘッドレス SDKTech Soft 3D (HOOPS)、Spatial (ACIS)、Datakit独自フォーマット（CATIA、Creo、SolidWorks）へのネイティブサポート；卓越したパフォーマンス。企業向けライセンス費用が高額です。
クラウド翻訳APIAutodesk Platform Services (Forge)、Convertigoターンキーインフラストラクチャ；組み込みのウェブビューアウィジェット；最小限のメンテナンス。ベンダーロックイン；ファイル単位の処理料金；データがプライベート境界を離れます。

WebAssembly（Wasm）を使用すべき時

軽量フォーマット（クリーンな .stl ファイルやシンプルな 2D .dxf 青図など）の場合、バックエンドキューを完全にバイパスできます。軽量な C++ または Rust パーサーを WebAssembly にコンパイルすると、Web Workers を使用してブラウザ内で直接ファイルを読み取ることができます。このアプローチは、クライアントメモリを保護するために 25MB 未満の単一部品に限定してください。

4. Web パフォーマンスのための 3D ジオメトリ最適化

未加工のテッセレーションされた CAD モデルは簡単に何百万ものポリゴンを生成し、ブラウザのフレームレートを低下させます。ワーカー段階での最適化は必須です：

1. 適応的変形（テッセレーション制御）

均一な細分化は避けてください。コード偏差設定を使用します：平坦な表面は非常に少ない三角形で済みますが、タイトなフィレットや放射状の曲線は高い密度が必要です。

2. メッシュ削減とLOD生成

複数のレベル・オブ・ディテール（LOD）を生成します。ユーザーが全体の機械を見るためにズームアウトしたときは、ポリゴン数を 80% 削減した LOD をレンダリングします。特定のボルトやベアリングにズームインしたときは、高精細なジオメトリに切り替えます。

3. Draco と Meshopt によるメッシュ圧縮

ウェブ出力には常にジオメトリ圧縮を適用してください：

  • Google Draco: ワイヤ上のファイルダウンロードサイズを劇的に削減します。ただし、Draco モデルのデコードはクライアントの CPU サイクルを消費します。
  • Meshopt / EXT_meshopt_compression: 高速なネイティブ速度の WebAssembly デコードを備えたバランスの取れた圧縮を提供し、複雑なアセンブリを迅速にレンダリングするのに最適です。

4. インスタンシング

製造モデルでは、ねじ、ブラケット、ピンなどの部品が何十回も繰り返されます。翻訳パイプラインが重複するボディを検出し、インスタンス化メッシュ（EXT_mesh_gpu_instancing）を出力するようにしてください。これにより、描画呼び出しが数百から 1 に削減されます。

5. ブラウザでのレンダリング：フロントエンドアーキテクチャ

ワーカーが最適化された .glb ファイルを出力すると、ブラウザーがインタラクション、検査、測定を処理します。

レンダリングエンジンの選択

  • Three.js: 業界標準です。巨大なエコシステムを持ち、軽量で、製品コンフィギュレータやカスタムビューア UI のカスタマイズが容易です。
  • Babylon.js: 機能が豊富で、プロダクションレベルのエンジンです。複雑な PBR マテリアル、物理、エンタープライズワークフローをすぐにサポートします。
  • Autodesk Viewer / HOOPS Communicator: BIM/CAD 機能（セクション平面、モデルツリーハイアラキー、爆発ビュー）を備えたパッケージ化されたビューアですが、独自のクラウドバックエンドと密接に連携しています。

必須のWeb CADビューア機能

カスタムインターフェースを構築する場合、エンジニアユーザーは標準的なデスクトップ操作を期待します：

  1. CAD-Style Orbit Controls: デスクトップ CAD ツールは異なるマウス割り当てを使用します（例: SolidWorks は中ボタンでオービット、Revit は Shift + 中ボタン）。ユーザーが制御方式を切り替えられるようにします。
  2. Interactive Bounding Box & Sectioning: GL クリッピング平面を使用して、ユーザーが実体アセンブリの内部コンポーネントをスライスできるようにします。
  3. Hierarchy Tree (Scene Graph): 親子のアセンブリ構造を HTML/React でレンダリングし、ユーザーが特定のコンポーネントやサブアセンブリの表示/非表示を切り替えられるようにします。
  4. 正確な測定ツール: 頂点とエッジループに対してレイキャストし、実際の距離、表面積、半径を計算します。

6. セキュリティと知的財産（IP）保護

CADファイルには機密の知的財産が含まれています。エンジニアリングデータをパブリックブラウザにストリーミングするには、厳格なセキュリティ管理が必要です:

  • メッシュのみ配信: ネイティブB-Repジオメトリではなくテッセレーションされたメッシュを送信することで、元のパラメトリック計算を本質的に保護します。三角形化された表面からネイティブCADモデルをリバースエンジニアリングすることは困難で不完全です。
  • ストリーミングチャンク暗号化: 短命のセッショントークンで認証された暗号化バイナリセグメントでジオメトリを配信します。
  • 一時的な処理: 変換パイプラインが永続ストレージに書き込んだ直後に、一時ストレージとワーカーメモリを即座にクリーンアップします。
  • 外部ビューア向けジオメトリ簡略化: ファイルをサードパーティベンダーや一般の観客に表示する場合、ウェブメッシュを生成する前に内部コンポーネント（ギア、バッフル、秘密の内部機構）を除去する外部シェルリングアルゴリズムを実行します。

結論

CAD処理をウェブアプリケーションに統合することは、もはやエンタープライズCADベンダーだけの実験的機能ではありません。非同期クラウドワーカーによる取り込みを分離し、パラメトリック曲線を最適化されたポリゴンメッシュに変換し、WebGL/WebGPUフロントエンドを活用することで、あらゆる最新ブラウザ内で高速かつ共同作業が可能なエンジニアリングツールを提供できます。

まずは明確にスコープされたMVPから始めましょう。STEPのような単一の中立フォーマットを選択し、確立されたパーサーを活用してglTF出力を目指し、Three.jsでレンダリングします。ユーザーベースが拡大するにつれて、マルチフォーマット変換パイプライン、適応的LOD、そして専門的なエンジニアリングツールを追加してください。

よくある質問 (FAQ)

Q1. 現代のウェブブラウザは、バックエンド変換なしで生のSTEPまたはDWGファイルをネイティブに開くことができますか？ いいえ、ブラウザには独自のCADフォーマット用のネイティブパーサーがなく、サーバーサイドでの変換またはWebAssemblyベースの処理でglTFのような三角形メッシュ形式に変換する必要があります。

Q2. 3D CADデータを効率的にレンダリングするための最適なウェブフォーマットは何ですか？ バイナリglTF（.glb）にMeshoptまたはDraco圧縮を組み合わせたものが、ウェブブラウザ全体で高性能な3Dモデルを提供する業界標準です。

Q3. モバイルデバイスで何百万ものポリゴンを持つ大規模なCADアセンブリをどのように処理しますか？ レベル・オブ・ディテール（LOD）階層、積極的なメッシュ削減、インスタンス描画を実装し、GPUが可視かつ簡略化されたジオメトリのみをレンダリングするようにします。

Q4. 公開ウェブページに表示された場合、専有CAD知的財産は安全ですか？ はい、CADモデルをサーフェスメッシュにテッセレーションすることで、元のパラメトリック履歴や数式的構造データが除去され、容易なリバースエンジニアリングが防止されます。

Q5. Open CASCADE のようなオープンソースエンジンと商用クラウド翻訳 API のどちらを使用すべきですか？ オンプレミスのプライバシーとライセンス料ゼロが必要な場合は Open CASCADE が最適です。一方、Autodesk Platform Services のような商用 API は、迅速な市場投入と幅広いネイティブフォーマットサポートに適しています。

関連項目

FileFormat.com の CAD ファイル形式

CAD ファイル形式で動作するオープンソース API

AutoCADなしのCAD自動化：開発者向けトップオープンソースフレームワーク

ファイル形式フォーラム – ファイル形式フォーラムで質問を投稿し、ファイル形式の専門家やコミュニティユーザーから有益な情報を得ましょう

ファイル形式 Wiki – さまざまなファイル形式に関する情報を得るために、ファイル形式カテゴリを探索してください。

STEP vs IGES 解説：モダンとレガシー CAD 交換フォーマットの比較