�ݺ�ߣ

신상희(shshin@gaia3d.com)
김학준(hjkim@gaia3d.com)
천정대(jdcheon@gaia3d.com)
기술 워크샵
웹 브라우저 기반 협업 서비스.
BIM/AEC and 3D GIS 통합 플랫폼.

1. 아키텍처
mago3D.JS
Cesium/WWW
Client
internet
Web Server WAS
F4DStorage
mago
Content
Management
DataBase
F4D Converter
mago3D의 핵심

2. 핵심 컴포넌트 - F4D Converter
F4D Converter
F4D
.ifc
.3ds
.obj
.dae
 .ifc 파일이나(BIM 표준 교환 포맷) .3ds/.obj/.dae 파일을(전통적인 3차원 포맷) mago3D 서비
스 전용 포맷인 F4D로 변환.
 변환 과정에서 경량화와 성능 향상을 위한 전처리 작업 수행

2. 핵심 컴포넌트 - mago3D JS
 3D GIS engine이 AEC 데이터를 다룰 수 있게 확장해 주는 JavaScript 로 구성된 plug-in
4
mago3D.js
3D GIS Engines
Cesium.js
WorldWindWeb.js
API
API
service html

2. 핵심 컴포넌트 - Content Management System
 사용자, Role 관리, 데이터 관리, 이슈관리 등을 위한 Java Spring 기반의 협업 시스템
사용자
사용자
사용자
사용자
사용자
(이슈등록)
관리자
(사용자, Role,
데이터,이슈,
통계, 보고서등)
네트워크 망분리
Cache 갱신 HTTPS
관리자

3. Product
F4D
Converter
mago3DJS
Content
Managemt
System
 운영중인 고객사의 협업, 이슈 관리 업무 시스템 또는 새롭게 도입할 업무시스템에
웹 브라우저 기반 3D Rendering 전용 솔루션으로 사용되는 경우.
 F4D Converter + mago3D JS
 대용량 데이터 관리, 이슈 관리, 사용자 관리, 통계, 레포트등을 제공하는
3D 컨텐츠 관리 시스템으로 사용하는 경우.
 F4D Converter + mago3D JS + Content Management System
3D Data Converter Browser 3D Rendering Data, Issue DB Manager

4. 워크샵
 mago3D Community Edition ( F4D Converter + mago3D JS ) 을 설치, 실행해 보고
운영 중인 업무 시스템과의 연동 혹은 신규 프로젝트에서 3D Rendering Solution으로
mago3D를 활용하는 방안을 배워 본다.
 mago3D Enterprise Edition( F4D Converter + mago3D JS + Content Management System )
의 주요 기능인 Data 관리, Issue 관리, Role 관리 등을 알아 본다.
 OS : Window7 이상 (64bit)
 JRE : 1.8 이상
 디스크 공간 : 최소 2G 이상
 RAM : 8G 이상(16G 추천)
 3D Sample File(IFC, 3DS, Collada, Obj, JT 등)
 인터넷 연결

5. Community Edition – 따라하기
mago3D JS
Cesium/WWW
Client
internet
업무
시스템
Web Server 고객사
F4DStorage
F4D Converter
REST API
Json
(policy, data 등)

 mago3D Community Edition(F4DConverter + mago3DJS)을 다운 로드,
예제 3D 파일을 F4D Converter를 이용하여 F4D Data Format으로 변환한 후,
mago3DJS와 연동하여 웹 브라우저로 확인한다.
1) Editor or IDE Install
2) mago3D JS Source Download
3) Web Server Install
4) F4D Converter Install(.msi)
5) Data 변환
6) 설정파일 수정
7) mago3D JS build
8) Getting Start
9) API 예제

 이미 사용중인 편집기가 있는 경우 이 과정은 생략 가능.
 mago3D 개발팀의 경우 Eclipse 를 사용
 http://www.eclipse.org/downloads/eclipse-packages/
 Eclipse IDE for Java EE Developers
 Java 설치 필요(java8 버전 권장)
 편집기가 없는 경우는 무료 오픈 소스 편집기인 Notepad ++을 아래 사이트에서
다운로드 후 설치
 https://notepad-plus-plus.org/download/v7.5.1.html

 https://github.com/Gaia3D/mago3djs 에 접속, Clone or download 버튼 클릭
 Download ZIP 링크를 클릭, C: 디렉토리에 저장
 git을 사용하는 경우 git clone https://github.com/Gaia3D/mago3djs.git
 압축 해제 후 확인
 C:mago3djs

 Eclipse 화면에서 마우스 우측 버튼 클릭
 Import -> General -> Projects from Folder Archive 선택

 mago3D Community Edition을 로컬에서 실행하려면 웹 서버가 필요.
 우리는 실습을 위해 Node.js를 사용.
 이미 사용중인 웹 서버가 있는 경우 이 과정을 생략.
 정적 컨텐츠를 서비스 할 수 있는 어떤 웹 서버도 사용 가능
 https://nodejs.org/ko/download/ 에 접속 Window Installer(.msi) 64-bit Download.

 C:nodejs 를 설치
