2019스마트국토엑스포-20190808-mago3D기술워크샵

mago3D Technical Workshop
웹브라우저에서 mago3D를 이용한 대용량 3차원 객체 가시화 하기
가이아쓰리디㈜

22
목차
1. mago3D 알아보기
1. mago3D 란?
2. mago3D 특징
3. mago3D 제품군
4. mago3D 아키텍쳐
5. mago3D 라이센스 정책
6. mago3D 활용사례
7. mago3D 향후계획
2. mago3D 준비하기
1. mago3D Community Edition 준비하기
2. mago3D Community Edition 설치하기
3. mago3D 서비스 데이터 변환하기
4. mago3D Community Edition 시작하기
5. mago3D Community Edition 설정하기
3. mago3D 사용하기
1. 예제 페이지 작성하기
2. API 기능 사용하기

1. mago3D 란?
2. mago3D 특징
3. mago3D 제품군
4. mago3D 아키텍쳐
5. mago3D 라이센스 정책
6. mago3D 활용사례
7. mago3D 향후계획
1. mago3D 알아보기

44
mago3D 란?
mago3D는 아래와 같은 서비스를 위한 플랫폼입니다.
= GIS + BIM + Web + Open Source
1 순수 웹을 통한 BIM을 비롯하여 거대하고 복잡한 3차원 객체의 시각화
2 BIM/AEC와 3D GIS의 완벽한 통합
3 현실세계의 수많은 객체 및 각종 현상을 가상공간에 모사하는 디지털
트윈
4 웹 환경에서 각종 이슈 및 효율적인 업무를 위한 협업 관리

55
mago3D 특징
1BIM/AEC
2Seamless
3Browser
오픈 소스
Seamless
실내외 공간의 끊김 없는
통합( Integration of
indoor | outdoor space)
Browser
웹 브라우저 상에서 구동
별도의 Plugin이나 ActiveX 설치
필요 없음
BIM/AEC
BIM/AEC(Architecture, Engineering,
Construction) 와 3D GIS의 통합

66
mago3D Converter
WAS
mago3D 아키텍쳐
Web Server
mago3D
CMS
mago3D.JS
Cesium
OBJ
Collada
LAS
CityCMLIFC 3DS
IndoorGML
etc
Back-end
internet
RabbitMQ

77
● mago3D Converter ((구)F4D Converter)
○ Community : AGPL (소스 코드 공개 의무)
○ Commercial : Gaia3D 상용 라이센스 구매 필요
● mago3D.JS
○ Community, Commercial 버전 모두 Apache License 2.0을 적용
라이센스 정책
Community Commercial
OPEN PRIVATE
mago3D Converter
mago3D.JS
mago3D CMS
mago3D
Converver
mago3D.JS
mago3D CMS
Customizing
Technical
Support
Tuning

88
mago3D 제품군
mago3D Standard mago3D Professional mago3D Enterprise
포
함
제
품
mago3D.JS
(렌더링엔진)
O O O
mago3D Converter
(포맷변환기)
O
(windows기반 실행파일)
O
(windows기반 실행파일)
O
(mago3D CMS와 연동)
mago3D CMS
(컨텐츠관리)
X O
O
(데이터 자동변환 지원)
CPU Core지원 개수 4 cores 8 cores 16 cores
Client Web Browser HTML5 스펙 준수 Browser
Server OS Windows, Linux
지원 서비스 설치 1회, 방문지원 1회 설치 1회, 방문지원 2회
설치 1회, 방문지원 2회
서비스 구성지원 2회
오프라인 교육 1회 2회 2회
라이센스 상업 라이센스 (소스코드 공개 의무 없음)

99
활용사례
조선분야의 Total Management System

1010
활용사례
오픈소스 기반 군 공간정보 포털 시스템

1111
활용사례
해양감시 LiveDroneMap

1212
활용사례
포인트 클라우드를 활용한 서울시 자율주행차량 관제

1313
향후계획
geospatial
CAD
weather
세상은 넓고 그릴 것은 많다.
point cloud

1414
향후계획
그리는 것 그 너머에...
analysis
statistics
infographic

