mago3D 기술 워크샵 자료(한국어)

Page 1

신상희([email protected])김학준([email protected])천정대( [email protected])

기술 워크샵

웹 브라우저 기반 협업 서비스.

BIM/AEC and 3D GIS 통합 플랫폼.

mailto:[email protected]



Page 2

1. 아키텍처

mago3D.JS

Cesium/WWW

Client

internet

Web Server WAS

F4DStoragemago

ContentManagement

DataBase

F4D Converter

mago3D의 핵심

Page 3

2. 핵심 컴포넌트 - F4D Converter

F4D Converter

F4D

.ifc

.3ds

.obj

.dae

.ifc 파일이나(BIM 표준 교환 포맷) .3ds/.obj/.dae 파일을(전통적인 3차원 포맷) mago3D 서비

스 전용 포맷인 F4D로 변환.

변환 과정에서 경량화와 성능 향상을 위한 전처리 작업 수행

Page 4

2. 핵심 컴포넌트 - mago3D JS

3D GIS engine이 AEC 데이터를 다룰 수 있게 확장해 주는 JavaScript 로 구성된 plug-in

4

mago3D.js

3D GIS Engines

Cesium.js

WorldWindWeb.js

API

API

service html

Page 5

2. 핵심 컴포넌트 - Content Management System

사용자, Role 관리, 데이터 관리, 이슈관리 등을 위한 Java Spring 기반의 협업 시스템

사용자

사용자

사용자

사용자

사용자(이슈등록)

관리자(사용자, Role, 데이터,이슈,통계, 보고서등)

네트워크망분리

Cache 갱신 HTTPS

관리자

Page 6

3. Product

F4DConverter

mago3DJS

ContentManagemt

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

Page 7

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 등)

인터넷 연결

Page 8

5. Community Edition – 따라하기

mago3D JS

Cesium/WWW

Client

internet

업무시스템

Web Server 고객사

F4DStorage

F4D Converter

REST API

Json(policy, data 등)

Page 9


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 예제

Page 10

이미 사용중인 편집기가 있는 경우 이 과정은 생략 가능.

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


Page 11

https://github.com/Gaia3D/mago3djs 에 접속, Clone or download 버튼 클릭

Download ZIP 링크를 클릭, C:\ 디렉토리에 저장

git을 사용하는 경우 git clone https://github.com/Gaia3D/mago3djs.git

압축 해제 후 확인

C:\mago3djs


Page 12


Eclipse 화면에서 마우스 우측 버튼 클릭

Import -> General -> Projects from Folder Archive 선택

Page 13

mago3D Community Edition을 로컬에서 실행하려면 웹 서버가 필요.

우리는 실습을 위해 Node.js를 사용.

이미 사용중인 웹 서버가 있는 경우 이 과정을 생략.

정적 컨텐츠를 서비스 할 수 있는 어떤 웹 서버도 사용 가능

https://nodejs.org/ko/download/ 에 접속 Window Installer(.msi) 64-bit Download.


Page 14

C:\nodejs 를 설치

c:\nodejs


Page 15

명령 프롬프트(cmd.exe) 를 관리자 권한으로 실행

C:\mago3djs 디렉토리로 이동

node install을 실행하여 필요한 모듈을 다운로드

C:\mago3djs>npm install

C:\mago3djs>npm install -g gulp

루트 디렉토리에 node_modules 디렉토리가 생성됨


Page 16

http://www.mago3d.com/homepage/download.do 에 접속

Installer : F4D Converter 64bit (this installation requires Windows 7 or later) 다운

설치 시작


Page 17

Install Path : C:\F4DConverter\


Page 18


Page 19

변환된 데이터(outputFoloder)를 저장할 디렉토리를 생성.

C:\data\workshop(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)는 현재 개발중.)


Page 20

※ 만약 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


Page 21

작업 관리자에서 실행중인 Process 를 확인 할 수 있음

실행이 끝나면 종료됨


Page 22

Data 변환에 성공했다면

C:\data\workshop 폴더에 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:\mago3djs\data" "C:\data"

‘dir’ command를 사용하여 링크 생성을 확인 ‘C:\mago3djs\data’


Page 23

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 파일을 수정해야 함.


Page 24

policy.json 수정

초기화시 로딩할 project, Init Camera Latitude, Longitude, CallBack Function,

Geo Server 설정 등

실습을 위해 mago3djs/tutorials/workshop-policy-tutorials.json 을 사용

페이지 초기화시 로딩할 프로젝트 설정 key 값.

복수개의 프로젝트 로딩을 원하는 경우 , 로 추가

웹 페이지 시작시 이동할 위치(latitude, longitude)를 수정


