[Astro] #124 STEP / IGES / BREP 3D Viewer v2 — 測定機能の拡張・肉厚/勾配/曲率解析・分解図表示を実装

概要

前回の記事で公開したOpenCASCADE（occt-import-js）+ Three.jsによる「STEP / IGES 3D Viewer (v1)」に大幅な機能拡張を行い、v2へアップデートしました。

単に3Dモデルを閲覧・操作するだけでなく、実務CADツールとして活用できるよう

「4つの測定モード（距離・角度・面・パーツ体積/表面積）」

および

「3つの形状解析機能（肉厚・勾配角・曲率ヒートマップ）」

、さらに

「分解図表示（Explode View）」

を追加しました。

STEP / IGES 3D Viewer v2

STEP/IGES/BREPファイルをブラウザで3D表示・各種解析。マルチ測定、肉厚・勾配・曲率解析、分解図表示に対応。

lain-lab.com

主なアップデート点（v1 ➔ v2 差分）

セクション	v1	v2（今回実装）
測定機能 (MEASURE)	2点間距離のみ（単一表示）	4モード展開: 距離(複数保持・Δ分解), 角度(3点), 面(面積/法線), パーツ(体積/表面積/Bbox)
解析機能 (ANALYSIS)	なし	新規追加: 肉厚ヒートマップ, 勾配角解析(金型抜き方向), 曲率ヒートマップ
表示機能 (EXPLODE)	なし	新規追加: モデルのパーツ分解表示（Explode Factor制御）
干渉・ clearance	なし	UI構造追加（拡張準備）

---

1. 測定ツール（MEASURE）の大幅拡張

従来の「2点間距離」のみの機能から、目的に合わせて切り替えられる4つの測定モードを搭載した。全モードで選択中の表示単位（mm / cm / m / inch / foot）が反映される。

📏 Distance（距離測定）

• 2点クリックで3D空間上の距離を計算。
• 測定結果を上書きせず、複数箇所を保持して同時表示可能。
• 距離数値だけでなく、ΔX / ΔY / ΔZ の成分分解表示に対応。

📐 Angle（角度測定）

• 3点クリック（点A ➔ 頂点 ➔ 点B）でなす角を計算。
• 頂点位置に角度ラベルを表示。

◻ Face（面測定）

• クリックした三角形ポリゴンの面積（Face Area）、法線ベクトル（Normal）、三角形インデックスを計測。
• 選択面を半透明青色でハイライト表示。

📦 Part（パーツ測定）

• アセンブリ内のパーツ（メッシュ）をクリックすることで、以下の幾何情報を即座に計算：
  • Volume（体積）: Signed Volume（符号付き四面体体積和）法で精度高く計算
  • Surface Area（表面積）: 全構成三角形の面積和
  • Bounding Box Dimensions（X/Y/Z寸法）
  • Triangle Count（構成ポリゴン数）

スクリーンショット

2. 形状解析ツール（ANALYSIS）の追加

3D CADデータの評価や金型設計チェックに役立つ3種類のメッシュ解析機能を搭載。

🔥 Thickness（肉厚解析）

• レイキャスティングを用いて、各頂点・サンプル点から対向面（裏面）までの最短距離を算出。
• 設定した Min / Max 範囲に応じてリアルタイムにヒートマップ（赤〜青）を適用。
• 最小肉厚・最大肉厚・平均肉厚の統計値を即座に算出。

📐 Draft Angle（勾配角解析）

• 指定した金型抜取り方向（+Y, -Y, +X など）に対する各面の角度（勾配角）を判定。
• 設定した閾値（例: 3°）以下のアンダーカットや立ち立ち面（勾配不足）を特定色で視覚化し、成形不良リスクをチェック可能。

🌊 Curvature（曲率解析）

• ジオメトリの各頂点における局所曲率を計算し、カラーマップ化。
• 外れ値処理の工夫: ノイズやエッジの異常値（極端に大きい曲率値）でカラーマップが潰れないよう、全曲率値をソートして2%〜95%パーセンタイルでクランプ処理を実施。これにより、平面（寒色）とR面・フィレット（暖色）のコントラストがはっきりと表現。

3. 分解図表示（EXPLODE VIEW）

• アセンブリモデルのバウンディングボックス中心を基準とし、各パーツを中心に沿った方向へ押し広げる分解図表示機能を実装。
• Factor スライダー（0%〜100%）で分解距離をリアルタイムに調節可能。内部構造の確認や部品構成の把握が容易になっています。

技術実装と工夫

Signed Volume法による正確な体積計算

パーツ体積の計算には、原点と各三角形メッシュで形成される四面体の符号付き体積を全ポリゴンで加算する Signed Volume 法 を採用。

$\text{Volume} = \sum_{i} \frac{1}{6} \left( \mathbf{v}_{i1} \cdot (\mathbf{v}_{i2} \times \mathbf{v}_{i3}) \right)$

閉じたメッシュ（Solid）であれば、複雑な形状であってもWASMから渡されたジオメトリデータから直接正確な体積を高速計算。

今後の展望

今回のアップデートにより、STEP Viewerは単なる「ファイル確認用ビューア」から、寸法確認・幾何特性評価・製造性チェック（肉厚/勾配）が行える実用的なWeb CAD解析ツールへと進化できました。

WebAssembly（occt-import-js）とThree.jsの組み合わせにより、クライアントサイドのみでこれだけのCAD解析処理が滑らかに動作することが実証できたため、今後はアセンブリ間の干渉チェック（Clearance Check）のさらなる精度向上や、断面表示時のキャップ面塗りつぶし処理などの拡充を進めていきます。