mago3D workshop(English) in Thailand , 2018.07

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

1. What is mago3D?
1BIM/AEC
2Seamless
3Browser
OPEN
SOURCE
Seamless
integration of indoor and outdoor
spaces (seamless integration of
indoor & outdoor space)
Browser
Runs on a web browser and
does not require a separate
plug-in or ActiveX installation
BIM/AEC
Integration of 3D GIS
with BIM / AEC

2. Products
F4D
Converter
mago3DJS
 Convert 3D model formats (IFC, 3DS, OBJ, DAE, JT) to 3D Internet Service Format F4D
 Reduce data size and perform pre-processing to speed up rendering. heart of mago3D
 JavaScript-based plug-ins that extend the 3D GIS engine to process AEC data
3D Data Converter Browser 3D Rendering Data DB Manager
 Provides various management functions based on J2EE such as BIM / AEC data registration,
API provision, Dashboard
Content
Management
System

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

4. License
Apache License 2.0
Community Commercial
mago3D CMS
F4D Converter
mago3D JS
mago3D CMS
F4D Converter
mago3D JS
Technical
Support
Tuning
OPEN
Customizing
PRIVATE

5. Use Cases
CASE
Local PC mago3D Minimum
(F4D Converter, mago3D JS)
Server mago3D Minimum
+ Other System(Business)
mago3D Full Package
(F4D Converter, mago3D JS, CMS)
02
01
03
mago3D Full Package + Customizing
+ Technical Support + Tuning04

6. WorkShop
 Install and run mago3D Minimum (F4D Converter, mago3D JS) and learn mago3D use
cases (USE CASE1, CASE2) in the 3D Rendering part.
 mago3D Full Package provides a brief overview of key features such as data management,
issue management, users, and Dashboard.
 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

6. Community Edition(Minimum) – Getting Start
mago3D JS
Cesium/WWW
Client
internet Business
System
Web Server
Customer
F4DStorage
F4D Converter
REST API
Json
(policy, data, etc)
Case1 Case2

 After installing mago3D Minimum (F4D Converter, mago3D JS) environment on
local PC, convert sample IFC file using F4DConverter, check converted 3D data
through web browser, and follow simple API.
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
 Running npm install can cause errors due to network problems or repository problems.
Please delete node_modules and execute again.

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

 Install Path : C:F4DConverterConsole

 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(C: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.
#meshType : Enter 0 (1, 2 values are under development).

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

 build – Build output saved, created after running gulp default
 externlib – library directory such as jquery, chart
 f4d – f4d file is stored symbolic link
 images – image path
 node_modules – dependency directory, created after npm install
 sample – example html, json config directory
 src – mago3D JS source
 test – test source
• server.js – node web server file
• gulpfile.js – gulp config file
• package.json – node dependency manage file

 mago3D has two basic settings managed by Database (Postgresql).
The data settings responsible for the policy settings responsible for rendering and
the location of the data. In the case of mago3D Minimum, mago3D JS can also be
used in environments without databases
Two configuration files (policy.json, data.json) are provided for testing purposes.
 For USE CASE1 (Local PC) of mago3D Minimum, use JSON file,
For USE CASE2 (Server), it is possible to use JSON format
The result value is provided.
 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

1) HTML File Create
2) CSS Add
3) JavaScript Add
4) Map display DIV Element Create
5) Writing initialization JavaScript

 Generate html file
Use the editor to create the file /mago3djs/tutorials/hello.html.
 Layout for WorkShop example, add CSS for displaying 3D Globe Engine
<link rel=＂stylesheet＂ href=＂../demo.css＂ />
<link rel=＂stylesheet＂ href=＂../../src/engine/cesium/Widgets/widgets.css＂ />
 Jquery for HTML, 3D Globe Engine, JavaScript for F4D Rendering
<script type=“text/javascript” src=“../../externlib/jquery/jquery.js”></script>
<script type=＂text/javascript＂ src=＂../../src/engine/cesium/Cesium.js＂></script>
<script type=＂text/javascript＂ src=＂../../build/mago3d/mago3d.js＂></script>
 CANVAS generation for view area DIV, label display
<div id="magoContainer" class="mapWrap"></div>
<canvas id="objectLabel"></canvas>

 Create mago3D JS instance(/mago3djs/sample/tutorial/start.html Reference)
The div id to display the
cesium map
Load configuration file

 The json configuration file uses workshop.json, workshop-policy-cesium.json
in /mago3djs/sample/tutorial.
 The completed Sample source is /mago3djs/sample/tutorial/start.html
 When you have finished creating the html file, check it against start.html.

 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/hello.html
mago3djs installDirectory

 http://localhost/sample/tutorial/hello.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

6. Community Edition(Minimum) – End
Coffee Break

7. Community Edition(Full Package) - 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. Community Edition(Full Package) - Introduction
 A brief introduction to installation
 Introduces various manager functions such as data registration, management, and
Dashboard via CMS
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

7. Community Edition(Full Package)
END!!!

8. Demo
 http://www.mago3d.com/homepage/demo.do

9. mago3D NOW & TO-BE
 Developing mago3D Cloud
Beta version to be released from August to September
 F4D Converter Linux version, development of Docker Release
Beta version to be released from August to September
 Improving Tiling and Terrain, CityGML in development
Will be applied from August to September
 Improving your Point Cloud data
December 2018 or 2019
 Will be developing Revit
 Analytics to be developed

mago3D workshop(English) in Thailand , 2018.07

Recommended

Recommended

More Related Content

Similar to mago3D workshop(English) in Thailand , 2018.07

Similar to mago3D workshop(English) in Thailand , 2018.07 (20)

Recently uploaded

Recently uploaded (13)

mago3D workshop(English) in Thailand , 2018.07

Editor's Notes