2021년 10월 4일 월요일

CDE 개발 지원 오픈소스 BIM 라이브러리 IFC.js 분석 및 사용방법

이 글은 CDE(Common Data Environment) 개발 지원 BIM(Building Information Modeling) 라이브러리 IFC.js 분석 및 사용방법을 간략히 설명한다. IFC는 3차원 건설 정보 모델로 건설 부재의 객체별로 형상과 속성을 저장할 수 있다. 

IFC.js는 최근 개발된 IFC관련 라이브러리로 이를 이용한 개발 사례가 조금씩 나타나고 있다.
IFC.js 활용 BIM-GIS 기반 CityLite 개발 사례

IFC.js 소개
IFC.js는 BIM 개방형 표준파일포맷인 IFC(Industry Foundation Classes)파일을 로딩, 디스플레이 및 편집할 수 있는 자바스크립트 라이브러리이다. 이 라이브러리는 안토니오 곤잘레스(Antonio Gonzalez Viegas)에 의해 개발이 주도되고 있다. 참고로, 그는 스페인 2018년 ETSAS 건축과를 졸업하고, BIM 연구 개발 경험이 많은 디지털 아키텍처이며, 재즈를 좋아한다.
IFC는 읽고 쓰기 어려운 복잡한 포맷이다. 실제 IFC 구조는 다음과 같다. 이 파일 포맷을 해석(parse, 파싱)하기 위한 여러 라이브러리가 이미 오래전부터 있었다. IFC.js는 웹기반으로 동작되는 순수 Javascript와 빠른 렌더링 성능을 지원하는 C++ WASM(Web assembly. 예제)기술을 이용해 개발되었다. 이를 통해 웹브라우져에서도 60 fps까지 렌더링 처리 된다. 그러므로, 스마트폰을 포함한 모든 컴퓨터 디스플레이에서 IFC.js 기능을 사용할 수 있다.

소스코드는 아래 github에 있으며, node, npm으로 실행할 수 있다.

설치
node.js, npm 패키지를 설치한다. 윈도우, 우분투, 리눅스 보두 가능하다.
node.js 설치(윈도우 버전 경우)

우분투 리눅스나 윈도우 파워쉘 터미널에서 아래 명령을 실행한다.
node -v
npm -v

버전이 제대로 출력되면, 아래 명령을 실행한다.
cd web-ifc-viewer
npm i yarn
npm run init-repo
npm run start

실행 화면(터미널)

실행 후 다음 링크를 클릭해, 클롬에서 열어본다.
그럼, 다음과 같은 IFC BIM viewer 화면을 확인할 수 있다. 

IFC.js 사용 방법
뷰어에서 왼쪽 side bar에서 파일 열기 메뉴를 통해, IFC 파일을 로딩할 수 있다.

주요 API 사용 방법은 다음과 같다.
// 라이브러리 임포트
import { IfcLoader } from 'web-ifc-three';
import { Scene } from 'three';

// THREE.js scene 생성
const scene = new Scene();

// IFC 로딩 및 scene 추가
const ifcLoader = new IfcLoader();
ifcLoader.load(ifcURL, (geometry) => scene.add(geometry));

이외에 BIM 속성 검색, 자료값 얻기, 섹션 표시 등 다양한 기능을 지원한다.

BIM 뷰어 화면 구조 분석
index.html은 다음과 같이 간단히 정의되어 있다. side bar와 viewer 요소가 정의되어 있다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IFC.js</title>
  </head>
  <body>
    <aside class="side-menu" id="side-menu-left"></aside>
      <div id="viewer-container"></div>
    <script type="module" src="./build/main.js"></script>
  </body>
</html>

화면 구조는 다음과 같다.

대부분의 기능은 main.js 자바스크립트에 구현되어 있다. 
이 main.js는 10만라인이 넘게 구현된 자바스크립트 파일이며, IFC로딩, 렌더링, 이벤트처리, 계산 등 대부분의 기능이 구현되어 있다.
시퀀스 구조 분석
주요 시퀀스 구조는 다음과 같다.
1. HTML 렌더링
2. VIEWER WEBGL 렌더링
3. OPEN FILE 이벤트 발생
4. loadIFC(url)
5. url이 가리키는 파일로 부터 파싱해 IFC element 데이터 구조 생성
6. 렌더링 가속을 위해 IFC element의 geometry 추출하여 메쉬(mesh) 그래픽 구조 생성
7. load 완료 시 scene 렌더링 루프에 추가
8. scene의 geometry의 vertex buffer를 WASM에 전달해 WebGL로 렌더링
 
