mago3D Technical Workshop Material(New Version)

Sanghee Shin(shshin@gaia3d.com)
Hakjoon Kim(hjkim@gaia3d.com)
JeongDae Cheon(jdcheon@gaia3d.com)
WorkShop
Let’s Integrate BIM/AEC and 3D GIS
on Your Web Browser!

1. Architecture
mago3D.JS
Cesium/WWW
Client
internet
Web Server WAS
F4DStorage
mago
Content
Management
DataBase
F4D Converter
mago3D Core

 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

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

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

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

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

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)

 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

 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

 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

 Right-click on the Eclipse screen
 Import -> General -> Projects from Folder Archive Select

 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.

 Install path : C:nodejs
c:nodejs

 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

 http://www.mago3d.com/homepage/download.do
 Installer : F4D Converter 64bit (this installation requires Windows 7 or later)
 Install

 Install Path : C:F4DConverter

 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.

 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.

 Run following
Do Not Close

※ 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

 Can see Processes running in Task Manager
 Ends when execution finishes

 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.

 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.

 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)
F4D Data path
Init Project File Name

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

 Relationship between project and data in workshop.json
Primary Key(Project Table)
FOREIGN KEY(Data Table)
1
:
N

 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

 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
attribute areas
child node areas
geo info areas
project name(PK)

 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
(Required) same
name Mapping

 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/

 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

 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>

 Create mago3D JS instance
The div id to display the
cesium map
Load configuration file

 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

 http://localhost/sample/tutorial/start.html

 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>

 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

 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 – End
Coffee Break

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

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

 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

 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

 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

 CMS is composed of 3 projects
parent project
admin
common
user

 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

 Provides various management functions such as project, data, user, RBAC, and log.

 User policy, password policy, spatial information, GeoServer, security policy, etc.
 policy.json of mago3JS is a change of operation policy information into json file

 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

 Manage user registered issues.
 You can check progress status, priority, deadline, and contact person for each
issue

 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

mago3D Technical Workshop Material(New Version)

More Related Content

What's hot (20)

Similar to mago3D Technical Workshop Material(New Version) (20)

More from SANGHEE SHIN (20)

Recently uploaded (20)

mago3D Technical Workshop Material(New Version)