Potree 렌더링 서버 기반 대용량 스캔 데이터 가시화 결과(52,230,141 포인트. 1,775,825,021 byte, 248 x 266미터. 한국건설기술연구원 본관동 SLAM 데이터 일부)
대용량 점군 렌더링 실행 영상
소개
Potree는 오픈소스로 개발되었으며, nodejs 위에서 동작한다. Potree는 WebGL을 사용하며, 대용량 점군 렌더링을 위해 격자 구조로 LoD(Level of Detail) 생성하는 기능을 제공한다. 참고로, Potree는 TU faculty of Informatic의 Institute of Visual Computing & Human-Centered Technology, Research Division of Computer Graphics의 TU Wien Scanopy(Scan Data Organisaion, Processing and Display) project에서 시작되었고 Harvest4D project의 한 부분이었다. Harvest4D는 3차원 디지털 모델과 각종 센서 데이터를 연결해 도시 관리 등 다양한 곳에 사용하려는 목적으로 시작된 프로젝트이다.
Potree의 격자구조는 다음과 같이 옥트리(Octree) 형식의 공간인덱싱 기법을 사용한다. 이를 통해 렌더링 성능을 확보할 수 있는 LoD을 생성할 수 있다.
Octree를 이용해 생성된 LoD 피라미드(Martinez-Rubi, 2015)
Potree에 대한 좀 더 상세한 내용은 다음 링크나 github 를 참고하길 바란다.
사용방법
Potree rendering server
다음처럼 nodejs와 npm 최신버전을 설치한다(10.0 버전 이상. 오래된 버전으로 진행시 빌드 에러 날 수 있음).
node -v
sudo npm cache clean -f
sudo npm install -g n
n latest
npm -v
sudo npm install -g npm
다음 링크를 방문한다.
https://github.com/potree
potree와 PotreeConverter가 있다. potree를 방문한다. 그리고, 다음 순서로 nodejs 및 module을 설치한 후, 소스코드 다운로드 받고, 빌드한다. 참고로 gulp는 빌드 자동화 도구이다. rollup은 module bundler 도구로 자바스크립트 모듈의 재활용성과 유지보수성을 높이기 위해 조각난 로직간 의존성 등을 관리한다.
mkdir potree
cd potree
npm install
npm install -g gulp
npm install -g rollup
git clone https://github.com/potree/potree
mkdir ./build/potree
gulp watch
이렇게 하면 Potree 렌더링 서버가 실행된다. 다음 링크를 클릭하면 예제들을 확인할 수 있다.
http://localhost:1234/examples/
http://localhost:1234/examples/cesium_retz.html
다음은 Potree 실행 화면이다.
Potree converter
Potree가 사용하는 포인트 클라우드 자료 구조를 만들기 위해 제공하는 Potree converter를 빌드한다. 보통 변환에 입력되는 점군 포맷은 LAS 표준파일이다. Potree는 이 포맷을 읽고 쓰는 유틸리티를 사용한다. 다음과 같이 소스코드를 다운로드하고 빌드한다. 폴더가 없으면 mkdir로 만들고 다운로드한다.
cd ~/dev/workspaces/lastools
git clone https://github.com/m-schuetz/LAStools.git master
cd master/LASzip
mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE=Release ..
make
cd ~/dev/workspaces/PotreeConverter
git clone https://github.com/potree/PotreeConverter.git master
cd master
mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE=Release -DLASZIP_INCLUDE_DIRS=~/dev/workspaces/lastools/master/LASzip/dll -DLASZIP_LIBRARY=~/dev/workspaces/lastools/master/LASzip/build/src/liblaszip.so ..
make
이제 다음과 같이 Potree 변환기를 사용할 수 있다. 입력파일포맷은 LAS, LAZ, PTX, PLY을 지원한다.
# convert data.las and generate web page.
./PotreeConverter ./data.las -o ./potree_converted -p pageName --output-attributes RGB INTENSITY CLASSIFICATION
# generate compressed LAZ files instead of the default BIN format.
./PotreeConverter ./data.las -o ./potree_converted --output-format LAZ
# convert all files inside the data directory
./PotreeConverter ./data -o ./potree_converted
LiDAR 스캔 데이터 포맷 변환 방법
PotreeConverter는 LAS, LAZ, PTX, PLY파일을 입력받는다. 이런 이유로, 스캔 데이터 포맷 변환 방법은 크게 3가지가 있다.
1. 상용 SW 를 이용한 LAS 파일 변환
고정밀 LiDAR를 사용하면, 표준파일포맷인 LAS, E57로 저장할 수 있는 소프트웨어를 개발사에서 함께 판매한다. 예를 들어, FARO는 Scene, Trimble은 Realworks 를 판매하고 있으며, 라이카는 사이클론을 판매한다(수천만원 이상의 가격은 안습). 이 소프트웨어를 이용해 LAS파일로 변환한 후 PotreeCoverter를 통해 Potree 렌더링용 데이터 구조를 생성할 수 있다.
2. PDAL 및 CloudCompare 이용한 파일 변환
이 방법은 보통, 개발용으로 실시간 LiDAR 센서(Velodyne, Quanergy systems 등)를 직접 이용할 때 사용한다.
PDAL은 포인트 데이터를 변환하고 관리하는 기능을 제공하는 오픈소스이다. PDAL은 LAS 등 점군 형식 입출력을 지원한다. CloudCompare는 PDAL을 포함한 플러그인을 제공하고 있어 입출력 시 LAS포맷을 지원한다.
보통 라이다 센서는 ROS(Robot Operating System)에 모듈로 제공되는 경우가 많은 데, 이때 기록되는 파일 포맷은 ROS bag이나 PCD(Point Cloud Data)포맷이다. 그러므로 다음 순서로 LAS파일을 얻을 수 있다. 단, 파일 입출력 경로에 한글이 들어가면 에러 발생한다.
1) rosrun pcl_ros bag_to_pcd [input bag] /laser_cloud_surround pcd
2) open pcd file in PDAL, CloudComapre
회사 본관 1, 2동 스캔 데이터(전체 52,230,141 포인트. 1.65GB)
3) select point cloud nodes. edit > merge in CloudComapre
4) save las file in PDAL, CloudComapre
LAS 변환
다음은 이렇게 변환된 LAS이다.
CloudCompare
이 LAS파일을 PotreeConverter 로 변환하다. 변환 후 폴더에는 cloud.js와 data폴더가 생성되어 있을 것이다.
./PotreeConverter ./data.las -o ./potree_converted -p <pageName> --output-attributes RGB INTENSITY CLASSIFICATION
데이터 변환 과정(변환 결과 데이터는 대략 1.7GB로 원본 LAS파일에 비해 큰 증가는 없었음)
rendering viewer를 담을 html 및 관련 lib를 PotreeConverter/Poresources/page_template에서 cloud.js가 있는 폴더에 복사한다. 그리고, viewer_template.html 의 <script></script>에 다음 코드를 붙여넣고 저장한다.
<script> window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
viewer.setEDLEnabled(true);
viewer.setFOV(60);
viewer.setPointBudget(1*1000*1000);
<!-- INCLUDE SETTINGS HERE -->
viewer.loadSettingsFromURL();
viewer.loadGUI(() => {
viewer.setLanguage('en');
$("#menu_appearance").next().show();
$("#menu_tools").next().show();
$("#menu_scene").next().show();
viewer.toggleSidebar();
});
// Load and add point cloud to scene
Potree.loadPointCloud("./cloud.js", "r", e => {
let scene = viewer.scene;
let pointcloud = e.pointcloud;
let material = pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
material.shape = Potree.PointShape.SQUARE;
scene.addPointCloud(pointcloud);
viewer.fitToScreen();
});
</script>
이제 Potree폴더에서 Potree서버를 실행한다.
gulp watch
인터넷 탐색기로 URL를 접속하고, 생성된 potree data폴더의 viewer_template을 선택한다.
http://localhost:1234/<your folder>/viewer_template
그럼 다음과 같이 생성된 potree data를 확인할 수 있다. 렌더링이 매우 부드럽게 실행되는 것을 확인할 수 있다. 참고로, 뷰어 왼쪽 패널에 부착된 위젯으로 배경 등 설정할 수 있다.
example 폴더에 보면, 다양한 방식의 렌더링 기능이 script안에 코딩되어 있다. 다음은 annotation 등 기능을 적용한 모습이다.
Potree 서버 기반 포인트 클라우드 렌더링 실행 모습(SLAM, 한국건설기술연구원 본관 일부 스캔 데이터)
3. 직접 개발
PDAL, LAStools 라이브러리를 이용해 직접 개발하는 방법이다. 점군 자료구조를 직접 다루어야 한다면, 관련 예제를 참고해 개발해야 한다.
구조 분석
Potree 렌더링 서버는 다음 패키지를 사용한다.
- Cesuim: Google earth처럼 GIS 기반 공간정보를 가시화할 때 사용함. 다양한 스타일과 시각화효과를 제공함
- openlayer3: 웹페이지에서 동적으로 지도를 생성하는 역할을 함. 데이터 소스에서 벡터 데이터, 마커 등 자동생성 지원
- three.js: 경량화된 WebGL 기반 geometry 생성, 렌더링 및 애니메이션 지원
- tween: 애니메이션 지원
- d3; 자바스크립트 라이브러리로, 데이터를 화려한 차트, 그래픽, 인터렉티브한 UI로 DOM(Document Object Model)를 생성하는 역할을 함
- jquery: DOM 탐색 및 수정, 이벤트 처리, 애니메이션, AJAX, JSON 파싱, 플러그인 등 지원.
- i18next: 국제화를 지원하는 패키지
주요 클래스 구조는 다음과 같다.
각 클래스 역할은 다음과 같다. 제한된 웹브라우저 메모리에서 점군을 렌더링하기 위해 공간인덱싱, LoD 기법을 사용해서, Potree 이름처럼 전체적으로 point cloud를 tree 형태로 매달아 놓은 자료구조를 가진다. 참고로, 이 구조는 오래전부터 컴퓨터 그래픽스, 게임 개발 시 사용되었던 방식이다.
- Potree: Potree 서버의 엔트리 포인트 제공. 기본 설정 및 포인트 클라우드 로딩 등 기본 작업
- POCLoader: 포인트 클라우드 로딩
- PointCloudOctreeGeometry: 옥트리 구조 제공. 점군 형식에 따른 로더 선택 및 실행
- PointCloudOctreeGeometryNode: 옥트리 노드 제공. 각 노트는 LoD 파일이 연결되어 있으며, 렌더링에 필요할 경우 메모리에 loading 되는 메커니즘을 제공
- Loader: 점군 파일 형식에 맞는 로더를 구현해 노음
viewer template 소스코드 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tag 와 css style link 선언-->
</head>
<body>
<!-- 패키지 라이브러리 선언 -->
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
<div id="potree_render_area">
<div id="cesiumContainer" style="position: absolute; width: 100%; height: 100%; background-color:green"></div>
</div>
<div id="potree_sidebar_container"> </div>
</div>
이렇게 DOM 구조를 정의해 놓은 후 <script> 를 코딩한다.
<script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area")); <!-- 뷰어 생성 -->
viewer.setEDLEnabled(true); <!-- 뷰어 속성 설정 -->
viewer.setFOV(60);
viewer.setPointBudget(1*1000*1000); <!-- 뷰어에 렌더링되는 점군 수 -->
<!-- UI 패널 설정 -->
viewer.loadSettingsFromURL();
viewer.loadGUI(() => {
viewer.setLanguage('en');
$("#menu_appearance").next().show();
$("#menu_tools").next().show();
$("#menu_scene").next().show();
viewer.toggleSidebar();
});
<!-- 점군 로딩 -->
Potree.loadPointCloud("./cloud.js", "r", e => {
let scene = viewer.scene;
let pointcloud = e.pointcloud;
let material = pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
material.shape = Potree.PointShape.SQUARE;
scene.addPointCloud(pointcloud); <!-- 점군을 현재 렌더링 scene에 추가 -->
viewer.fitToScreen(); <!-- 점군을 화면에 꽉차게 zoom extent 처리 -->
});
</script>
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area")); <!-- 뷰어 생성 -->
viewer.setEDLEnabled(true); <!-- 뷰어 속성 설정 -->
viewer.setFOV(60);
viewer.setPointBudget(1*1000*1000); <!-- 뷰어에 렌더링되는 점군 수 -->
<!-- UI 패널 설정 -->
viewer.loadSettingsFromURL();
viewer.loadGUI(() => {
viewer.setLanguage('en');
$("#menu_appearance").next().show();
$("#menu_tools").next().show();
$("#menu_scene").next().show();
viewer.toggleSidebar();
});
<!-- 점군 로딩 -->
Potree.loadPointCloud("./cloud.js", "r", e => {
let scene = viewer.scene;
let pointcloud = e.pointcloud;
let material = pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
material.shape = Potree.PointShape.SQUARE;
scene.addPointCloud(pointcloud); <!-- 점군을 현재 렌더링 scene에 추가 -->
viewer.fitToScreen(); <!-- 점군을 화면에 꽉차게 zoom extent 처리 -->
});
</script>
Potree converter 구조는 다음과 같다.
각 패키지 역할은 다음과 같다.
- LAStools: LAS 점군 표준파일 입출력 기능
- PotreeConverter: LAS, LAZ, PTX, PLY 등 점군 파일을 읽어 Octree 격자로 구성된 렌더링용 LoD 파일들을 생성함
마무리
Potree를 사용하면 대용량 포인트 클라우드를 인터넷에서 원활한 서비스가 가능하다. 아울러, 다양한 java script library를 이용해 annotation, segmentation 등 목적에 맞게 개발할 수 있다.
레퍼런스
- Martinez-Rubi, O., Verhoeven, S., Van Meersbergen, M., Van Oosterom, P., GonÁalves, R., & Tijssen, T. (2015). Taming the beast: Free and open-source massive point cloud web visualization. In Capturing Reality Forum 2015, 23-25 November 2015, Salzburg, Austria. The Servey Association.
