STB Diff Viewer
ST-Bridge形式の建築モデルを比較・視覚化するWebアプリケーション
📖 目次
- STB Diff Viewerとは
- 始め方
- 基本操作
- 主要機能
- 新機能の紹介
- 動作環境
STB Diff Viewerとは
STB Diff Viewerは、ST-Bridge（STB）形式の3D建築モデルを読み込み、2つのモデル間の差分を視覚的に比較できるWebアプリケーションです。
主な用途:
- 🔄 設計変更前後のモデル比較
- 🔍 構造要素の差異確認
- 📊 建築モデルの3D可視化
- ✅ データ品質のチェック
特徴:
- ✅ 完全ブラウザベース - インストール不要、URLを開くだけ
- ✅ 高速な3D表示 - Three.jsによる軽量レンダリング
- ✅ 柔軟な比較設定 - 許容差設定、比較キーの切り替え
- ✅ 直感的なUI - ドラッグ&ドロップ、カラーピッカー、フローティングパネル
始め方
起動方法
https://key-o.github.io/stb-diff-viewer/ をWebブラウザで開きます- ファイル選択画面が表示されます
- すぐに使い始められます！
モデルの読み込み
ステップ1: ファイルを選択
- 比較元モデル (A): 「ファイルを選択」ボタンで1つ目のSTBファイルを選択
- 比較先モデル (B): 2つ目のSTBファイルを選択（オプション）
ステップ2: 要素タイプを選択
表示したい構造要素をチェック:
- ☑ 柱 (Column)
- ☑ ポスト (Post)
- ☑ 大梁 (Girder)
- ☑ 小梁 (Beam)
- ☑ スラブ (Slab)
- ☑ 壁 (Wall)
- ☑ ブレース (Brace)
- ☑ 節点 (Node)
- ☑ 基礎 (Footing)
- ☑ 杭 (Pile)
ステップ3: 表示
「モデルを表示/比較」ボタンをクリック
対応形式:
.stb - ST-Bridge XML形式.xml - ST-Bridge XML形式
基本操作
カメラ操作
3Dモード（透視投影）
遠近感のある3D表示:
- 回転: 左クリック + ドラッグ
- パン: 右クリック + ドラッグ（または Shift + 左クリック）
- ズーム: マウスホイール
2Dモード（平行投影）
建築図面のような平行投影表示:
- パン: 左クリック/右クリック + ドラッグ
- ズーム: マウスホイール
定型ビュー:
- 平面図 (Top): 上から見下ろす
- 正面図 (Front): 正面から見る
- 右側面図 (Right): 右側から見る
- 左側面図 (Left): 左側から見る
- 等角図 (Iso): 斜め上から見る
キーボードショートカット
- R: ビューをリセット
- F: 選択要素にフォーカス
- H: ヘルプを表示
主要機能
1. 色付けモード
📊 差分表示モード
2つのモデル間の違いを色で視覚化:
| 色 | 意味 |
|---|
| 🟢 緑 | 両モデルに存在する完全一致要素 |
| 🔵 青 | モデルAにのみ存在する要素 |
| 🔴 赤 | モデルBにのみ存在する要素 |
| 🟡 アンバー | 位置許容差内、属性一致の要素 |
| 🟠 オレンジ | 位置一致、属性不一致の要素 |
| 🟣 紫 | 位置許容差内かつ属性不一致の要素 |
使用シーン: 設計変更の確認、新規追加・削除要素の特定
🏗️ 部材別色付けモード
構造要素のタイプごとに色分け:
- 柱: ブラウン
- ポスト: ライトグリーン
- 大梁: ブルー
- 小梁: グリーン
- スラブ: グレー
- 壁: ディープオレンジ
- ブレース: オレンジ
- 基礎: シアン
- 杭: ブルーグレー
使用シーン: 構造全体の把握、プレゼンテーション
⚠️ スキーマエラー表示モード
XSDスキーマ検証結果を表示:
- 緑: 正常な要素
- 青: 自動修復可能な要素
- オレンジ: 要確認の要素
- 赤: エラーのある要素
使用シーン: データ品質チェック、エラー箇所の特定
🎯 重要度別色付けモード
要素の重要度レベルを視覚化:
- 赤: REQUIRED（必須要素）
- オレンジ: OPTIONAL（オプション要素）
- グレー: UNNECESSARY（不要な要素）
- ライトグレー: NOT_APPLICABLE（該当なし）
使用シーン: 設計の優先順位付け、レビュー作業
2. 表示モード
Line（線）表示
要素を線で表示:
- ✅ 軽量で高速
- ✅ 大規模モデルに適している
- ✅ 全体像を把握しやすい
Solid（ソリッド）表示
要素を3Dソリッドで表示:
- ✅ 断面形状を正確に表現
- ✅ よりリアルな表示
- ✅ 詳細確認に適している
3. クリッピング機能
モデルの一部を切り取って内部を確認できます。
階クリッピング
階ごとに表示/非表示を切り替え:
- スライダーで階範囲を指定
- 特定の階だけを表示
- 上下の階を非表示にして内部確認
軸クリッピング
通り芯に沿って切断:
- X軸方向、Y軸方向の切断
- スライダーで切断位置を調整
- 断面図のような表示
使用シーン:
4. 比較機能
🎯 許容差設定
座標やオフセットの微小な差異を許容:
設定項目:
- 基準点許容差 (X/Y/Z): ノード座標の許容範囲（デフォルト: 10mm）
- オフセット許容差 (X/Y/Z): オフセット値の許容範囲（デフォルト: 5mm）
5段階分類:
| 分類 | 説明 |
|---|
| 🟢 完全一致 (Exact Match) | 座標が完全に一致 |
| 🟡 許容差内一致 (Within Tolerance) | 許容差内で一致 |
| 🟠 許容差外不一致 (Mismatch) | 許容差を超える差異 |
| 🟢 モデルAのみ (Only A) | モデルAにのみ存在 |
| 🔴 モデルBのみ (Only B) | モデルBにのみ存在 |
使用シーン:
- わずかな座標ズレを無視
- 実質的な変更のみ検出
- 丸め誤差の吸収
起動方法: 画面上部の「⚙️ 許容差設定」ボタン
🔑 比較キー設定
要素の対応関係を判定する基準を選択:
位置情報ベース比較（デフォルト）:
- ノード座標で要素を対応付け
- 座標が近い要素同士を比較
- 一般的な使用ケースに最適
GUIDベース比較:
- 要素のGUID（グローバル一意識別子）で対応付け
- 座標が変わっても同一要素として追跡
- 要素が移動した場合の追跡に有効
自動フォールバック:
GUIDが存在しない場合、自動的に位置情報ベース比較に切り替わります。
使用シーン:
- 位置情報ベース: 通常の設計変更比較
- GUIDベース: 要素の移動・変更追跡
起動方法: 「🔑 比較キー設定」ボタン
5. ツリービュー
📋 要素ツリービュー
要素をタイプごとに階層表示:
構造:
📁 柱 (Column)
├─ C001
├─ C002
└─ C003
📁 大梁 (Girder)
├─ G001
└─ G002
機能:
- 要素をクリックして3Dビューで選択
- 3Dビューで選択すると自動的にツリーがハイライト（双方向同期）
- グループ化・ソート機能
使用シーン:
起動方法: 「📋 要素ツリー表示」ボタン
📐 断面ツリービュー
断面ごとに要素をグループ化:
構造:
📁 柱断面 (Column Section)
└─ 📏 H-400×400×13×21 (10要素)
├─ 📊 1階 (3要素)
│ ├─ C001
│ ├─ C002
│ └─ C003
├─ 📊 2階 (4要素)
└─ 📊 3階 (3要素)
グループ化モード:
- 階ごとグループ化: 階ごとに要素を分類
- 符号ごとグループ化: 通り芯の符号ごとに分類
機能:
- 断面の使用状況確認
- 同一断面を使用する要素の一覧
- 断面変更の影響範囲確認
使用シーン:
- 断面の使用パターン確認
- 断面変更の影響評価
- 階ごとの断面配置確認
起動方法: 「📐 断面ツリー表示」ボタン
6. その他の機能
📊 統計情報
要素の統計をグラフ表示:
- 重要度別の要素数
- 要素タイプ別の分布
- 円グラフ表示
- JSONエクスポート
🔍 要素情報パネル
選択した要素の詳細情報を表示:
- 要素ID
- 要素タイプ
- ノード座標
- 断面情報
- オフセット値
- 回転角
🎨 カラーカスタマイズ
すべての色をカスタマイズ可能:
- 差分表示の色
- 部材別の色
- 背景色
- カラーピッカーで簡単変更
💾 設定の保存
ユーザー設定を自動保存:
ブラウザのLocalStorageに保存され、次回起動時に自動復元されます。
新機能の紹介
動作環境
推奨ブラウザ
- Google Chrome 最新版（推奨）
- Microsoft Edge 最新版
必要要件
- JavaScript: 有効化必須
- WebGL: 対応必須（3D表示のため）
- LocalStorage: 設定保存のため推奨
ファイルサイズ
- 小規模モデル（〜1,000要素）: 快適に動作
- 中規模モデル（1,000〜10,000要素）: 推奨
- 大規模モデル（10,000要素〜）: Line表示推奨
ヒント: 大規模モデルの場合は、必要な要素タイプのみを選択し、Line表示モードを使用すると高速化されます。
使用ライブラリ
この公開用Webアプリケーションは、主に以下のサードパーティライブラリを使用しています:
- Three.js (r160) — MIT（3Dレンダリング）
- camera-controls (v3.1.0) — MIT（カメラ操作）
- dxf-parser (v1.1.2) — MIT（DXF 解析）
- html2canvas (v1.4.1) — MIT（DOMキャプチャ）
- jsPDF (v4.2.x) — MIT（PDF生成）
- web-ifc / web-ifc.wasm (v0.0.74) — MPL-2.0（IFC解析）
- PDF.js (v5.4.624) — Apache-2.0（PDF図面の読み込み・表示）
ライセンス
この公開用Webアプリケーション本体には、同梱の LICENSE に記載された MIT ライセンスが適用されます。サードパーティライブラリのライセンスと帰属表示は THIRD-PARTY-NOTICES.md および THIRD-PARTY-LICENSES.md を参照してください。配布時には必要なライセンス文書を同梱してください。
お問い合わせ・フィードバック
バグ報告や機能リクエストは、GitHubリポジトリのIssuesセクションまでお願いします。
バージョン情報
現在のバージョン: 2.1.0
主要機能一覧
✅ ST-Bridgeモデルの読み込みと表示
✅ 2モデル間の差分比較
✅ 3D/2Dカメラモード切り替え
✅ 4種類の色付けモード
✅ 階・軸クリッピング
✅ 許容差設定による柔軟な比較
✅ 位置情報/GUIDベース比較の切り替え
✅ 要素ツリービュー・断面ツリービュー
✅ 統計情報の表示
✅ カラーカスタマイズ
✅ 設定の永続化