주요 루틴은 다음과 같다.
class IFCLoader extends Loader {
  load(url, onLoad, onProgress, onError) {
    const scope = this;
    const loader = new FileLoader(scope.manager);
    loader.setPath(scope.path);
    loader.setResponseType('arraybuffer');
    loader.setRequestHeader(scope.requestHeader);
    loader.setWithCredentials(scope.withCredentials);
    loader.load(url, async function (buffer) {

      try {
        onLoad(await scope.parse(buffer));  // 1. IFC 데이터가 있는 buffer를 파싱함
      }
    }, onProgress, onError);
  }

  parse(buffer) {
    return this.ifcManager.parse(buffer);    // 2. ifcManager 객체의 parse 함수 호출
  }
}

async parse(buffer) {   // 파일 구조 해석
  if (this.state.api.wasmModule === undefined)
    await this.state.api.Init();
  await this.newIfcModel(buffer);  // Ifc모델 생성
  this.loadedModels++;
  return this.loadAllGeometry();    // Geometry 정보 해석
}

async loadAllGeometry() {
  await this.saveAllPlacedGeometriesByMaterial();   // Mesh 그래픽 구조 생성
  return this.generateAllGeometriesByMaterial();
}

async saveAllPlacedGeometriesByMaterial() {
  const flatMeshes = await this.state.api.LoadAllGeometry(this.currentWebIfcID);
  for (let i = 0; i < flatMeshes.size(); i++) {
    const flatMesh = flatMeshes.get(i);
    const placedGeom = flatMesh.geometries;
    for (let j = 0; j < placedGeom.size(); j++) {
      await this.savePlacedGeometry(placedGeom.get(j), flatMesh.expressID);
    }
  }
}

이벤트 처리는 다음과 같다.
const loadButton = createSideMenuButton('./resources/folder-icon.svg');
loadButton.addEventListener('click', () => {
  loadButton.blur();
  inputElement.click();  // IFC 파일 열기
});

const sectionButton = createSideMenuButton('./resources/section-plane-down.svg');
sectionButton.addEventListener('click', () => {
  sectionButton.blur();
  viewer.toggleClippingPlanes();  // 클리핑 처리
});

const dropBoxButton = createSideMenuButton('./resources/dropbox-icon.svg');
dropBoxButton.addEventListener('click', () => {
  dropBoxButton.blur();
  viewer.openDropboxWindow();  // 드롭박스 처리
});

const handleKeyDown = (event) => {
  if (event.code === 'Delete') {
    // viewer.removeClippingPlane();
    viewer.dimensions.delete();     // 치수 삭제
    viewer.context.ifcCamera.unlock();
  }
  if (event.code === 'KeyH') {
    viewer.context.ifcCamera.goToHomeView();  // 카메라 홈 위치로 이동
  }
  if (event.code === 'KeyD') {
    viewer.context.ifcCamera.setNavigationMode(NavigationModes.FirstPerson);  // 1인칭 시점 카메라 이동
  }
  if (event.code === 'Escape') {
    window.onmousemove = viewer.IFC.prePickIfcItem;  // Ifc 요소 선택 모드
  }
  if (event.code === "KeyP") {
    viewer.context.ifcCamera.toggleProjection();  // 카메라 프로젝션 모드
  }
};

정적 구조 분석
정적 구조를 분석하기 위해 UML(Unified Modeling Language)로 역설계해 보았다.
패키지 구조

앞서 설명된 라이브러리 이외에 애니메이션 엔진인 GSAP(GreenSock animation platform) 코드가 일부 사용되었다.
GASP

주요 클래스는 다음과 같다. IFCManager가 IfcAPI, model, parser 등 전체를 관리하고, Loader가 파일을 파싱하는 구조이다.

