왜 지금 많은 기업들이 WebGL 기반 BIM 뷰어로 전환하고 있을까?
개요
"BIM 모델을 클라이언트에게 보여주려면 Revit이나 Navisworks를 설치해야 한다" — 이것은 더 이상 사실이 아니다. WebGL 기술의 발전으로 브라우저만 있으면 어디서든 BIM 모델을 3D로 확인할 수 있는 시대가 되었다. 이 글에서는 WebGL 기반 BIM 뷰어의 기술적 원리와 자사 3D 플랫폼이 어떻게 이 기술을 활용하고 있는지 소개한다.
WebGL BIM 뷰어의 핵심 가치
- 설치 불필요: Revit·Navisworks 없이 브라우저만으로 3D 모델 확인
- 실시간 협업: 여러 사람이 같은 모델을 동시에 보면서 의견 교환
- 경량화: 모바일에서도 구동 가능한 수준으로 최적화
WebGL BIM 뷰어의 기술적 원리
WebGL(Web Graphics Library)은 브라우저에서 하드웨어 가속 3D 그래픽을 렌더링할 수 있게 해주는 JavaScript API다. BIM 모델을 WebGL로 보여주기 위해서는 다음과 같은 변환 과정이 필요하다.
BIM 모델 (RVT, IFC, DWG 등)
↓ (포맷 변환)
3D 메시 데이터 (glTF, OBJ, FBX 등)
↓ (경량화)
최적화된 웹 에셋 (드래곤본 압축, LOD, 텍스처 압축)
↓ (로딩)
WebGL 뷰어 (Three.js, Babylon.js 등)
glTF 포맷의 중요성
BIM 데이터를 웹에서 표현할 때 가장 중요한 표준 포맷이 glTF (GL Transmission Format) 다. glTF는 "3D의 JPEG"라고 불릴 정도로 웹 전송에 최적화되어 있다.
| 포맷 | 용량 | 웹 최적화 | BIM 정보 | 추천 상황 |
|---|---|---|---|---|
| glTF | 매우 작음 | ★★★★★ | ★★★☆☆ (확장 가능) | 웹 뷰어, 실시간 렌더링 |
| OBJ | 중간 | ★★☆☆☆ | ★☆☆☆☆ (형상만) | 범용 3D 교환 |
| FBX | 큼 | ★★☆☆☆ | ★★★★☆ | 게임엔진 파이프라인 |
| IFC | 중간 | ★★☆☆☆ | ★★★★★ (BIM 정보 완전) | 오픈 BIM, 데이터 교환 |
주요 WebGL BIM 뷰어 솔루션
1) 자체 개발 뷰어 (Three.js 기반)
Three.js는 가장 널리 사용되는 WebGL 라이브러리로, 이를 기반으로 자체 BIM 뷰어를 개발할 수 있다.
필요한 기능:
- 3D 모델 로딩 및 렌더링 (glTF/IFC 포맷 지원)
- 카메라 컨트롤 (회전, 줌, 팬)
- 객체 선택 및 속성 표시
- 레이어/카테고리별 가시성 제어
- 측정 도구 (거리, 면적)
// Three.js 기반 기본 BIM 뷰어 코드 (개념 예시)
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(10, 10, 10);
// glTF 모델 로딩
const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {
scene.add(gltf.scene);
renderer.render(scene, camera);
});
2) 오픈소스 솔루션
- BIMsurfer: IFC 기반 오픈소스 웹 BIM 뷰어 (Three.js 기반)
- xeokit: 고성능 BIM/WebGL 뷰어, 대용량 모델 최적화
- IFC.js: IFC 파싱부터 렌더링까지 브라우저에서 처리
3) 상용 솔루션
- Autodesk Viewer: Forge API 기반, 다양한 CAD/BIM 포맷 지원
- BIM 360 Glue: Autodesk의 클라우드 BIM 뷰어
- Dalux: BIM 기반 현장 품질 관리 + 웹 뷰어
웹 BIM 뷰어의 핵심 기능
1) 대용량 모델 최적화
브라우저에서 BIM 모델을 부드럽게 렌더링하려면 다음과 같은 최적화가 필요하다.
| 최적화 기법 | 설명 | 효과 |
|---|---|---|
| LOD (Level of Detail) | 거리에 따라 상세도 자동 조절 | 렌더링 성능 2~3배 향상 |
| 드래곤본 압축(Draco) | 메시 데이터 압축 | 로딩 시간 50~70% 단축 |
| 텍스처 압축 (KTX2) | 텍스처 포맷 최적화 | GPU 메모리 사용량 감소 |
| 가시성 컬링 | 화면 밖 객체는 렌더링 생략 | 프레임 레이트 2배 향상 |
2) 측정 및 주석 도구
웹 뷰어에서도 기본적인 BIM 도구 기능을 제공해야 실무에서 활용 가능하다.
- 거리 측정: 두 점 사이의 실제 거리
- 면적 측정: 선택한 면적의 실제 면적
- 객체 정보: 선택한 객체의 속성(Property) 표시
- 주석(Annotation): 모델 위에 메모/마크업 추가
웹 뷰어의 성공 기준 — "모바일에서도 돌아가야 한다"웹 BIM 뷰어의 가장 큰 장점은 접근성이다. 현장 작업자가 스마트폰으로 BIM 모델을 확인할 수 있어야 웹 뷰어의 가치가 100% 발휘된다. 데스크탑에서만 잘 돌아가는 뷰어는 "설치형"과 차별화가 없다.
마무리
WebGL 기반 BIM 뷰어는 BIM 데이터의 접근성을 혁신적으로 높여준다. Revit이 없는 클라이언트, 현장 작업자, 해외 협력사 누구나 브라우저만 있으면 3D 모델을 확인할 수 있다. 특히 glTF 포맷의 표준화와 Three.js 같은 오픈소스 라이브러리의 발전 덕분에, 이제는 "뷰어를 직접 만들 것인가, 상용 솔루션을 쓸 것인가"의 선택이 가능해졌다.
다음 글에서는 이러한 3D 기술의 중요한 입력 소스인 3D 스캔(Point Cloud) → BIM 모델 변환 파이프라인에 대해 다룬다.