This is the mago3D technical hands-on material prepared for the FOSS4G Tokyo 2017 attendees. mago3D is the brand-new web based 3D GeoBIM platform on top of Cesium or NASA World Wind. With mago3D, users can service complicated and very large size 3D BIM/AEC data through internet. This material covers what is mago3D, how it works, overall system architecture/components, how to install mago3D, how to convert data and how to get it started. After attending the seminar, users are expected to service their own data through internet using mago3D.

1. Page 1
A Brand New Geo-BIM Platform
on top of Cesium & World Wind
Sanghee Shin(shshin@gaia3d.com)
Hakjoon Kim(hjkim@gaia3d.com)
JeongDae Cheon(jdcheon@gaia3d.com)
FOSS4G 2017 Tokyo Technical Workshop Material

2. Page 2
1. mago3D Product
F4D
Converter
mago3DJS
Content
Managemt
System
 Used as a 3D rendering solution, specially in case that you want to insert 3D rendering part
into any business systems already existing.
 F4D Converter + mago3DJS
 A platform for handling large-sized 3D contents, which offers functionality about data &
issue managements.
 F4D Converter + mago3DJS + Content Management System
3D Data Converter Browser 3D Rendering Data, Issue DB Manager

3. Page 3
Client
internet
Web Server WAS
F4DStorage
mago3D.JS
mago
Content
Management
DataBase
2. Architecture - mago3D
F4D Converter

4. Page 4
2. Architecture - F4D Converter
Writer
Processor
Reader
Assimp.3ds .obj .dae
IfcPlusPlus / Carve.ifc
OpenCascade.jt
ClassicReader
IfcReader
JtReader
fixing triangle vertices order
bounding box calculation
exterior object extraction
model/reference extraction
vbo creation/triangle sorting
spatial octree creation
visibility indexing
lego structure creation

5. Page 5
2. Architecture - mago3DJS
mago3D Renderer
Shader
mago3D Accelerator
Performance Enhancer
mago3D
REST API
request, response
mago3D
Process
Manager
mago3D
Data
Container
Cesium NASA World Wind Etc.
mago3D Core
WebGL Globe Core
mago3D Connector
 REST API
3D Data request/response API
 Data Container
performs loading/parsing
 Process Manager
manages all processes
 Accelerator
for performance improvement
 Renderer
visualizes 3D data
 Core
F4D data Handling
 Connector
links mago3D with WebGL-based
globes such like Cesium & WorldWind

6. Page 6
2. Architecture - Content Management System
Data Manager
F4D Data
Hosting
API
User Issue
Schedule
RBAC
Role Based
Access Control
Public Private
spring framework

7. Page 7
3. SW composition
DB Postgresql 9.6 + PostGIS
Web Server Nginx 1.12.1 / Apache 2.4
Language Java8
Framework Spring(Springboot) + Mybatis
Build
Gradle
Log
Log4j2/Logback
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
3D Viewer Cesium, WorldWind
Cache EhCache, Redis
Container Docker
WAS Tomcat 8.5

8. Page 8
4. Community Edition – Let’s do it.
 Using Community Edition(F4DConverter + mago3dDJS), we will deploy mago3DJS
and publish 3D Data which are converted from sample IFC files through
F4DConverter. Then, we can check published 3D data on our web browsers.
1) Source Download(mago3DJS)
2) Node Install
3) F4D Converter Install(.msi)
4) Data Conversion
5) Configuration Modification
6) Getting Start

9. Page 9
 https://github.com/Gaia3D/mago3djs
 Click ‘Clone or download’ in upper right side
 Select ‘Download ZIP’ and save zip file in ‘C:’
 In case of using git : git clone https://github.com/Gaia3D/mago3djs.git
 Unzip and check the result
 C:mago3djs
4. Community Edition – Let’s do it.

10. Page 10
 https://nodejs.org/ko/download/
 Window Installer(.msi) 64-bit Download
 Install
4. Community Edition – Let’s do it.

11. Page 11
 Install path : C:nodejs