1. mago3D Community Edition 준비하기
2. mago3D Community Edition 설치하기
3. mago3D 서비스 데이터 변환하기
4. mago3D Community Edition 시작하기
5. mago3D Community Edition 설정하기
2. mago3D 준비하기

1616
요약 및 준비사항
● 요약
○ mago3D Community Edition(Minimum) 버전을 설치 및 실행해 봅니다.
○ 3차원 자료를 수동으로 변환하고 가시화를 위한 환경설정을 변경해 봅니다.
● 준비사항
○ 하드웨어
■ 운영체제(OS) : Windows7 이상(64bit)
■ 저장공간(Disk space) : 최소 2G
■ RAM : 8G 이상 (권장 사항 : 16G 이상)
■ VGA : 최소 on-board graphic
○ 소프트웨어
■ WebServer : Apache Http Server, NginX Server, Node Server - 선택
○ 3차원 공간자료
■ Collada Data
■ PointCloud Data

1717
● 단계
○ WebServer 설치 및 웰컴페이지 확인
○ mago3D Converter 설치
○ F4DConverter 를 통한 데이터 수동 변환
○ mago3D.JS 설치 및 기본페이지 표출
○ mago3D 구동환경 설정
○ 웹서비스 및 가시화
Community Edition 준비하기

1919
● Tutorial download
○ URL : https://github.com/Gaia3D/mago3d-workshop 으로 이동
○ ‘Download ZIP’을 클릭하여 소스를 내려받습니다.
Community Edition 튜토리얼 다운로드

2020
● WebServer 로 사용할 NginX 다운로드
○ URL : http://nginx.org/en/download.html 으로 이동
○ Stable 버전의 설치 파일 다운로드
WebServer 설치파일 다운로드
Stable version

2121
● 다운로드 받은 파일의 압축을 해제
○ 한글이 포함될 경우 실행이 되지 않는 경우가 발생
○ 주의사항 : 디렉토리 경로에 한글이 포함되지 않도록 함
○ (예) C:mago3dnginx
● 초기 디렉토리 구조 확인
○ (예) C:mago3dnginx 디렉토리 구조 확인
WebServer 설치
nginx의 설정 파일
nginx에서 서비스 할
root 디렉토리

2222
● conf 폴더의 nginx.conf 에서 서버 설정 확인
○ 웹서버의 서비스 포트번호 확인
■ 기본 포트번호 설정값 : 80
■ 사용중인 포트번호일 경우 변경
○ 웹서버의 루트 디렉토리 확인
■ 기본 루트 디렉토리 설정값 : html
WebServer 설정파일 수정 및 확인
포트 설정
root 디렉토리 설정

2323
● 웰컴페이지 작성
○ 루트 디렉토리에 index.html 파일 작성
WebServer 실행 및 확인
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Mago3D!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to Mago3D Tutorial</h1>
<p>If you see this page, the nginx web server is successfully installed and working.</p>
<p>For online documentation and support please refer to
<a href="http://www.mago3d.com">mago3d.com</a>.<br/>
</body>
</html>

2424
● 웹서버 실행
○ 명령 프롬프트에서 해당 경로로 이동
cd [웹서버설치경로]
(예) cd C:mago3dnginx
○ Nginx 서버 실행
start nginx
● 웹서버 종료
○ Nginx 서버 종료
nginx -s stop
WebServer 실행 및 확인
● 웹서버 실행 확인
○ 웹브라우저에서 localhost 접속
○ 웰컴페이지 확인
< 웰컴페이지 확인 >

2525
● F4DConverter 설치 : SetUpF4DConverter.msi를 실행
● 설치 폴더 기본 절대 경로 : C:Program FilesGaia3DF4DConverterConsole
○ 원하는 위치로 변경 가능하나, 다음 단계 진행을 위해서 설치한 위치 기억
○ ※ 워크샵 배포 자료 말고도 https://github.com/Gaia3D/F4DConverter 에서
install/SetupF4DConverter.msi 배포 중
F4DConverter 설치- 1/2