Page 25


data.json 수정

Data Key, Name, Latitude, Longitude, Altitude, Heading, Pitch, Roll 등

실습을 위해 mago3djs/tutorials/workshop-data-tutorials.json 을 사용

Sample 파일들을 Rendering 해 보자.

F4D Converter를 이용해서 F4D 포맷으로 변환.

Page 26

data.json 수정

크게 세가지 영역으로 나눠진다.

속성값을 저장하는 attributes, 자식 노드 정보를 저장하는 children,

그외 위치 정보를 저장하는 영역

json의 root 노드의 data_key는 data 폴더 아래 project 명과 일치해야 함


attribute 영역

자식 노드 영역

위치 정보 영역

프로젝트명

Page 27

C:\data\workshop 에서 Rendering 할 디렉토리를 찾음

디렉토리명에서 F4D_ 이후의 글자가

고유 식별자가 됨

data.json 파일에서 children 의

data_key 값을 musicHall 로 수정

latitude, longitude, height, heading,

pitch, roll 값을 적당한 값으로 수정


Page 28

프론트 엔드 웹 개발을 위한 빌드 자동화 툴로는 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/


Page 29

eclipse를 사용하는 경우

우측 화면과 같이 Gulp Task를 실행

eclipse를 사용하지 않는 경우

Command Prompt 실행후

mago3djs 프로젝트 디렉토리로 이동후

C:\mago3djs> gulp 를 실행

build 성공하면 mago3djs/build

디렉토리가 생성됨.

build 완료된 mago3d.js를 사용


Page 30

웹 서비스를 시작할 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="/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>


Page 31

mago3D JS instance를 생성


cesium map을 표시할 div id

설정 파일 로딩

페이지 로딩시 초기화 할 프로젝트

Page 32

웹 서버(node server) 를 실행

eclipse 를 사용하는 경우

/server.js 에서 마우스 오른쪽 클릭 > Run As > Node.js Application 실행

Command Prompt 로 실행하는 경우

Chrome 브라우저에서 아래 URL 페이지를 확인

http://localhost/tutorials/start.html

mago3djs installDirectory


Page 33

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>


Page 34

BoundingBox API 실행 Javascript를 추가

function changeBoundingBox(isShow) {changeBoundingBoxAPI(managerFactory, isShow);

}

Chrome 브라우저에서 아래 URL 페이지를 확인http://localhost/tutorials/api-boundingbox.html


Page 35


휴식 시간

Page 36

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

BuildGradle

LogLogback/Log4j2

SecurityESAPI

ReportJasper/POI

View

JSP/JSTL

UI/UX

Jquery

Chart

Jqplot/Axisj

TemplateThymeleafHandlebars

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

Page 37

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 설정

Page 38


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

Page 39


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

Page 40


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을 실행하여 초기 데이터 등록

Page 41


CMS 소스는 3개의 project로 구성되어 있음

parent project

admin

common

user

Page 42


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 소스를 참조

Page 43


New Issue, Issue 상태별 통계, 사용자, 스케줄 현황, Data 통계 현황 등을

한눈에 파악할 수 있음

①

②

no. 설 명

①

Issue 현황을 위젯으로 표시합니다.

신규 등록 Issue 건수- 신규 등록 Issue 건수를 카운트 합니다.

진행중인 Issue 건수- 진행중인 Issue 건수를 카운트 합니다.

완료된 Issue 건수- 완료된 Issue 건수를 카운트 합니다.

②

각 항목에 대해 위젯으로 표시합니다.환경설정 -> 위젯설정 메뉴에서 위젯 순서를변경할 수 있습니다.환경설정 -> 운영정책 -> 컨텐트 탭에서 메인화면 위젯 표시 개수를 설정할 수 있습니다.

Page 44


사용자 정책, 패스워드 정책, 공간정보, GeoServer, CallBack, 보안 정책 등을 설정

mago3JS 의 policy.json 은 운영정책 정보들을 json 파일로 변경한것

Page 45


데이터를 그룹화 하여 신규 등록, 상태 변경, 수정, 삭제 등 관리.

mago3JS 의 data.json 은 데이터 그룹별 데이터들을 json 파일로 변경한것

Data 사용 유무를 설정

Data 상태

Page 46


사용자가 등록한 Issue 를 관리.

각 Issue 별 진행 상태, 우선 순위, 마감일, 담당자등을 확인 가능

Page 47


사용자 그룹별로 사용자를 등록하고 각 그룹마다 Role을 부여.

사용자 요청 권한은 사용자 그룹에 해당 Role 의 존재 여부로 판단

Technology

mago3D 기술 워크샵 자료(한국어)