c:nodejs
4. Community Edition – Let’s do it.

12. Page 12
 Using cmd.exe in administrator mode, change current directory to ‘C:mago3djs’
 node setup
C:mago3djs>npm install
C:mago3djs>npm install -g gulp
4. Community Edition – Let’s do it.

13. Page 13
 http://www.mago3d.com/homepage/download.do
 Installer : F4D Converter 64bit (this installation requires Windows 7 or later)
 Install
4. Community Edition – Let’s do it.

14. Page 14
 Install Path : C:F4DConverter
4. Community Edition – Let’s do it.

15. Page 15
4. Community Edition – Let’s do it.

16. Page 16
 Create outputFolder, where converted result will be saved
C:data
 put sample ifc files into inputFolder
 Run Command Line Prompt(cmd.exe) in Administrator mode
 Change current directory to the directory where F4DConverter is installed
 Run following
* all arguments : 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.
 All paths are named in English(multi-byte string is not supported yet.)
4. Community Edition – Let’s do it.

17. Page 17
※ If component missing errors (MFC140U.dll, MSVCP140.dll, VCRUNTIME140.dll,
MSVCP100.dll) occrur when you start F4DConverter.exe, install following two packages.
 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
4. Community Edition – Let’s do it.

18. Page 18
4. Community Edition – Let’s do it.
 Create a symbolic link for the F4D data folder to make the folder be used as a
data folder of web service in mago3DJS project.
 Using cmd.exe in administrator mode, change current directory to
‘C:mago3djs’
 C:mago3djs>mklink /d "C:mago3djsdata" "C:data"
 Check if the symbol ‘C:mago3djsdata’ is created by ‘dir’ command.

19. Page 19
 In Enterprise Edition, operation policy & data management are on RDB(Postgresql
+ PostGis)
In Community Edition, these are on json files of Mock type
 Two configuration files are available on Community Edition
policy.json : 3D rendering policy
data.json : list up for 3D Data to be serviced and their location information
 policy.json
Init Camera Latitude, Longitude, CallBack Function, GeoServer config, etc
 data.json
Data Key, Name, Latitude, Longitude, Altitude, Heading, Pitch, Roll, etc
4. Community Edition – Let’s do it.

20. Page 20
 policy.json : /tutorials/policy-tutorials.json for today’s workshop. no modification.
 data.json : /tutorials/data-tutorials.json for today’s workshop. have to be modified.
“test_id ": { // DB unique key
"list_counter": 10, // page list counter
“data_id”: 999, // DB sequence
"data_group_id": 77, // Data Group ID
"data_group_name": “IFC", // Data Group Name
"data_key": " test_id ", // DB unique key
“data_name＂: ＂테스트＂, // Data name
“latitude＂: ＂35.6604＂, // latitude
“longitude＂: ＂139.6863＂, // longitude
“height＂: ＂75＂, // height
“heading＂: ＂73＂, // heading
"pitch": "0.0", // pitch
"roll": "0.0", // roll
"status": "0", // status
"data_insert_type": "SELF", // data insert type
“insert_date＂: ＂2017-06-26 21:06:29 “ // DB insert date
}
4. Community Edition – Let’s do it.

21. Page 21
 let’s place a building on 東京大学駒場リサーチキャンパス
 how to modify data.json
 look for a target in C:data
C:dataF4D_studentsBuilding_s
studentsBuilding_s is data_key, data_name is written with dummy string
 location of 東京大学駒場リサーチキャンパス in WGS84
latitude : 35.6604, longitude : 139.6863, height : 75
“hakdongPark_s ": { // DB unique key
"data_key": "hakdongPark_s", // DB unique key
“data_name＂: “class room＂, // Data name
“latitude＂: ＂35.6604＂, // latitude
“longitude＂: ＂139.6863＂, // longitude
“height＂: ＂75＂, // height
“heading＂: ＂73＂, // heading
"pitch": "0.0", // pitch
"roll": "0.0", // roll
4. Community Edition – Let’s do it.