2626
● F4DConverter 설치 확인
○ 아래 왼쪽 그림과 같이 명령 프롬프트 앱을 실행하여(CMD.exe) F4DConverter를 실행
○ 잘 설치가 되었다면 아래 오른쪽 그림처럼 입력 인자가 없다는 에러 메시지와 함께 종료
F4DConverter 설치- 2/2
F4DConverter를 실행하기 위한 명령어 입력 F4DConverter가 잘 설치됐을 때의 실행결과

2727
● 권한 문제로 F4DConverter가 실행되지 않을 경우
○ 명령 프롬프트 앱을 관리자 권한으로 실행
F4DConverter 설치시 주의사항- 1/2

2828
F4DConverter 설치시 주의사항- 2/2
다음과 같은 구성 요소 누락 오류가 발생할 경우
- MFC140U.dll, MSVCP140.dll, VCRUNTIME140.dll, MSVCP100.dll
Microsoft 사의 Visual C++로 빌드된 실행파일을 구동하는데 필요한 구성요소가 없기 때문입니다.
이를 해결하기 위해서는 워크샵 자료에 포함되어 있는 Visual C++ 재배포 패키지를 설치합니다.
Visual Sutdio 2015 Visual C++ 재배포 패키지(VC v14.x 용) : vc_redist(2015).x64.exe
(원본 : https://www.microsoft.com/en-us/download/conﬁrmation.aspx?id=48145)
Visual Studio 2010 Visual C++ 재배포 패키지(VC v10.x 용) : vc_redist(2010)_x64.exe
(원본 : https://www.microsoft.com/en-us/download/details.aspx?id=14632)
재배포 패키지를 설치 했으면 이전 페이지처럼 F4DConverter가 잘 구동되는지 확인합니다.
● 구성 요소 누락 에러

3030
● 사용할 샘플 데이터 : PointCloud 파일 2개, COLLADA 파일 2개
※ 샘플 데이터 제공 - 상지대학교 이현직 교수
● PointCloud : 드론으로 상지대 캠퍼스를 스캔하여 생성
● COLLADA : 포인트 클라우드 데이터를 3D realistic mesh로 변환하여 생성
● 가시성을 위해 인접한 타일을 각각 2개씩 준비
샘플 데이터 소개- 1/2
PointCloud
COLLADACOLLADA
< 원주시 상지대 캠퍼스 인근 >

3131
샘플 데이터 소개- 2/2
● 샘플 데이터의 구조

3232
데이터 변환(PointCloud / COLLADA → F4D)
● PointCloud(.las) 파일을 변환하기 위한 F4DConverter 실행 명령어
F4DConverter #inputFolder [원본las파일들어있는폴더] #outputFolder [F4D저장되는폴더] #meshType 3 #log
[로그파일전체경로] #indexing y
● COLLADA(.dae) 파일을 변환하기 위한 F4DConverter 실행 명령어
F4DConverter #inputFolder [원본dae파일들어있는폴더] #outputFolder [F4D저장되는폴더] #meshType 1 #log
[로그파일전체경로] #epsg 5186 #offsetX 282345 #offsetY 530506 #idPreﬁx DAE_ #isYAxisUp y
#indexing y
주의사항 : F4DConverter 사용되는 인자들의 자세한 설명 및 주의 사항을 꼭 읽고 변환작업 진행

3333
● F4DConverter.exe 구동 인자 사용 시 주의할 점
F4DConverter 실행시 주의 사항
- 폴더/파일 경로를 입력할 때 공백이 포함되어 있다면 반드시 쌍따옴표(“ ”)로 묶어 줘야 합니다.
예) #inputFolder “D:/test data/dae”
- 변환 과정에서 문자열은 UTF-8로 변환하여 처리하기 때문에 한글로 된 경로/파일명도 처리가
가능하지만, Windows 기본 locale이 EUC-KR(CP949)이므로 UTF-8로 변환이 불가능한 문자가 있을
경우 깨질 수 있으니 영어 경로/파일명을 사용하기를 권장합니다.
- 샘플 COLLADA 파일을 변환할 때는 반드시 #meshType 1 을 사용해야 합니다.
0을(semantic model 용) 사용할 경우 언제 끝날 지 아무도 모릅니다.
F4Dconverter.exe의 모든 인자 사용법 및 주의사항에 대한 정보는 다음 URL에서 얻으실 수 있습니다.
https://github.com/Gaia3D/F4DConverter

3434
● F4DConverter.exe 성공적으로 구동시 모습
F4DConverter 실행
주의. 이 window는
OpenGL을 사용하기 위한
dummy window이므로
닫으면 안됩니다.

3535
● F4DConverter.exe 구동 인자 설명 - Point Cloud & COLLADA 공통
F4DConverter 실행 인자 설명- 1/10
#inputFolder [원본파일이 들어있는 폴더 절대경로]
사용 예 : #inputFolder D:/data/temp
변환하려는 원본 파일들이 들어 있는 폴더의 절대 경로를 받는 인자입니다.
해당 폴더 하위의 서브 폴더까지 모두 뒤져서 변환 가능한 파일들은 모두 변환합니다.
COLLADA 파일을 변환할 때는 이 폴더의 절대 경로를 인자값으로 넣어야 합니다.
포인트 클라우드 파일을 변환할 때는 이 폴더의 절대 경로를 인자값으로 넣어야 합니다.

3636
#outputFolder [변환된 F4D가 저장될 폴더 절대경로]
사용 예 : #outputFolder D:/data/f4d
변환된 F4D들이 저장될 폴더의 절대 경로를 입력하는 인자입니다.
주의사항 : output folder를 입력할 때는 이미 존재하는 폴더의 절대 경로를 입력해야 합니다.
F4DConverter.exe는 없는 폴더를 자동으로 만들지 않습니다.

3737
#log [변환 작업 후 저장될 로그 파일의 절대 경로]
사용 예 : #log D:/log/conversion/log20190801.txt
성공, 작업 시간, 실패 시 실패 이유 및 실패가 발생한 파일 등을 기록하는 로그 파일의 절대 경로를
입력하는 인자입니다.
주의사항 : log 파일이 저장되는 폴더는 이미 존재하고 있어야 합니다.
F4DConverter.exe는 없는 폴더를 자동으로 만들지 않습니다.

3838
#meshType [0, 1, 2, 3 중에 하나]
사용 예 : #meshType 0
변환 하려는 원본 데이터 안에 3차원 정보가 기록되어 있는 방식을 지정하는 인자입니다.
각 값이 의미하는 것은 다음과 같습니다.
0 : semantic data type. 예)3차원 도면이나 건물을 모델링한 메쉬
1 : non-semantic or dummy mesh인데 mesh와 material이 1개로 저장되어 있는 데이터
2 : non-semantic or dummy mesh인데 mesh와 material이 여러개로 쪼개져서 저장되어 있는 데이터
3 : 포인트 클라우드 데이터
※ COLLADA 파일을 변환할 때 #meshType의 값으로 1을 사용하는데 0을 사용해도 변환이 되긴 합니다.
다만, dummy mesh를 대상으로 중복 제거나 visibility indexing등을 수행하여 불필요하게 작업시간을
늘리고, 불필요한 pre-processing 결과물을 저장하게 되어 오히려 용량이 늘어날 수도 있습니다.

