ブラウザ版4Dシミュレーションの開発
こんにちはアルパカ芋けんぴです。
今回は、4dシミュレーションのブラウザ版アプリケーションを作った話です。
Revitのアドインで4Dシミュレーションのツールを作って、社内に共有しました。そこそこ自信があったのですが、返ってきたのがこれです。
「いいツールですね。で、これRevit使える人しか意味なくないですか？」
まあ、そうですよね。
何を作っていたか
GaNett4Dという名前のRevitアドインです。
BIMモデルの部材を工種ごとに自動で色分けして、工区マスで範囲を囲んで工程と日程を紐付ける。あとは日付を動かすと未着工→施工中→完了と色が変わっていく、というよくある4Dシミュレーションです。
共有したときの反応は、きれいに割れました。BIM担当者からは「便利ですね」。それ以外の人からは、冒頭のあれです。
言われてみればそのとおりで、施工計画を実際に立てているのは生産設計の部署や現場の所員さんです。Revitのライセンスは持っていないし、仮に持っていても普段は開きません。一番使ってほしい人のところに届いていませんでした。
機能を足す話ではないな、と思いました。
IFCならブラウザで開ける
Revitに依存しているのが原因なら、Revitを外すしかありません。
幸いBIMにはIFCという公開標準のフォーマットがあります。Revitからも他社BIMからも書き出せて、中身は誰でも読めます。これをブラウザで開いて4D化できれば、インストールもライセンスもいりません。
技術的にはweb-ifc（WASM）でIFCを解析して、three.jsで描画しています。ビルドはVite。フレームワークは使っていません。全部オープンソースです。
あとこれは社内事情ですが、外部のCDNを一切参照しない作りにしました。うちはVPNの閉域網なので、外を見にいく作りだとそもそも動きません。モデルも端末の中だけで処理して外には出しません。情シスに説明したとき通ったのは、たぶんこの2点です。
移植してみたら、一番の資産は辞書でした
工種の判定は上から順に見ていって、当たったところで止まります
作りはじめてから気づいたのですが、Revit版で価値があったのは3D描画でもUIでもなくて、工種分類の辞書でした。
部材のファミリ名や材料名から工種を推定するルールを、公共建築工事標準仕様書をベースに361件持たせてあります。「RC_で始まったらコンクリート工事と型枠工事」「材料が鉄骨なら鉄骨工事」みたいな、身も蓋もないルールの集まりです。これで27工種をカバーしています。
C#の辞書をJSに変換するスクリプトを書いて移しました。361件が1件も欠けていないことは確認しています。ここがずれるとRevitで見た色と現場で見る色が違うことになるので、譲れないところでした。
判定の順番はこうなっています。
Pset（IFCに工種が書いてあれば最優先）
ファミリ名の接頭辞（116ルール）
ファミリ名のキーワード（85ルール）
IFCクラス（IfcColumnとかIfcSlabとか。57ルール）
材料名（103ルール）
どれにも当たらなければ未分類
この話をすると必ず「Revit側で何もせずにIFC書き出ししたらどうなるの？」と聞かれます。答えは4と5だけが効きます。柱・梁・スラブ・壁くらいは拾えますが、細かい工種分けは落ちます。命名規則が整っているモデルほど当たる、というだけの話でした。
なので辞書はCSVで出し入れできるようにしています。物件ごとのルールがあれば、そちらに寄せられます。
できたもの
部材をクリックして中身を見る
名前、IFCクラス、GlobalId、工種、材料、Psetが出ます
まずは当たり前のところから。部材をクリックすると、その部材だけハイライトして属性を出します。工種ごとの表示切替もワンクリックにしたので、「鉄骨だけ見たい」がすぐできます。
色はRevit版と同じパレットをそのまま使いました。並べて見たときに違和感がないのは、地味ですがけっこう大事だと思っています。
範囲を囲んで日程を流し込む
囲った範囲に、工区と工程と日程をまとめて紐付けます
4Dで一番しんどいのは、部材と工程の紐付けです。1本ずつ日付を入れていたら終わりません。
なのでRevit版と同じく、3D上で範囲を囲んで「工区マス」を作って、そこに交差した部材へ日程をまとめて流し込む方式にしました。マスは作ったあとから面をドラッグしてサイズを調整できます。
下のガントで日程をいじれば3Dに即反映されますし、行を選ぶと対象のマスが3D上で光ります。このへんはRevit版の挙動をそのまま持ってきました。
日付を動かす
未着工は非表示、施工中は工種色、完了はグレーです
本題です。工期を通しで再生できますし、任意の日付にカーソルを合わせればその日の出来形が見えます。土日を飛ばして稼働日だけ送るモードも入れました。
階で切る
階を選ぶと真上からの表示に切り替わります
3Dだけだと躯体の割付や工区の切り方が検討しづらいので、階を認識して平面ビューに切り替えられるようにしました。平面と3Dを行ったり来たりしながら手順を組みます。
持ち出せないと使われない
ここは声を大きくして言いたいところです。
どれだけ3Dがきれいでも、検討した結果を持ち出せないツールは使われません。会議に出せないので。
なので出力まわりはわりと真面目に作りました。
連番画像の書き出し（工期の各日を1枚ずつPNGにしてZIPで保存）
動画の書き出し（1日あたりの秒数を指定できるので、朝礼用に尺を詰められます）
工程CSVの取込・書出（現場で使っている工程表を工程名で突合します）
プロジェクトJSONの保存（別のPCや別部署で続きから触れます）
工程CSVがなかなか手強くて、Shift-JISの判定と、工程名の表記ゆれ（改行とか記号とかが平気で混ざっています）の正規化でだいぶ時間を使いました。ここが通らないと既存の運用に乗らないので、粘るしかありませんでした。
うまくいかなかったところ
IFCに書き戻そうとして、やめました
最初は工程情報をIFCに書き戻すつもりでいました。
でも途中でやめました。IFCは実質書き出し専用で、Revit側でモデルを直して再書き出しした瞬間に、こちらで書いた内容は消えます。言われてみれば当然なのですが、しばらく気づかずに作っていました。
結局、工程と日程はGlobalIdをキーにブラウザ側で持って、プロジェクトJSONで保存する形にしました。Revitへの戻しは、既存の工程CSVの運用に乗せています。
階の高さが取れない
IfcBuildingStorey のElevationを読めば階が分かるはずでした。
実際にやってみると値が当てになりません。IFC書き出しのときの原点移動が効いていて、階の高さとして使えないケースがありました。仕方がないので、部材の実座標から高さの帯を求めて階を推定する方式に変えています。
これが正しいやり方なのかは正直よく分かっていません。今のところは動いています。
日程伝播が全部の工種に飛んだ
工種ビューでマスを作って日程伝播をかけたら、マスに入っている部材ぜんぶに日付が入りました。コンクリートの工区を作ったつもりが、鉄骨にも同じ日程が乗ります。
追いかけてみると、Revit版は「4D_工種名」というビューで対象がそもそも絞られていて、それで表面化していませんでした。Web版には絞りがないのに、ロジックだけ持ってきていたわけです。
マスの工種と部材の工種が一致するものだけに当てるよう直しました。これがないと工区ごとの工程が組めないので、気づけてよかったです。
ついでにクレーンも作りました
機種を選ぶと車体の寸法も軸数もブーム段数も変わります
作っている途中、Xでブラウザ上のクレーン楊重計画ツールを開発している方の投稿を見かけました。
これ4Dと組み合わせたら面白いのでは、と思って、そのまま手を出しました。完全に脱線です。
タダノの公式諸元表をもとに、GR-160N（16t）、GR-250N（25t）、GR-700N-3（70t）の3機種を入れました。プルダウンで機種を選ぶと、見た目も性能も切り替わります。
70tラフターにジブ8.4m。作業半径18.71mで定格2.98t、吊り荷重2.00tなので使用率67%
旋回、ブーム起伏、多段伸縮、フック巻きが実機どおりに連動します（フックは常に鉛直です）
アウトリガの張出幅ごとに定格総荷重表を持たせて、作業半径×ブーム長で補間しています。吊り荷重と比べてOK／NGと使用率が出ます
ジブにも対応しています
障害物を置いて干渉と作業範囲を見られます
ちなみに一番時間を使ったのは、諸元表の読み取りでした。
6段ブームの機種は伸縮モードごとに表の列が分かれているのですが、最初それを別のブーム長として読んでいました。作業半径のわりに定格が妙に大きいなと思って諸元表を見直したら、列がずれていた。全部やり直しです。今は安全側に倒して、モード間の最小値を採るようにしています。
一応書いておくと、入れてある定格値は諸元表からの転記で、アウトリガ最大張出・360°といった条件付きの数字です。実作業の前には必ず公式の諸元表と照らし合わせてください。ツールの画面にも常時その旨を出しています。
結局どこまで届いたか
Revitアドインとの機能対応です
RevitアドインでできてWeb版でできないことは、最後は「BIMモデルそのものの編集」だけになりました。設計変更はこれまでどおりRevitでやって、IFCを書き出し直して読み込みます。Web版は閲覧と計画に振り切りました。
逆にクレーンの楊重計画は、Web版にしかない機能になりました。
費用は追加ライセンス0円です。ライブラリは全部オープンソースですし、配信も静的ファイルを社内のWebサーバーに置くだけ。端末も普通の業務用PCで動きます。稟議を出す側としては、ここが一番ありがたいところでした。
コードはほぼ全部Claude Codeに書かせました
正直に書いておくと、Web版のコードはほぼ全部Claude Codeに書かせています。
私がやったのは、仕様を決めることと、モジュールごとの担当範囲とインターフェースを先にドキュメントへ書いておくこと。あとは出てきたものを実際に触って「アウトリガの向きが違います、車体の幅方向に伸びます」「日程伝播が効きすぎです」と突き返すこと。だいたいこの繰り返しです。
効いたのは、書き始める前にモジュール間のAPIを一枚のドキュメントに固めてから並列で作らせたことでした。ここを飛ばすと、それぞれが好き勝手な前提で書いて、あとから合わなくなります。一度やって痛い目を見ました。
Revitのアドインを一人で書いていた頃と比べると、手数はまったく違います。ただ、何を作るか決めるところと、おかしいと気づくところは今のところ人がやるしかないので、そこは変わっていません。
これから
分類がどこまで当たるか、BIMを触らない人が操作についてこられるかは、実物でやってみないと分かりません。
そのあとで辞書を社内の標準として固めて、URLを配ります。クレーンツールの4Dビューアへの統合と、他メーカーの機種追加も、やりたいことリストには入っています。
「使える人が限られる」と言われたところから始まったので、次は「使ってみました」と言われるところまで持っていきたいです。