22. Page 22
 let’s make start.html
 import jquery for ajax communication
 import Cesium in mago3djs package
 import mago3d.js
for today’s workshop, use /tutorials/mago3d.js
(originally, you have to use the build result in build path)
 set up a ‘div’ component, which will be linked with Cesium
4. Community Edition – Let’s do it.

23. Page 23
 let’s make start.html
 insert a javascript code block which will trigger mago3d plugin connection
div id for the viewer to cesium map
policy json configuration
data json configuration
mago3D start
4. Community Edition – Let’s do it.

24. Page 24
 let’s make start.html
 run node server
 check the result in your web browser
http://localhost/tutorials/start.html
mago3djs installDirectory
4. Community Edition – Let’s do it.

25. Page 25
 using search API in mago3D
 this API offers data search using data Key
 create a form tag where data Key can be entered
 link the created form to the API using javascript
 refer http://localhost/tutorials/api-search-data.html
 all mago3DJS API list : /src/mago3d/domain/MagoFacade.js
how to use or sample code is on home page Document
4. Community Edition – Let’s do it.

26. Page 26
5. Enterprise Edition - Introduction
 Simple introduction for how to install
 Simple information about 3D Data registration & Issue management using
mago3D Enterprise Edition(F4D Converter + mago3DJS + CMS)
※ Multi-language version is under development.
1) Install
2) Dashboard, policy configuration
3) Data management
4) Issue management
5) Role Based Access Control configuration

27. Page 27
5. Enterprise Edition - Introduction
 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

28. Page 28
5. Enterprise Edition - Introduction
 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

29. Page 29
5. Enterprise Edition - Introduction
 do ‘Project Import’ after running eclipse
File -> import -> Gradle -> Existing Gradle Project
 DB Table creation and initialization
 Auto-run script for window is under development
 Move to the folder ‘/mago3d-core/src/doc’ in downloaded source
 Run table creation sql script in ddl folder to create tables
multi-language version for table, table column comment is under
development
 Run sequence sql script in ddl folder to create sequence
 Run sql script files in index & trigger folders to create index & partition
 Run sql script files in dml to register initial data

30. Page 30
5. Enterprise Edition - Introduction
 CMS is composed of 3 projects
parent project
admin
common
user

31. Page 31
5. Enterprise Edition - Introduction
 Build the project using Eclipse BuildShip Gradle Plugin or Gradle command line
 Run mago3d-admin project spring boot
/mago3d-admin/src/main/java/com/gaia3d/Mago3dAdminApplication.java
 Access to http://localhost/login/login.do with web browser
 initial id & password is in /mago3d-core/src/doc/database/dml/insert.sql
Refer /mago3d-admin/src/test/java/com/gaia3d/PasswordTest.java to know how to
generate admin password & salt

32. Page 32
5. Enterprise Edition - Introduction
 Offers functionalities for management & statistics of issue, users, schedule, and
data
①
②
no. description
①
displays all issue status in widget.
counts newly added issues.
counts issue on going.
counts closed issues.
②
displays each item in widget.
you can change the order of widget in
‘Configuration -> Widget Configuration’
menu.
you can set the number of widgets
displayed in the page in ‘Configuration ->
Policies -> Contest’ tab.

33. Page 33
5. Enterprise Edition - Introduction
 All configuration about users, passwords, GIS, GeoServer, callback, and security.
 policy.json in mago3JS is a json file exported from these policy information.

34. Page 34
5. Enterprise Edition - Introduction
 Management of ‘Add, Modify, and Remove’ on Data group
 data.json in mago3DJS is a json file exported from these management information
Configure on if data is to be serviced or not
Data Status

35. Page 35
5. Enterprise Edition - Introduction
 Management on issues users registered.
 Issue by issue, You can check process status, priority, due date, and the person in
charge

36. Page 36
5. Enterprise Edition - Introduction
 Newly added user is assigned in any user group, and each user group is granted
its own role.
 User authority comes along with the role of user group which the user belongs to.