3939
#indexing [Y, y, N, n 중에 하나]
사용 예 : #indexing y
변환된 F4D들을 웹 서비스 할 때 필요한 object index file을 만드는 인자입니다.
object index file은 변환 작업 시에 동시에 만들 수도 있고, 일괄 변환 작업이 모두 끝난 후 한 폴더 안의
모든 F4D들을 대상으로 만들 수도 있습니다. 또는 object index file만 갱신이 가능합니다.
이번 워크샵 때는 포인트 클라우드 기반 F4D와 COLLADA 기반 F4D를 서로 다른 프로젝트로 구분해서
진행하므로 각각의 데이터를 변환 시에 object index file을 생성합니다.
※ 이미 변환된 F4D들을 대상으로 나중에 object index file을 만들거나 갱신할 때는 다음처럼 사용합니다.
F4DConverter.exe #outputFolder [F4D가 모여있는 폴더 절대 경로] #indexing y

4040
● F4DConverter.exe 구동 인자 설명 - COLLADA
#epsg [epsg code]
사용 예 : #epsg 5186
변환하려는 원본 데이터의 공간정보 좌표계의 EPSG code를 알 경우 인자로 사용할 수 있습니다.
이 인자를 사용할 경우, 원본 데이터의 bounding box의 중심점을 (cx, cy, cz)라고 했을 때, (cx, cy, 0)을
원점으로 하는 로컬 좌표계로 바꿔서 F4D로 변환하고, (cx, cy)의 좌표를 WGS84(경위도, EPSG 4326)로
변환한 좌표정보를 lonsLats.json 파일로 저장합니다.
저장된 lonsLats.json 파일에 기록된 각 F4D의 원점 경위도는 F4D를 mago3D globe 위에 geo-referencing
할 때 사용됩니다.