카메라 등 애니메이션 처리는 GreenSock을 사용한다. 치수 등 측정을 지원하기 위한 클래스가 구현되어 있다. 

main.js 모듈은 기타 벡터, 행렬 등 유틸리티 클래스와 함수가 정의되어 있다.

BIM 객체 속성 표시 기능 구현해 보기
앞서 분석된 내용을 참고하여, BIM 객체의 속성을 표시하는 기능을 간단히 구현해 본다. 우선, 각 소스코드를 아래와 같이 편집한다.

// web-ifc-viewer\example\index.html 파일을 열고, 아래와 같이 section, textarea 요소 추가
  ...
  <body>
    <aside class="side-half-menu" id="side-menu-left"></aside>

    <div id="viewer-container"></div>
    <section class="panel-botton" id="side-panel-bottom">
      <textarea class="textarea-bottom" id="textarea-bottom" spellcheck="false" readonly>test</textarea>
    </section>    
    <script type="module" src="./build/main.js"></script>
  </body>

// web-ifc-viewer\example\styles.css 파일을 열고, 아래 style을 추가함
...
.side-menu {
    z-index: 1;
    position: fixed;
    background-color: #36393F;
    height: 100vh;
}

.side-half-menu {
    z-index: 1;
    position: fixed;
    background-color: #36393F;
    height: 80vh;
}

.panel-botton {
    z-index: 1;
    position: fixed;    
    background-color: #FFB555;
    width: 100%;
    height: 20vh;    
}

.textarea-bottom {
    width: 100%;
    height: 80%; 
}

.side-sub-menu {
    width: 100%;
    height: inherit;
    margin: 2px;
}

// E:\Projects\web-ifc-viewer\example\build.js 파일을 열고, ondblclick 이벤트 위치에 아래 코드를 추가함
...
    window.onkeydown = handleKeyDown;
    window.ondblclick = async () => {
      viewer.clipper.createPlane();

      const item = await viewer.IFC.pickIfcItem(true);  // 현재 마우스 클릭 위치의 Ifc element pick해 얻기
      if(item.modelID === undefined || item.id === undefined ) return;

      const pset = await viewer.IFC.getProperties(item.modelID, item.id, true);
      console.log(pset);

      var data = "";
      const text = document.getElementById('textarea-bottom'); // 2021.10. Pset 출력 text area 획득

      for(var i = 0; i < pset.type.length; i++) {
        data = data + pset.type[i].constructor.name + '\n';
      }

      for(var i = 0; i < pset.psets.length; i++) {
        data = data + pset.psets[i].Name.value + '\n';
        for(var j = 0; j < pset.psets[i].HasProperties.length; j++) {
            data = data + '   ' + pset.psets[i].HasProperties[j].value + '\n';    
        }
      }

      text.value = data;
...

구현 결과는 다음과 같다. IFC를 로딩한 후, 벽체 등 객체를 더블클릭하면 아래 패널창에 속성값이 출력될 것이다. 
벽체 객체 선택 후 속성 출력된 모습

IFC.js 응용과 한계
IFC.js를 응용하는 방법은 다양하다. 개발자가 언급한 것처럼 CDE를 구현할 수도 있고, BIM 모델 체커를 만들 수도 있다. IFC의 Property Set에 외부 정보를 연결하면, IoT, 디지털 트윈 등을 구현할 수 있다. GIS와 연계하면 BIM-GIS 개발이 가능할 것이다. 

다만, 유사한 오픈소스 프로젝트인 xBIM과 비교를 해보면, 정보 쿼리 기능, BIM 서버 연계, 대용량 처리, 확장성 등의 개선이 필요해 보인다. 그럼에도 가장 간편하게 BIM 응용 서비스를 웹 기반으로 개발할 수 있다는 점, WASM을 이용한 그래픽 가속 기능은 큰 장점이다.

마무리
이 글에서는 간단히 CDE 개발을 지원하는 오픈소스 BIM 라이브러리인 IFC.js를 분석하고 사용방법을 확인해 보았다. IFC.js는 구조가 복잡하고 사용이 쉽지는 않다. 그럼에도 앞서 언급한 장점이 많은 라이브러리이다. 
IFC.js 기여자
레퍼런스

댓글 없음:

댓글 쓰기