Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

mago3D Technical Workshop Material

771 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

mago3D Technical Workshop Material

  1. 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. 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. 3. Page 3 Client internet Web Server WAS F4DStorage mago3D.JS mago Content Management DataBase 2. Architecture - mago3D F4D Converter
  4. 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. 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. 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. 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. 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. 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. 10. Page 10  https://nodejs.org/ko/download/  Window Installer(.msi) 64-bit Download  Install 4. Community Edition – Let’s do it.
  11. 11. Page 11  Install path : C:nodejs c:nodejs 4. Community Edition – Let’s do it.
  12. 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. 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. 14. Page 14  Install Path : C:F4DConverter 4. Community Edition – Let’s do it.
  15. 15. Page 15 4. Community Edition – Let’s do it.
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Page 30 5. Enterprise Edition - Introduction  CMS is composed of 3 projects parent project admin common user
  31. 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. 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. 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. 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. 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. 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.

×