4141
#offsetX [offset의 x값]
#offsetY [offset의 y값]
사용 예 : #offsetX 300000 #offsetY 500000
변환하려는 원본 데이터의 좌표 정보가 원본 좌표계의 원점을 기준으로 하지 않고 특정 지점을 기준으로
하는 경우 특정 지점을 offset으로 처리하는 인자입니다.
원본 좌표계가 직교 좌표계인 경우에만 사용할 수 있고, 단위는 m입니다.

4242
#epsg, #offsetX, #offsetY 인자를 사용하는 이유
배포된 샘플 데이터 폴더 중 dae 폴더 안에 metadata.xml은 샘플 COLLADA 파일들의 메타 정보가 기록된
파일인데 열어보면 다음과 같습니다.
샘플 COLLADA 파일들의
좌표계와원점 정보를 알 수 있는
메타 정보
해당 COLLADA 파일들의 좌표계와 원점 정보를 적용하기 위해
#epsg 5186 #offsetX 282345 #offsetY 530506 인자를 사용합니다.

4343
#isYAxisUp [Y, y, N, n 중에 하나]
사용 예 : #isYAxisUp y
변환하려는 원본 데이터의 좌표계가 건물의 천장이 y축인 좌표계(측량 분야에서 사용하는 좌표계)인
경우 그냥 F4D로 변환할 경우 건물의 천장이 북쪽으로 눕게 되므로 이를 보정하기 위한 인자입니다.

4444
#idPrefix [id 접두사로 사용할 단어]
사용 예 : #idPrefix DAE_
원본 데이터를 F4D로 변환할 때 파일 명을 data key(id)로 사용하여 F4D_[fileName]로 변환합니다.
#idPrefix 인자를 사용할 경우 F4D_[idPrefix]_[fileName]으로 변환합니다.
위 사용 예를 원본 파일 testCollada.dae라는 파일에 적용하게 되면 F4D_DAE_testCollada 라는 F4D가
생성됩니다.
※ 워크샵에서 사용하는 포인트 클라우드 파일과 COLLADA 파일의 이름이 같아서 먼저 생성된 F4D를
나중에 생성된 F4D로 덮어 쓰는 경우를 방지하기 위해 이 인자를 사용합니다.

4646
● 변환자료 확인
○ 최종 결과물 위치로 이동
○ F4D_[ﬁleName] 폴더 확인
○ objectIndexFile.ihe 파일 생성 확인
● 변환자료를 웹서버로 복사 또는 이동
○ 웹서버 루트 디렉토리에 f4d 폴더 생성
○ f4d 폴더로 변환이 완료된 자료를 복사 또는 이동
변환데이터 웹서비스 준비
< .las 변환자료 확인>
< .dae 변환자료 확인>

