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.
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Â
mago3D Technical Workshop Material
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
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.
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.
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
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.