IFCのデータ構造を可視化する「IFC graph viewer」を作ったよ

はじめに

BIM（Building Information Modeling）は建物の3Dモデル（Modeling）にデータ（Information）が付与されています。そのため、単純な見た目の情報だけではなく、データベースとしての使い方もできるため、様々な活用方法が考えられます。
しかし、ArchicadやRevitなどのネイティブのソフトウェアによって作成されたBIMファイルは、そのソフトを介さないと使用できません。ソフトウェアにAPIが整備されていて自由にデータのやり取りができるのであればいいですが、多くのソフトウェアではAPIは整備されていないと思われます。

そのため、データを解析しようとか、必要なデータを抽出して何かしらのアプリケーションに活用しようとか、そういったBIMのInfomation要素を活用して何かをしようとなるとBIMの標準フォーマットであるIFCファイルを使用する必要があります。

ただ、IFCファイルを使用するにもファイルの構造を理解している必要があります。IfcOpenShellやIFC.jsのようなIFCを解析するライブラリも存在しますが、それらを使用するにしても中身をある程度理解していないと、サンプルコードを動かすだけで終わってしまうでしょう。

以前にIFCファイルの中身を解読するという記事を書きましたが、このときはファイルを手作業で一行ずつ見て解析するという苦行をやりました。ぶっちゃけめんどくさいですもうやりたくないです。

だったらIFCファイルのデータ構造を可視化するツールを作ってしまえ！！というわけで作りました。

できること

こんな感じのことができます。

使い方やインストールについてはGitHubに書いているのでそちらを見てもらえれば。
本当は実行ファイルにしてリリースしようかと思ったのですが、ウイルス判定されてしまったので諦めました。

ビルドした実行ファイルも上げています。

構成とか技術選定とか

興味ある人いるのか知らないけど構成を書く。

構成

バックエンド、フロントエンドの考え方で、表示はブラウザ（HTML, CSS, JavaScript）、IFCの解析処理はPythonを使用しました。

• フロントエンド（可視化） : Vite, Vue, TypeScript
• バックエンド（解析）: Python, Flask, IfcOpenShell

可視化処理

IFCのドキュメントとかを見つつ、IFCファイルのデータ構造を分析していたらグラフ構造っぽいことがわかりました。グラフ構造を可視化する方法を調べるとネットワークグラフ描画ライブラリ7個まとめなどのようにJavaScriptを使用してブラウザで可視化する方法が多く出てきます。
普段使用している言語がPythonかJavaScriptだったこともあり、JavaScriptを使用することにしました。ただし、表示処理は描画ライブラリを使用せずにVue + TypeScriptで書きました。理由はライブラリの学習コストの問題と、後で拡張するときにライブラリが対応していなくてできない、ということを避けたかったというのがあります。それに今ではChatGPTがいるので自力でもそれなりに書けてしまうというのもあります。

そして可視化の処理はユーザが指定した部分を表示するような形にしました（IFCのグラフ構造すべて表示させるのはデータ量の関係で無理なので）。そのため、作成時にイメージしたのはグラフネットワークというよりも、インタラクティブに編集のできるBabylon.jsのNode Material EditorやUnreal Engineのブループリントのなどようなノードエディタでした。
そのため見た目的にノードエディタっぽくなっています。でもデータをノード間で流しているわけでも、ノードで処理をしているわけでもなく、グラフ構造を表示しているだけです。

IFC解析処理

IFCのライブラリはIFCエンティティの継承構造や逆属性を扱う必要があったためPythonのIfcOpenShellを使用しました。（調べた限りIFC.jsではできなさそうでした。）

そしてサーバー起動は楽ちんなのでFlaskを使用しました。

デスクトップアプリ化 （したかった）

最終的にpywebviewとPyInstallerを使用して、デスクトップアプリ化するつもりだったのですが、Microsoft Difenderにウイルス判定されて削除されてしまったので断念しました。しょんぼりです(´・ω・｀)

2023-12-24 追記
→ PyinstallerではなくNuitkaを使用したら問題なさそうだったのでGitHubに上げています。多分大丈夫だと思いたい...。

まとめ

IFCファイルのグラフ構造を可視化するツール「IFC graph viewer」を作りました。

正直なところこのツールがなにかに直接的に役立つかというとなんとも言えません。これを使ってなにかする、というよりも「IFCのデータ構造特殊でよくわかんないからデータいじって解析するにしてもハードル高すぎない！？」という問題の手助けができたらいいなーというモチベで作りました。あと自分でノードエディタっぽいものを作りたかった。

まだ機能としては最小限しか作っていないですが「最小限出来てるんだからとりあえず公開してしまえ！」と思って公開した感じです。そのためモチベが続く限りまだ色々更新するつもりです。

参考

この記事を書くのに参考にしたものではなくて、記事を書いている途中で見つけたもの。IFCをグラフデータベースにしてあれこれしているっぽい。ちゃんと読んでないからこの記事で書いているIFCのグラフとは違うものを表現して使っているかも。