4747
● mago3D.JS 설치
○ build된 mago3D.JS 파일을 js 폴더 아래에 위치(https://github.com/Gaia3D/mago3djs/releases)
○ mago3D.JS를 표출할 3D Globe Engine인 Cesium.js 파일을 js 폴더 아래에 위치
○ html 페이지에 필요한 라이브러리 및 디자인 파일을 추가
1) style css 추가
<link rel="stylesheet" href="/js/mago3d/Widgets/widgets.css" />
<link rel="stylesheet" href="/css/workshop.css" />
2) html div 추가
<div id="magoContainer"></div>
3) script 추가
<script type="text/javascript" src="/js/mago3d/Cesium.js"></script>
<script type="text/javascript" src="/js/mago3d/mago3d.js"></script>
css
mago3d
js
init.js
mago3d.js
Cesium.js
. . .
mago3D 기본 로딩 페이지 표출- 1/2
index.html

4848
● mago3D.JS 설치
○ html 페이지에 mago3D.JS 초기 로딩 스크립트 작성
4) script 초기 로딩
var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures: false
});
var terrainProvider = new Cesium.EllipsoidTerrainProvider();
var options = {imageryProvider : imageryProvider,
terrainProvider : terrainProvider,
animation:false,
timeline:false,
fullscreenButton:false};
var viewer = new Cesium.Viewer('magoContainer', options);
mago3D 기본 로딩 페이지 표출- 2/2

5050
● 데이터 및 설정 파일
○ 설정 파일은 데이터의 위치 정보를 담고 있는 workshop-data.json 파일과 데이터 표출
정책을 설정하는 workshop-policy.json으로 구분
○ workshop-data.json 파일은 F4DConverter로 변환된 데이터를 모아둔 프로젝트 개념
○ workshop-policy.json 파일은 mago3D.JS에 대한 환경 설정
설정 파일 설명- 1/9
프로젝트
데이터 고유
식별자
F4D 데이터의
Preﬁx

5151
○ workshop-data.json파일은 크게 세 부분으로 나눌 수 있음
○ 속성 값을 저장하는 부분(속성 영역), 하위 노드 정보를 저장하는 부분(자식 노드 영역),
위치 정보를 저장하는 부분(지리 정보 영역)
{
"attributes": {
"isPhysical": true,
"nodeType": "WORKSHOP",
"ﬂipYTexCoords": true
},
"children": [],
"data_group_id": 1,
"data_group_name": "WORKSHOP",
"mapping_type": "origin",
"data_key": "sample",
"data_name": "샘플",
"longitude": 127.9265465225572,
"latitude": 37.3677658743137,
"height": 39.0,
"heading": 0,
"pitch": 0,
"roll": 0
}
프로젝트 속성 영역
자식 노드 영역
(데이터)
지리 정보 영역

