メインコンテンツへスキップ

はじめに

🎮 IFC.jsは、ブラウザ上でIFCモデルを読み込み、表示・編集するためのJavaScriptライブラリです。お手持ちのIFCモデルでライブデモをお試しいただき、IFC.jsの実力を実感してください。

このライブラリは何ですか?#

IFCとは?#

🏠 建築家はもはや建物の設計図を一枚一枚描くのではなく、The SIMSでモデル化された住宅のように、建物の3Dモデルを作成します。作成されたモデルには形状と情報の両方が含まれているため、この作業方法はBIM(Building Information Model)と呼ばれています。

🔥 しかし、建物は非常に複雑なので、これらのモデルをすべて作成できる単一のアプリケーションはありません。それぞれのアプリケーションには、形状のモデリング、構造の計算、エネルギーシミュレーション、プロジェクトドキュメントの作成などのミッションがあります。

👀 これらのツールは世界中の複数の開発者から提供されており、それぞれが独自のフォーマットで動作しています。つまり、構造計算アプリケーションで作成した構造モデルは、エネルギーシミュレーションソフトでは読めませんし、その逆もまた然りです。では、なぜ複数のツールから建物のモデルを作成することができるのでしょうか。

🎉 その答えは、IFCです。BuildingSMART社が作成した、建物の3Dモデルを格納するためのフォーマットです。オープンなので、誰でも読み書きできます。やったー!

IFCの問題点#

BIMアプリケーションを作ろうとする人は、他のツールから情報をインポート・エクスポートするために、IFCファイルを読み書きする必要があります。残念ながら、IFCは読み書きが困難なフォーマットです。何千ページものドキュメントがあり、自作のIFCパーサーを作成・維持するのは大変な作業です。

IFCを買えるのか?

💸 これは、何人もの開発者がフルタイムで働いている企業でなければできないことです。もう、そんなにオープンな感じではありませんよね?

IFCの内部がどのようになっているか気になる方のために、例を挙げてみましょう。このような何十万行ものデータを解析することを想像してみてください。

#6699= IFCCARTESIANPOINT((0.,-1.7053025E-13));
#6701= IFCAXIS2PLACEMENT2D(#6699,#23);
#6703= IFCCARTESIANPOINT((892.,-253.399999,150.));
#6705= IFCAXIS2PLACEMENT3D(#6703,#15,#19);
#6706= IFCEXTRUDEDAREASOLID(#6702,#6705,#19,506.8);
#6707= IFCCOLOURRGB($,0.50196,0.501913,0.501960);

💀 パーサーを一から作り、IFCスキーマが変更されるたびにメンテナンスする気があったとしても、この問題に取り組むにはいくつかの自明ではない問題があります。非常に大きなファイルのメモリをどのように管理するか?幾何学的な生成をいかに効率的に実装するか?IFCが正しく定義されていない場合の対処法は?

IFC.jsの救出#

すべての開発者が自分のアプリケーションのためにIFCファイルのリーダーとライターを独自に実装しなければならないのは意味がありません。特に、私たちは皆、同じことをしています。**ジオメトリやデータのインポートとエクスポートです。

IFC.jsは、IFCファイルの読み書きを非常に簡単に行うことができるJavaScriptライブラリです。

これにより、建築・建設アプリケーションの開発者は、IFCでの作業が容易になり、ビジネスに真に付加価値を与える機能性に集中することができます。

IFC.jsを簡単に説明すると#

IFC.jsには2つの焦点があります。

ジオメトリ

IFC.jsが3Dシーンを生成できるのは、Three.jsやBabylon.jsなどの3Dライブラリに対応しているからです。つまり、3DのBIMツールをすぐに作ることができるのです。

データ

そのジオメトリに関連するすべてのプロパティへのハイレベルなアクセス。つまり、建築物の構成要素やその材料、熱特性、構造強度などのデータに簡単にアクセスできるのです。

IFC.jsを使ったBIMアプリケーションの作成は、JavaScript、HTML、CSSでWebページを作成するのと同じくらい簡単です。

import { IfcLoader } from 'web-ifc-three';
import { Scene } from 'three';
//THREE.jsのシーンを作成します。
const scene = new Scene();
//...
//IFCをロードし、シーンに追加する
const ifcLoader = new IfcLoader();
ifcLoader.load(ifcURL, (geometry) => scene.add(geometry));

誰のためのライブラリなのか#