c:nodejs

 명령 프롬프트(cmd.exe) 를 관리자 권한으로 실행
 C:mago3djs 디렉토리로 이동
 node install을 실행하여 필요한 모듈을 다운로드
C:mago3djs>npm install
C:mago3djs>npm install -g gulp
 루트 디렉토리에 node_modules 디렉토리가 생성됨

 http://www.mago3d.com/homepage/download.do 에 접속
 Installer : F4D Converter 64bit (this installation requires Windows 7 or later) 다운
 설치 시작

 Install Path : C:F4DConverter

 변환된 데이터(outputFoloder)를 저장할 디렉토리를 생성.
C:dataworkshop(root folder 인 data 폴더 아래 프로젝트 별로 디렉토리를 생성)
 변환할 데이터를 D:demo_data(inputFolder)에 저장.
 관리자 권한으로 Command Line Prompt(cmd.exe) 를 실행.
 F4DConverter 가 설치된 디렉토리로 이동.
 다음을 실행
* 상세 옵션 참조 : refer https://github.com/Gaia3D/F4DConverter
-inputFolder [rawDataFolder] : an absolute path of the folder where raw data files to be converted are.
-outputFolder [F4DFolder] : an absolute path of the folder where conversion results(F4D datasets) are created.
-log [logFileFullPath] : an absolute path of a log file which is created after finishing conversion processes.
-indexing [one of Y, y, N, n] : wheter objectIndexFile.ihe should be created or not. "NOT created" is default.
 모든 디렉토리명은 영어로 작성( 다국어(multi-byte string)는 현재 개발중.)

※ 만약 F4DConverter.exe를 실행시, 컴포넌트를 찾을 수 없다는 오류(MFC140U.dll,
MSVCP140.dll, VCRUNTIME140.dll, MSVCP100.dll) 가 발생한다면
아래의 두 패키지를 설치 하시기 바랍니다.
 visual studio 2015 visual C++ redistributable package
https://www.microsoft.com/en-us/download/confirmation.aspx?id=48145
 visual studio 2010 visual C++ redistributable package
https://www.microsoft.com/en-us/download/details.aspx?id=14632

 작업 관리자에서 실행중인 Process 를 확인 할 수 있음
 실행이 끝나면 종료됨

 Data 변환에 성공했다면
 C:dataworkshop 폴더에 F4D_XXX 폴더들과, ObjectIndexFile.ihe 파일
생성을 확인
 실패했을 경우 demo_data(inputFolder) 에서 로그파일(logTest.txt)을 확인.
 변환 완료된 F4D 파일들을 mago3D JS 프로젝트에서 웹 서비스로 사용할 수
있도록 Symbolic Link를 생성.
 관리자 권한으로 Command Line Prompt(cmd.exe) 를 실행.
 mago3D JS 프로젝트로 이동
C:mago3djs
 C:mago3djs>mklink /d "C:mago3djsdata" "C:data"
 ‘dir’ command를 사용하여 링크 생성을 확인 ‘C:mago3djsdata’

 mago3D Enterprise Edition 의 경우 RDB(Postgresql + PostGis) 를 이용하여
mago3D 운영 정책, Data 등을 관리.
mago3D Community Edition의 경우 타 업무 시스템과 API 연동을 통해
mago3D 운영 정책, Data 등을 관리.
mago3D Community Edition 은 개발자 Local PC에서 간단히 실행하고 기능을
확인하기 위해 API 연동과 동일한 결과를 Mock 형태의 Json 을 통해 제공.
 Community Edition의 경우 두가지 타입의 설정 파일을 가지고 있음
mago3D JS Rendering 관련 설정을 담당하는 policy.json 파일과
Data의 Location 정보를 담당하는 data.json.
 policy.json, data.json 파일을 수정해야 함.

 policy.json 수정
 초기화시 로딩할 project, Init Camera Latitude, Longitude, CallBack Function,
Geo Server 설정 등
 실습을 위해 mago3djs/tutorials/workshop-policy-tutorials.json 을 사용
 페이지 초기화시 로딩할 프로젝트 설정 key 값.