5252
○ workshop-data.json파일의 구조 "children": [
{
"attributes": {
"isPhysical": true,
"nodeType": "root",
},
"children": [],
"data_group_id": 78,
"longitude": 127.9286478704871,
"latitude": 37.36927376175452,
"height": 39.0,
"heading": 0,
"pitch": 0,
"roll": 0
},
( . . . )
]
{
"attributes": {
"isPhysical": false,
"nodeType": " root ",
"projectType": "Collada",
"specularLighting": false
},
( . . . )
}
"children": [
{
"attributes": {
"isPhysical": true,
"nodeType": "Collada",
},
( . . . )
]
① attributes 영역
② children 영역
③ geolocation 영역

5353
○ 데이터의 그룹인 프로젝트 별로 workshop-data.json을 구성
{
"attributes": {
"isPhysical": false,
"nodeType": " root ",
"projectType": "workshop",
"specularLighting": false
},
"children": [
( . . . )
],
"parent": 0,
"depth": 1,
"view_order": 2,
"data_key": "workshop",
"data_name": "WORKSHOP"
}
최상위 root
프로젝트
프로젝트 명과
매칭

5454
○ F4D폴더 하위에 프로젝트 단위별로 변환된 데이터명이 고유 식별자 입니다.
(F4D_이후의 글자)
"children": [
{
"attributes": {
"isPhysical": true,
"nodeType": "WORKSHOP",
},
"children": [],
"data_group_id": 1,
"longitude": 127.9265465225572,
"latitude": 37.3677658743137,
"height": 39.0,
"heading": 0,
"pitch": 0,
"roll": 0
}
]
상위 프로젝트
data_key
값과 매칭

5555
○ workshop-data-collada.json 파일을 수정
"children": [
{
"attributes": {
"isPhysical": true,
"nodeType": "Collada",
},
"children": [],
"data_group_id": 1,
"data_key": "DAE_Tile+001_+001_+000",
"data_name": "Tile_+001_+001_+000",
"longitude": 127.9265465225572,
"latitude": 37.3677658743137,
"height": 39.0,
"heading": 0,
"pitch": 0,
"roll": 0
}
]
"parent": 0,
"depth": 1,
"view_order": 2,
"data_key": "dae",
"data_name": "Collada"

5656
○ workshop-policy.json파일에서 mago3D.JS에서 렌더링 하기 위한 설정을 변경
f4d 데이터 폴더 경로
최초에 로딩할 프로젝트
"geo_data_path": "/f4d",
"geo_data_default_projects": ["workshop-data.json"],
"geo_view_library": "cesium",
"geo_cesium_ion_token": "",
3D 가시화 라이브러리 선택(cesium)
"geo_cull_face_enable": "false",
"geo_time_line_enable": "false",
cesium 유료 버전인 ion의 토큰을 넣으면 cesium 자체
terrain이 활성화됨
면의 앞뒤를 구분해서 출력할 것이냐는 옵션. 기본이 true.
time line을 출력할 것이냐는 옵션

5757
○ workshop-policy.json파일에서 mago3D.JS에서 렌더링 하기 위한 설정을 변경
"geo_init_camera_enable": "true",
"geo_init_latitude": "37.36776587428370",
"geo_init_longitude": "127.9265465226061",
"geo_init_height": "320",
초기 화면에서 특정 위치로 카메라 이동
카메라를 고정시킬 위치( 경도, 위도, 높이(m) )
"max_per_unit_points_render_dist_to_cam_0m": 1,
"max_per_unit_points_render_dist_to_cam_more_than_1600m": 64,
포인트 클라우드를
표출할 때, 카메라로
부터의 거리에 따라
point를 출력할 갯수
(원래 갯수) * 1/(수치)

5858
○ workshop-policy.json 파일 수정
"geo_data_default_projects": [
"workshop-data-pointcloud.json",
"workshop-data-collada.json"
],
설정 파일 변경- 9/9
초기 화면에서 보여질 default project 지정
"geo_init_duration": 3,
"geo_init_default_terrain": "",
"geo_init_default_fov": 0,
"geo_init_duration": 3,
"geo_init_default_terrain": "",
"geo_init_default_fov": 0,
lonsLats.json

1. 예제 페이지 작성하기
2. API 기능 사용하기
3. mago3D 사용하기

6060
예제 페이지 만들기- 1/3
● HTML HEAD part
● HTML BODY part
<link rel="stylesheet" href="/js/mago3d/Widgets/widgets.css"/> // CesiumJs 를 위한 스타일시트파일
<script type="text/javascript" src="/js/mago3d/Cesium.js"></script> // CesiumJs 라이브러리 추가
<script type="text/javascript" src="/js/mago3d/mago3d.js"></script> // Mago3D 라이브러리 추가
<script type="text/javascript" src="/js/init.js"></script> // Mago3D 초기화 모듈 추가
<div id="magoContainer"></div> //Mago3D 표출 DIV, id 변경가능.
<canvas id="objectLabel"></canvas> //Mago3D 라벨 표출 canvas, id 고정

6161
● javascript part
options.policyUrl = "./persistence/workshop-policy.json"; // mago3D Policy 경로
options.dataBaseUrl = "./persistence/"; // mago3D Data 루트 경로
options.imageBaseUrl = "./images/";// mago3D Image 경로
var mago = new Mago3D.Mago3D('magoContainer', options);
//mago3D 인스턴스 생성 후 변수에 할당.
//HTML BODY PART에서 소개한 Mago3D 표출 div id와 위 옵션을 매개변수로 사용.
mago.start(); //mago3D Start!!

6262

6464
● mago3D의 API를 사용하려면 ManagerFactory 객체가 필요
● 전역변수로 managerFactory 를 선언
● mago3D 초기화 완료 시 ManagerFacotry 인스턴스 할당
● mago3D API 사용
API 기능 사용 준비
var managerFactory; //전역 변수로 managerFactory 선언
// mago3D 초기화 완료
mago.on("ﬁnished", function () {
//전역 변수 managerFactory에 ManagerFacotry 인스턴스 할당
managerFactory = this.getManagerFactory();
// API 사용을 위한 코드 작성
});

6565
● changeLabelAPI : 데이터의 라벨을 표출
○ workshop-data.json에 선언된 data_name 항목의 값이 표출
● html code
API 예제(1) changeLabelAPI- 1/3
<div style="text-align: center; padding-bottom: 10px;">
<form id="apiForm" name="apiForm" action="" onsubmit="return false;">
<span style="padding-right: 20px;">Show Label</span>
<input type="radio" id="showLabel" name="labelToggle" value="true" onclick="changeLabel(true);" />
<label for="showLabel"> Display </label>
<input type="radio" id="hideLabel" name="labelToggle" checked value="false" onclick="changeLabel(false);" />
<label for="hideLabel"> Hide </label>
</form>
</div>

6666
● javascript code
<script>
// Label 표시/비표시
function changeLabel(isShow) {
// Label 표시 API 함수
changeLabelAPI(managerFactory, isShow);
}
</script>
<script>
var managerFactory;
options.policyUrl = "./persistence/workshop-policy.json";
options.dataBaseUrl = "./persistence/";
options.imageBaseUrl = "./images/";
// Label 표시
changeLabel(false);
});
mago.start();
</script>

