This is the technical workshop material for mago3D, a web based open source GeoBIM platform. This material provides step-by-step hands-on guide including component installing, data converting, and data publishing. 4 hours are expected to complete this course.
3. Page 3
Convert ifc files(BIM standard interchange format) or .3ds / .obj / .dae files to F4D
(traditional three-dimensional format) mago3D service-only format.
Perform pre-processing to lighten weight and improve rendering performance in
conversion process
2. Core Component - F4D Converter
F4D Converter
F4D
.3ds
.obj
.dae
.ifc
4. Page 4
2. Core Component - mago3D JS
A Javascript-based plug-in that extends the 3D GIS engine to handle AEC data
4
mago3D.js
3D GIS Engines
Cesium.js
WorldWindWeb.js
API
API
service html
5. Page 5
2. Core Component - Content Management System
Java Spring-based collaboration system for users, role management, data management,
issue management, etc.
User
User
User
User
User Site
(issue
Register)
Admin Site
(User, Role,
Data,Issue,
Reporter, etc)
Separation of Network Network
Cache Refresh HTTPS
admin
6. Page 6
3. 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, F4D Converter + Content Management System(Full Package)
A platform for handling large-sized 3D contents, which offers functionality about data
managements.
F4D Converter + Property Extractor(IFC) + Content Management System + Technical Support
3D Data Converter Browser 3D Rendering Data DB Manager
7. Page 7
4. WorkShop
Install and run mago3D Community Edition (F4D Converter + mago3DJS) and learn how
to use mago3D as a 3D rendering solution in interworking with your existing business
system or in a new project.
It provides a brief overview of the key features of the mago3D Enterprise Edition (F4D
Converter + Property Extractor (IFC) + Content Management System): data management,
issue management, and role management.
OS : Window7 or later (64bit)
JRE: 1.8 or higher
Disk space: At least 2G
RAM : 8G or more (16G recommended)
3D Sample File(IFC, 3DS, Collada, Obj, JT Etc)
Internet connection
8. Page 8
5. Community Edition – Getting Start
mago3D JS
Cesium/WWW
Client
internet
Business
System
Web Server Customer
F4DStorage
F4D Converter
REST API
Json
(policy, data,
etc)
9. Page 9
5. Community Edition – Getting Start
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) Editor or IDE Install
2) mago3D JS Source Download
3) Web Server Install
4) F4D Converter Install(.msi)
5) Data Conversion
6) Configuration Modification
7) mago3D JS build
8) Getting Start
9) API Example
10. Page 10
If you already have an editor in use, you can skip this step.
For mago3D development team, use Eclipse
http://www.eclipse.org/downloads/eclipse-packages/
Eclipse IDE for Java EE Developers
Java installation required (java8 version recommended)
If you do not have an editor, you can download the free open source editor
Notepad ++ from the following site:
https://notepad-plus-plus.org/download/v7.5.1.html
5. Community Edition – Getting Start
11. Page 11
Connect to https://github.com/Gaia3D/mago3djs, click on the Clone or download
button
Select ‘Download ZIP’ and save zip file in ‘C:’
In case of using git : git clone https://github.com/Gaia3D/mago3djs.git
Branch: develop
Unzip and check the result
C:mago3djs
5. Community Edition – Getting Start
12. Page 12
5. Community Edition – Getting Start
Right-click on the Eclipse screen
Import -> General -> Projects from Folder Archive Select
13. Page 13
mago3D Community Edition requires a web server to run locally.
We use Node.js for the exercises.
Skip this process if you already have a web server in use.
Any web server capable of serving static content can be used
Connect to https://nodejs.org/en/download/ Window Installer (.msi) 64-bit
Download.
5. Community Edition – Getting Start
15. Page 15
Run command prompt (cmd.exe) with administrative privileges
Go to C: mago3djs directory
Run node install to download the required modules
C:mago3djs>npm install
C:mago3djs>npm install -g gulp
The node_modules directory is created in the root directory
5. Community Edition – Getting Start
19. Page 19
If you have 3D data, use it
If not Please download demo data from the following URL.
https://github.com/Gaia3D/mago3djs/files/2029661/demo_f4d.zip
There are two files when decompressed.
5. Community Edition – Getting Start
20. Page 20
Create outputFolder, where converted result will be saved
C:f4dworkshop(Create a directory for each project under the root folder f4d)
put sample ifc files into inputFolder(D:demo_f4d)
Run Command Line Prompt(cmd.exe) in Administrator mode
Change current directory to the directory where F4DConverter is installed
Create outputFolder, where converted result will be saved
* 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.
5. Community Edition – Getting Start
21. Page 21
Run following
5. Community Edition – Getting Start
Do Not Close
22. Page 22
※ 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
5. Community Edition – Getting Start
23. Page 23
Can see Processes running in Task Manager
Ends when execution finishes
5. Community Edition – Getting Start
24. Page 24
If the data conversion succeeded
Confirm creation of F4D_XXX folders and ObjectIndexFile.ihe file in
C:f4dworkshop folder
If it fails, check the log file (logTest.txt) from D:demo_f4d (inputFolder).
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:mago3djsf4d" "C:f4d"
Check if the symbol ‘C:mago3djsf4d’ is created by ‘dir’ command.
5. Community Edition – Getting Start
25. Page 25
In Enterprise Edition, operation policy & data management are on RDB(Postgresql
+ PostGis)
In case of mago3D Community Edition, it manages mago3D operation policy and
data through API interworking with other business system.
The mago3D Community Edition provides the same results as the API linkage in
Mock form Json to execute simply on the developer's local PC and check the
function.
Community Edition has two types of configuration files.
mago3D JS is a policy.json file that deals with Rendering related settings and
data.json which is responsible for Location information of Data
You need to modify the policy.json and data.json files.
5. Community Edition – Getting Start
26. Page 26
Modify policy.json(C:mago3djssampletutorialworkshop-policy-cesium.json)
Project to be loaded at initialization, Init Camera Latitude, Longitude, CallBack
Function, Geo Server setting, etc.
Use C:mago3djssampletutorialworkshop-policy-cesium.json for practice
Project setting key value to load when initializing page.
If you want to load multiple projects, add to
Where to go when starting a web page (latitude, longitude)
5. Community Edition – Getting Start
F4D Data path
Init Project File Name
27. Page 27
5. Community Edition – Getting Start
Modify data.json(C:mago3djssampletutorialworkshop.json)
It has information of F4D files created by running F4 Converter (instead of
Database)
Contains spatial information (Data Key, Name, Latitude, Longitude, Altitude,
Heading, Pitch, Roll), properties, and sub data of the data sets included in
Project.
mago3D Concept and relationship of Project, Data used in data.json
Project – Each data is defined as a logical group according to purpose.
(It is the same concept as a department in a general company.)
data - Each data that the web browser will display
(Employees belonging to department in general company)
28. Page 28
5. Community Edition – Getting Start
Relationship between project and data in workshop.json
Primary Key(Project Table)
FOREIGN KEY(Data Table)
1
:
N
29. Page 29
5. Community Edition – Getting Start
Relationship between project and data in workshop.json
If you look in the C:f4d directory
There is a directory called workshop
Within it are the F4D_SOCIALROOM, F4D_STUDENTROOM directories.
here
project = workshop
data1 = SOCIALROOM
data2 = STUDENTROOM
30. Page 30
C:mago3djssampletutorialworkshop.json File Contents
The first node of the json file describes information about the project, and
the second node describes the information about the data.
There are three main areas: Attributes that store attribute values, Children
that store child node information, Area for storing other location information
The data_key of the root node of json should match the project
name(directory name) under the c:f4d directory
project is a logical concept and isPhysical = false
data is physically present and isPhysical = true
5. Community Edition – Getting Start
attribute areas
child node areas
geo info areas
project name(PK)
31. Page 31
C:mago3djssampletutorialworkshop.json
data_key becomes Primary Key in Database
The characters after F4D_ in the directory name
are Unique identifiers
In the workshop.json file, modify the data_key
value of children to
SOCIALROOM, STUDENTROOM
Modify spatial information of data
(SOCIALROOM, STUDENTROOM)
latitude, longitude, height, heading, pitch, roll, etc
5. Community Edition – Getting Start
(Required) same
name Mapping
32. Page 32
Build automation tools for front-end web development include webpack, grunt,
gulp, bower, and yeoman
mago3D JS uses Gulp
https://gulpjs.com/
/gulpfile.js
clean, combine, uglify, doc, and lint.
Jsdoc for Document Creation
http://usejsdoc.org/
Use ESLint for coding conventions.
https://eslint.org/
Use Jasmine for testing. Scheduled to write test code
https://jasmine.github.io/
5. Community Edition – Getting Start
33. Page 33
Using eclipse
Run Gulp Task as shown on the
right screen
If you are not using eclipse
After running Command Prompt,
go to Mago3djs project directory
C:mago3djs>run gulp
build succeeds, build directory is created.
build completed using mago3d.js
5. Community Edition – Getting Start
34. Page 34
Let's create start.html to start the web service.
Open /mago3djs/tutorials/start.html using the editor.
First, to use cesium, include css, javascript
<link rel="stylesheet" href="../demo.css" />
<link rel="stylesheet" href="../../src/engine/cesium/Widgets/widgets.css" />
Second, include to include jquery
<script type="text/javascript" src="../../externlib/jquery/jquery.js"></script>
Third, include mago3djs
<script type="text/javascript" src="../../src/engine/cesium/Cesium.js"></script>
<script type="text/javascript" src="../../build/mago3d/mago3d.js"></script>
Generate DIV area to 3D render on html page
<div id="magoContainer" class="mapWrap"></div>
<canvas id="objectLabel"></canvas>
5. Community Edition – Getting Start
35. Page 35
Create mago3D JS instance
5. Community Edition – Getting Start
The div id to display the
cesium map
Load configuration file
36. Page 36
Run the web server (node server)
Using eclipse
Right click on /server.js> Run As> Node.js Run the application
When running as a Command Prompt
Check the URL page below in your Chrome browser
http://localhost/sample/tutorial/start.html
mago3djs installDirectory
5. Community Edition – Getting Start
38. Page 38
Let's apply the API to display the bounding box.
See the mago3D homepage API documentation
http://www.mago3d.com/homepage/api.do
Click changeBoundingBoxAPI on the left menu
http://www.mago3d.com/homepage/api.do#changeBoundingBoxAPI
Add html form tag to set BoundingBox on / off
<div style="text-align: center; padding-bottom: 10px;">
<form id="apiForm" name="apiForm" action="" onsubmit="return false;" >
<span style="padding-right: 20px;">BoundingBox</span>
<input type="radio" id="showBoundingBox" name="boundingBox" value="true“
onclick="changeBoundingBox(true);" />
<label for="showBoundingBox"> Display </label>
<input type="radio" id="hideBoundingBox" name="boundingBox" value="false“
onclick="changeBoundingBox(false);" />
<label for="hideBoundingBox"> Hide </label>
</form>
</div>
5. Community Edition – Getting Start
39. Page 39
Adding BoundingBox API Javascript
function changeBoundingBox(isShow) {
changeBoundingBoxAPI(managerFactory, isShow);
}
Check the URL page below in your Chrome browser
http://localhost/sample/tutorial/api-boundingbox.html
5. Community Edition – Getting Start
40. Page 40
workshop, 3ds This is an example of using various api with two projects.
3ds data is not attached and some functions may not work.
If you want to configure the UI using mag3DJS, please refer to it.
http://localhost/sample/tutorial/all-features-and-debug.html
5. Community Edition – Getting Start
42. Page 42
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
43. Page 43
7. Enterprise Edition - Introduction
A brief introduction to installation
Describe how to register data and manage issues using
F4D Converter + Property Extractor(IFC) + Content Management System
1) Install
2) Dashboard, policy configuration
3) Data management
4) Issue management
5) Role Based Access Control configuration
44. Page 44
7. 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
46. Page 46
7. Enterprise Edition - Introduction
do ‘Project Import’ after running eclipse
File -> import -> Gralde -> Existing Gradle Project
DB Table creation and initialization
Move to the folder ‘/mago3d-core/src/doc’ in downloaded source
Run dbinit.bat
For more information,
https://github.com/Gaia3D/mago3d
Reference
47. Page 47
7. Enterprise Edition - Introduction
CMS is composed of 3 projects
parent project
admin
common
user
48. Page 48
7. 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
49. Page 49
7. Enterprise Edition - Introduction
Provides various management functions such as project, data, user, RBAC, and log.
50. Page 50
7. Enterprise Edition - Introduction
User policy, password policy, spatial information, GeoServer, security policy, etc.
policy.json of mago3JS is a change of operation policy information into json file
51. Page 51
Manage data such as new registration, property management, status change,
modification, deletion by grouping.The data.json of mago3JS is a json file of data
by data group
7. Enterprise Edition - Introduction
52. Page 52
7. Enterprise Edition - Introduction
Manage user registered issues.
You can check progress status, priority, deadline, and contact person for each
issue
53. Page 53
7. Enterprise Edition - Introduction
Register users for each user group and assign a role to each group.
The user request authority judges whether the corresponding role exists in the
user group