복수개의 프로젝트 로딩을 원하는 경우 , 로 추가
 웹 페이지 시작시 이동할 위치(latitude, longitude)를 수정

 data.json 수정
 Data Key, Name, Latitude, Longitude, Altitude, Heading, Pitch, Roll 등
 실습을 위해 mago3djs/tutorials/workshop-data-tutorials.json 을 사용
 Sample 파일들을 Rendering 해 보자.
 F4D Converter를 이용해서 F4D 포맷으로 변환.

 data.json 수정
 크게 세가지 영역으로 나눠진다.
속성값을 저장하는 attributes, 자식 노드 정보를 저장하는 children,
그외 위치 정보를 저장하는 영역
 json의 root 노드의 data_key는 data 폴더 아래 project 명과 일치해야 함
attribute 영역
자식 노드 영역
위치 정보 영역
프로젝트명

 C:dataworkshop 에서 Rendering 할 디렉토리를 찾음
 디렉토리명에서 F4D_ 이후의 글자가
고유 식별자가 됨
 data.json 파일에서 children 의
data_key 값을 musicHall 로 수정
 latitude, longitude, height, heading,
pitch, roll 값을 적당한 값으로 수정

 프론트 엔드 웹 개발을 위한 빌드 자동화 툴로는 webpack, grunt, gulp, bower,
yeoman 등이 있음.
 mago3D JS의 경우, Gulp를 사용하고 있음.
https://gulpjs.com/
 /gulpfile.js
 clean, combine, uglify, doc, lint 등의 task을 사용함.
 Document 생성을 위해 jsdoc
http://usejsdoc.org/
 코딩 규약을 위해 ESLint를 사용.
https://eslint.org/
 Test 를 위해 Jasmine 등을 사용. 테스트 코드 작성 예정
https://jasmine.github.io/

 eclipse를 사용하는 경우
우측 화면과 같이 Gulp Task를 실행
 eclipse를 사용하지 않는 경우
Command Prompt 실행후
mago3djs 프로젝트 디렉토리로 이동후
C:mago3djs> gulp 를 실행
 build 성공하면 mago3djs/build
디렉토리가 생성됨.
 build 완료된 mago3d.js를 사용

 웹 서비스를 시작할 start.html 을 만들어 보자.
 편집기를 이용하여 /mago3djs/tutorials/start.html 을 연다.
 첫번째로 cesium을 사용하기 위해 css, javascript를 include
<link rel="stylesheet" href="/src/engine/cesium/Widgets/widgets.css" />
<script type="text/javascript" src=/ssuser68bf16/mago3-d/"/src/engine/cesium/Cesium.js"></script>
 두번째로 jquery를 사용하기 위해 include
<script type="text/javascript" src="/thirdparty/jquery/jquery.js"></script>
 세번째로 mago3d 를 incude
<script type="text/javascript" src="/build/mago3d/mago3d.js"></script>
 html 페이지에서 3D Rendering 할 DIV 영역을 생성
<div id="magoContainer" class="mapWrap"></div>

 mago3D JS instance를 생성
cesium map을 표시할 div id
설정 파일 로딩
페이지 로딩시 초기화 할 프로젝트

 웹 서버(node server) 를 실행
 eclipse 를 사용하는 경우
/server.js 에서 마우스 오른쪽 클릭 > Run As > Node.js Application 실행
 Command Prompt 로 실행하는 경우
 Chrome 브라우저에서 아래 URL 페이지를 확인
http://localhost/tutorials/start.html
mago3djs installDirectory

 Bounding Box를 표시하는 API를 적용해 보자.
 mago3D 홈페이지 API 문서를 참조
http://www.mago3d.com/homepage/api.do
 왼쪽 메뉴의 changeBoundingBoxAPI 를 클릭
http://www.mago3d.com/homepage/api.do#changeBoundingBoxAPI
 BoundingBox 표시 유무를 설정할 html form 태그 추가
<div style="text-align: center; padding-bottom: 10px;">
<form id="apiForm" name="apiForm" action="" onsubmit="return false;" >
<span>BoundingBox</span>
<input type="radio" id="showBoundingBox" name="boundingBox" value="true“
onclick="changeBoundingBox(true);" />
<label for="showBoundingBox"> 표시 </label>
<input type="radio" id="hideBoundingBox" name="boundingBox" value="false"
onclick="changeBoundingBox(false);" />
<label for="hideBoundingBox"> 비표시 </label>
</form>
</div>

 BoundingBox API 실행 Javascript를 추가
function changeBoundingBox(isShow) {
changeBoundingBoxAPI(managerFactory, isShow);
}
 Chrome 브라우저에서 아래 URL 페이지를 확인
http://localhost/tutorials/api-boundingbox.html

휴식 시간