このライブラリは、BIMアプリケーションを開発しようとする人のためのものです。建設業界向けのアプリケーションを作成する開発者や、IFCファイルのデータを活用したいと考えている建築家やその他の専門家が対象です。

このライブラリを使用するには、JavaScript、HTML、CSSの基本的な知識が必要です。この知識は、このドキュメントの範囲を超えています。また、IFCのジオメトリを表示するために、何らかの3Dライブラリ(Three.jsまたはBabylon.js)を使用する必要があります。

😊 何から始めればいいのかわからないという方は、こちらをご覧になるか、Discord Channelに参加して、ご挨拶してみてはいかがでしょうか。

IFC.jsはなぜ違うのですか?#

IFC.jsは、最もユビキタスな言語の一つであるJavaScriptのために開発されたライブラリです。つまり、Webブラウザ、デスクトップアプリケーション、モバイルアプリケーションとの互換性があります。また、JavaScriptは最も簡単に習得できる言語の一つであり、HTMLやCSSを用いてユーザーインターフェースを構築することができます。言い換えれば、IFC.jsを使ったBIMアプリケーションの作成は、ウェブページを作成するのと同じくらい簡単なのです。

マルチプラットフォーム#

IFC.jsを使えば、あらゆるプラットフォームに対応したオープンなBIMアプリケーションを作ることができます。

サーバー通信に頼らずにIFCファイルを読み書きし、3Dを表示するフロントエンドのWebアプリケーションは、バニラJavaScriptや、React、Vue、Angular、Svelteなどのツールを使って作成することができます。つまり、IFC.jsを使えば、あらゆるWebブラウザをオープンなBIMアプリに変えることができるのです。

スピード#

⚡️ Webアプリケーションの経験がある方は、JavaScriptベースのIFCライブラリの弱点はパフォーマンスだと思っているかもしれません。しかし、IFC.jsのコア部分は、WebAssemblyとEmscriptenを組み合わせたC言語で開発されています。これは特に最大のパフォーマンスのために設計されており、IFC.jsはブラウザ内で直接実行されながら、デスクトップアプリケーションの速度とパフォーマンスに近づくことができます。

特徴#

👓 IFC.jsは、IFCファイルをシームレスに読み込むことができます。

🏐 ブラウザ上で60fpsで動作する3Dジオメトリを生成します。

💄 Three.jsの力でジオメトリの外観を簡単に編集できます。

🏠🏠🏠 連携した複数のIFCモデルを読み込みます。

📃 レポートやデータベースのIFCプロパティを取得します。

✍ また、IFC.jsはIFCファイルを一から編集・書き込みすることもできます。

ソースコード#

IFC.jsは大規模な多言語のライブラリです(C++ , TypeScript JavaScriptなど)。それを一つのリポジトリに収めるのは難しく、扱いにくいものです。そのため、このライブラリは複数のリポジトリに存在し、それぞれが独自の目的を持っています。それらはここで見ることができます。

  • web-ifc
  • web-ifc-three
  • web-ifc-viewer

このライブラリの中核となるのは、C言語でゼロから書かれ、Emscriptenを介してWebAssemblyにコンパイルされたIFCのパーサーとジオメトリジェネレータです。このリポジトリは、IFC ファイルを読み込んでそのデータをメモリにロードするという複雑な作業をカプセル化しています。

貢献する#

IFC.jsでオープンBIM開発の世界をどんどん良くしていきたいと思いませんか?ライブラリは大きいので、どこに参加したいかを選択する必要があります。

コードは書けないけど、入ってみたい

それはいいですね。コーディング以外にも、できることはたくさんあります。その方法については、Discordチャンネルをご覧ください。

パーシング、ジオメトリ、C++

C++ , WebAssembly, パーシングやIFCの細かい部分に情熱を持っている方は、業界最速のオープンソースBIMパーサーで私たちを助けてください。web-ifcです。

Three.js、ジオメトリ、Typescript

あなたがThree.jsの開発者であれば、web-ifc-three,which is は、公式のThree.js IFC Loaderです。

BIMツール、ブレインストーミング、UX

クールなオープンBIMアプリケーションの作成に興味があり、BIMツールやユーザーインターフェースの素晴らしいアイデアをお持ちの方は、web-ifc-viewerを市場で最高のIFCビューアにするためにご協力ください。

いずれにしても、Discordチャンネルに立ち寄っていただき、ご挨拶をして、気になることを教えていただければ、ご案内ができると思います。