기술워크샵 웹브라우저기반협업서비스. BIM/AEC and 3D GIS 통합플랫폼. 신상희 (shshin@gaia3d.com) 김학준 (hjkim@gaia3d.com) 천정대 ( jdcheon@gaia3d.com) Page 1
1. 아키텍처 Client Web Server WAS DataBase internet mago3d.js Cesium/WWW F4DStorage mago Content Management F4D Converter mago3d 의핵심 Page 2
2. 핵심컴포넌트 - F4D Converter.ifc 파일이나 (BIM 표준교환포맷 ).3ds/.obj/.dae 파일을 ( 전통적인 3차원포맷 ) mago3d 서비스전용포맷인 F4D로변환. 변환과정에서경량화와성능향상을위한전처리작업수행.ifc.3ds.obj F4D Converter F4D.dae Page 3
2. 핵심컴포넌트 - mago3d JS 3D GIS engine 이 AEC 데이터를다룰수있게확장해주는 JavaScript 로구성된 plug-in service html API mago3d.js API 3D GIS Engines Cesium.js WorldWindWeb.js 4 Page 4
2. 핵심컴포넌트 - Content Management System 사용자, Role 관리, 데이터관리, 이슈관리등을위한 Java Spring 기반의협업시스템 사용자 네트워크망분리 사용자 사용자 ( 이슈등록 ) Cache 갱신 관리자 ( 사용자, Role, 데이터, 이슈, 통계, 보고서등 ) HTTPS 사용자 관리자 사용자 Page 5
3. Product F4D Converter mago3djs Content Managemt System 3D Data Converter Browser 3D Rendering Data, Issue DB Manager 운영중인고객사의협업, 이슈관리업무시스템또는새롭게도입할업무시스템에웹브라우저기반 3D Rendering 전용솔루션으로사용되는경우. F4D Converter + mago3d JS 대용량데이터관리, 이슈관리, 사용자관리, 통계, 레포트등을제공하는 3D 컨텐츠관리시스템으로사용하는경우. F4D Converter + mago3d JS + Content Management System Page 6
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 7
Client Web Server 고객사 REST API internet mago3d JS Cesium/WWW F4DStorage Json (policy, data 등 ) 업무시스템 F4D Converter Page 8
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 9
이미사용중인편집기가있는경우이과정은생략가능. 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 10
https://github.com/gaia3d/mago3djs 에접속, Clone or download 버튼클릭 Download ZIP 링크를클릭, C:\ 디렉토리에저장 git을사용하는경우 git clone https://github.com/gaia3d/mago3djs.git 압축해제후확인 C:\mago3djs Page 11
Eclipse 화면에서마우스우측버튼클릭 Import -> General -> Projects from Folder Archive 선택 Page 12
mago3d Community Edition을로컬에서실행하려면웹서버가필요. 우리는실습을위해 Node.js를사용. 이미사용중인웹서버가있는경우이과정을생략. 정적컨텐츠를서비스할수있는어떤웹서버도사용가능 https://nodejs.org/ko/download/ 에접속 Window Installer(.msi) 64-bit Download. Page 13
C:\nodejs 를설치 c:\nodejs Page 14
명령프롬프트 (cmd.exe) 를관리자권한으로실행 C:\mago3djs 디렉토리로이동 node install을실행하여필요한모듈을다운로드 C:\mago3djs>npm install C:\mago3djs>npm install -g gulp 루트디렉토리에 node_modules 디렉토리가생성됨 Page 15
http://www.mago3d.com/homepage/download.do 에접속 Installer : F4D Converter 64bit (this installation requires Windows 7 or later) 다운 설치시작 Page 16
Install Path : C:\F4DConverter\ Page 17
Page 18
변환된데이터 (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 19
만약 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 20
작업관리자에서실행중인 Process 를확인할수있음 실행이끝나면종료됨 Page 21
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 22
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 23
policy.json 수정 초기화시로딩할 project, Init Camera Latitude, Longitude, CallBack Function, Geo Server 설정등 실습을위해 mago3djs/tutorials/workshop-policy-tutorials.json 을사용 페이지초기화시로딩할프로젝트설정 key 값. 복수개의프로젝트로딩을원하는경우, 로추가 웹페이지시작시이동할위치 (latitude, longitude) 를수정 Page 24
data.json 수정 Data Key, Name, Latitude, Longitude, Altitude, Heading, Pitch, Roll 등 실습을위해 mago3djs/tutorials/workshop-data-tutorials.json 을사용 Sample 파일들을 Rendering 해보자. F4D Converter 를이용해서 F4D 포맷으로변환. Page 25
data.json 수정 크게세가지영역으로나눠진다. 속성값을저장하는 attributes, 자식노드정보를저장하는 children, 그외위치정보를저장하는영역 json의 root 노드의 data_key는 data 폴더아래 project 명과일치해야함 attribute 영역 자식노드영역 위치정보영역 프로젝트명 Page 26
C:\data\workshop 에서 Rendering 할디렉토리를찾음 디렉토리명에서 F4D_ 이후의글자가고유식별자가됨 data.json 파일에서 children 의 data_key 값을 musichall 로수정 latitude, longitude, height, heading, pitch, roll 값을적당한값으로수정 Page 27
프론트엔드웹개발을위한빌드자동화툴로는 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 28
eclipse를사용하는경우우측화면과같이 Gulp Task를실행 eclipse를사용하지않는경우 Command Prompt 실행후 mago3djs 프로젝트디렉토리로이동후 C:\mago3djs> gulp 를실행 build 성공하면 mago3djs/build 디렉토리가생성됨. build 완료된 mago3d.js를사용 Page 29
웹서비스를시작할 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 30
mago3d JS instance 를생성 cesium map 을표시할 div id 설정파일로딩 페이지로딩시초기화할프로젝트 Page 31
웹서버 (node server) 를실행 eclipse 를사용하는경우 /server.js 에서마우스오른쪽클릭 > Run As > Node.js Application 실행 Command Prompt 로실행하는경우 mago3djs installdirectory Chrome 브라우저에서아래 URL 페이지를확인 http://localhost/tutorials/start.html Page 32
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 33
BoundingBox API 실행 Javascript 를추가 function changeboundingbox(isshow) { changeboundingboxapi(managerfactory, isshow); } Chrome 브라우저에서아래 URL 페이지를확인 http://localhost/tutorials/api-boundingbox.html Page 34
6. Enterprise Edition - S/W View JSP/JSTL UI/UX Jquery Chart Jqplot/Axisj Template Thymeleaf Handlebars Build Gradle Log Logback/Log4j2 Security ESAPI Report Jasper/POI mago3d JS Cache Html5, JavaScript, 3D GIS Engine(Cesium, WorldWind) EhCache, Redis F4D ConverterC++ DB Geo Server Framework Language Postgresql 9.6 + PostGIS Geo Server Spring(Springboot) + Mybatis Java8 WAS Tomcat 8.5 Web Server Nginx 1.12.1 / Apache 2.4 OS Centos 7.2 Page 35
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 36
7. Enterprise Edition - 소개 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 37
7. Enterprise Edition - 소개 postgresql https://www.enterprisedb.com/downloads/postgres-postgresqldownloads#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 38
7. Enterprise Edition - 소개 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 39
7. Enterprise Edition - 소개 CMS 소스는 3 개의 project 로구성되어있음 parent project admin common user Page 40
7. Enterprise Edition - 소개 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 41
7. Enterprise Edition - 소개 New Issue, Issue 상태별통계, 사용자, 스케줄현황, Data 통계현황등을 한눈에파악할수있음 1 2 no. 1 2 설명 Issue 현황을위젯으로표시합니다. 신규등록 Issue 건수 - 신규등록 Issue 건수를카운트합니다. 진행중인 Issue 건수 - 진행중인 Issue 건수를카운트합니다. 완료된 Issue 건수 - 완료된 Issue 건수를카운트합니다. 각항목에대해위젯으로표시합니다. 환경설정 -> 위젯설정메뉴에서위젯순서를변경할수있습니다. 환경설정 -> 운영정책 -> 컨텐트탭에서메인화면위젯표시개수를설정할수있습니다. Page 42
7. Enterprise Edition - 소개 사용자정책, 패스워드정책, 공간정보, GeoServer, CallBack, 보안정책등을설정 mago3js 의 policy.json 은운영정책정보들을 json 파일로변경한것 Page 43
7. Enterprise Edition - 소개 데이터를그룹화하여신규등록, 상태변경, 수정, 삭제등관리. mago3js 의 data.json 은데이터그룹별데이터들을 json 파일로변경한것 Data 사용유무를설정 Data 상태 Page 44
7. Enterprise Edition - 소개 사용자가등록한 Issue 를관리. 각 Issue 별진행상태, 우선순위, 마감일, 담당자등을확인가능 Page 45
7. Enterprise Edition - 소개 사용자그룹별로사용자를등록하고각그룹마다 Role 을부여. 사용자요청권한은사용자그룹에해당 Role 의존재여부로판단 Page 46