6767
API off API on

6868
● 데이터의 BoundingBox를 표출
● html code
API 예제(2) changeBoundingBoxAPI- 1/3
<span style="padding-right: 20px;">BoundingBox</span>
<input type="radio" id="showBoundingBox" name="boundingBox" value="true" onclick="changeBoundingBox(true);" />
<label for="showBoundingBox"> Display </label>
<input type="radio" id="hideBoundingBox" name="boundingBox" checked value="false" onclick="changeBoundingBox(false);" />
<label for="hideBoundingBox"> Hide </label>
</form>
</div>

6969
<script>
// BoundingBox 표시/비표시
function changeBoundingBox(isShow) {
// BoundingBox 표시 API 함수
changeBoundingBoxAPI(managerFactory, isShow);
}
</script>
● javascript code
<script>
var managerFactory;
// BoundingBox 표시
changeBoundingBox(false);
});
mago.start();
</script>

7070
API off API on

7171
● 포인트 클라우드 데이터의 색상 변경 토글 기능
○ 원본의 색상과 높이에 따른 색상 표출을 토글 가능
● workshop-policy.json 에서 높이의 범위 조절 가능
● html code
API 예제(3) togglePointCloudColorAPI- 1/3
<span style="padding-right: 20px;">PointCloud Color Toggle</span>
<input type="radio" id="showPcNatural" name="pcColor" checked value="true" onclick="togglePointCloud();" />
<label for="showPcNatural"> natural </label>
<input type="radio" id="showPcRainbow" name="pcColor" value="false" onclick="togglePointCloud();" />
<label for="showPcRainbow"> rainbow </label>
</form>
</div>

7272
● javascript code
<script>
// 포인트 클라우드 칼라모드 토글
function togglePointCloud() {
// 포인트 클라우드 칼라모드 토글
togglePointCloudAPI(managerFactory);
}
</script>
<script>
var managerFactory;
});
mago.start();
</script>

7373
API : natural API : rainbow

감사합니다
For more information, please visit http://mago3d.com
All the source codes are here: https://github.com/Gaia3D/mago3d
info@gaia3d.com

2019스마트국토엑스포-20190808-mago3D기술워크샵

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 2019스마트국토엑스포-20190808-mago3D기술워크샵

Semelhante a 2019스마트국토엑스포-20190808-mago3D기술워크샵 (20)

2019스마트국토엑스포-20190808-mago3D기술워크샵