6. Enterprise Edition - S/W
DB Postgresql 9.6 + PostGIS
Web Server Nginx 1.12.1 / Apache 2.4
Language Java8
Framework Spring(Springboot) + Mybatis
Build
Gradle
Log
Logback/Log4j2
Security
ESAPI
Report
Jasper/POI
View
JSP/JSTL
UI/UX
Jquery
Chart
Jqplot/Axisj
Template
Thymeleaf
Handlebars
Geo Server Geo Server
OS Centos 7.2
mago3D JS Html5, JavaScript, 3D GIS Engine(Cesium, WorldWind)
Cache EhCache, Redis
F4D ConverterC++
WAS Tomcat 8.5

7. Enterprise Edition - 소개
 설치 방법을 간단히 소개
 mago3D Enterprise Edition(F4D Converter + mago3D JS + CMS)를 이용하여
Data를 등록, Issue를 관리하는 방법을 설명
※ CMS, 다국어 버전은 개발중.
1) Install
2) Dashboard, policy 설정
3) Data 관리
4) Issue 관리
5) Role Based Access Control 설정

 java
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-
2133151.html
java jdk-8u144-windows-x64.exe
 eclipse
https://www.eclipse.org/downloads/eclipse-packages/
Eclipse IDE for Java EE Developers 64bit
 gradle
https://gradle.org/releases/
v4.1

 postgresql
https://www.enterprisedb.com/downloads/postgres-postgresql-
downloads#windows
9.6.5
 postgis
http://download.osgeo.org/postgis/windows/pg96/
 Lombok
https://projectlombok.org/download
1.16.18
 source download
https://github.com/Gaia3D/mago3d

 eclipse 를 실행 후 Project Import
File -> import -> Gralde -> Existing Gradle Project
 DB Table 생성 및 초기 데이터 등록
 window 자동 실행 script는 개발중.
 download 한 소스의 /mago3d-core/src/doc 폴더로 이동
 ddl 폴더의 sql 파일을 실행하여 table을 생성.
table, table column comment 다국어 버전은 개발중
 ddl 폴더의 sequence sql 실행하여 sequence 생성
 index, trigger 폴더의 sql을 실행하여 index 및 partition 생성
 dml 폴더의 sql을 실행하여 초기 데이터 등록

 CMS 소스는 3개의 project로 구성되어 있음
parent project
admin
common
user

 Eclipse BuildShip Gradle Plugin 또는 Gradle command line을 이용하여 build
 mago3d-admin project spring boot 실행
/mago3d-admin/src/main/java/com/gaia3d/Mago3dAdminApplication.java
 브라우저를 실행하여 http://localhost/login/login.do 로 접속
 초기 id, passwor는
/mago3d-core/src/doc/database/dml/insert.sql 파일에 있음
admin password, salt 생성 방법은
/mago3d-admin/src/test/java/com/gaia3d/PasswordTest.java 소스를 참조

 New Issue, Issue 상태별 통계, 사용자, 스케줄 현황, Data 통계 현황 등을
한눈에 파악할 수 있음
①
②
no. 설 명
①
Issue 현황을 위젯으로 표시합니다.
신규 등록 Issue 건수
- 신규 등록 Issue 건수를 카운트 합니다.
진행중인 Issue 건수
- 진행중인 Issue 건수를 카운트 합니다.
완료된 Issue 건수
- 완료된 Issue 건수를 카운트 합니다.
②
각 항목에 대해 위젯으로 표시합니다.
환경설정 -> 위젯설정 메뉴에서 위젯 순서를
변경할 수 있습니다.
환경설정 -> 운영정책 -> 컨텐트 탭에서 메인
화면 위젯 표시 개수를 설정할 수 있습니다.

 사용자 정책, 패스워드 정책, 공간정보, GeoServer, CallBack, 보안 정책 등을 설정
 mago3JS 의 policy.json 은 운영정책 정보들을 json 파일로 변경한것

 데이터를 그룹화 하여 신규 등록, 상태 변경, 수정, 삭제 등 관리.
 mago3JS 의 data.json 은 데이터 그룹별 데이터들을 json 파일로 변경한것
Data 사용 유무를 설정
Data 상태

 사용자가 등록한 Issue 를 관리.
 각 Issue 별 진행 상태, 우선 순위, 마감일, 담당자등을 확인 가능

 사용자 그룹별로 사용자를 등록하고 각 그룹마다 Role을 부여.
 사용자 요청 권한은 사용자 그룹에 해당 Role 의 존재 여부로 판단

�ݺ�ߣ

Mago3 d 워크샵

More Related Content

Mago3 d 워크샵

Editor's Notes