modelo3d

Copyrights Modelo 2014 - 2017. All Rights Reserved.

The rendering engine of modelo.io.

Check out Release Notes.

Prequisites

• Visual Studio Code
  • npm install -g eslint
  • npm install -g eslint-plugin-angular
  • Install three Visual Code plugins, ESLint, Code Spellchecker and Git History
• Chrome > 53.0
• Get frontend code as modelo3d is part of frontend

git clone https://github.com/modelo/MODELO_frontend frontend`
cd frontend
npm install
npm install -g gulp

In China, npm server can be slow sometimes. Use cnpm instead of npm; see https://cnpm.taobao.org.

• Put models (a scene.json and a few mesh.bins) into frontend/551d4326e437414c17000005
  • Download models
• Install modelo3d code for DAM

git clone https://github.com/modelo/MODELO_modelo3d frontend/app/model/modelo3d

• Install modelo3d code for BIM

git clone https://github.com/modelo/MODELO_modelo3d bim/modelo3d

Run

DAM

• In frontend folder, execute gulp or gulp --debug3d. With --debug3d, it launches the debug version of modelo3d which has many debug information.
• Open http://localhost:4000/local-model in Chrome. A model should appear.
• In OSX's terminal, one may see such error message when starting gulp, "Error: EMFILE, too many open files". Execute ulimit -n 4096 to lift this file number limitation.

BIM

• Generate modelo3dapi.js by running gulp inside modelo3d folder and it will watches any file changes in modelo3d and update modeloapi.
• In bim's frontend folder, execute npm run web.
• Open http://localhost:8080/

Release (for API only)

• Update the change log and update version number in 10api/Version.ts.
  • Version is composed of <major.minor.hotfix>.
  • The major versions are not compatible with each other. Only for very big updates.
  • The minor versions will have different functionalities, like adding some new functions. They should be compatible.
  • The hotfix only for bug fixes. The API user will always use the latest minor version.
• npm run build to publish the API for production version
• npm run buildDev to publish the API for development version

Architecture

modelo3d is large-scale software system, so we follow a couple of large-scaled software arch design rules.

• The top most layer is m3d_canvas.js which is the interface of model3d. The frontend should not bypass m3d_canvas.js to access methods or data inside modelo3d.
• The larger the number is, the higher the layer is.
• Lower layer can't access data and methods in the upper layer. Meanwhile, lower layer should absorb as much as details about implementation of its functionality, e.g., don't expose WebGL API in 03scene.
• Keep the interface of class as narrow as possible
• The private member of each class, i.e., starting with '_' should be not accessed in the upper layer, but can be accessed in other classes in the same layer.
• If one class becomes too big, consider splitting it into smaller ones.
• Don't overdesign; the design evolves when the business logics change; keep it agile.

Development Discipline

• Work on work branch always.
• Make sure every commit pass eslint before check in.
• Use squash merge and submit a clean and clear commit message.

Debug Tools

• Common tools used in development.
• Chrome developer tools (Chrome Tools|More Tools|Developer Tools)
• Chrome task manager (see memory foortprint)
• Chrome about::tracing
• Download Model from beta(app) and debug locally:
  • Create a folder called local-models.
  • Open the model which has some problems and use the share function to get the share-token, such as: BU88w-5SrZ
  • Go to the cmd in frontend's path, then type node tools/model-downloader.js --token BU88w-5SrZ --beta
  • Create a name of this project(or model), such as 'test'
  • After it's downloaded, then debug locally and point to the name of the model, gulp --model test or gulp --debug3d --model test. The advantage of this way is this tool will download all the setting's online such as comemnts, attachments and camera pre-setting

Testing

• We have a rendering test check list. In the last week of every release, we go through the the checklist and see if test item is OK.
• We also maintain a testing model repository at https://pan.baidu.com/s/1nvyHxih
• Download a user model
  • For models on beta, go to http://portal.modelo.io/webs/downloadModelSrc.html, and fill in the model URL, e.g., https://beta.modelo.io/project/58403600e143c63c77c24cbf/model/5840361be143c63c77c24cc4/. It accepts the shared link too. The Email is [email protected] and Password is 'Mpassword45'.
  • Or http://develop-portal.modelo.io/webs/downloadModelSrc.html for develop site.
• Convert the source model file to .mx format which can be loaded by modelo3d
  • git clone https://github.com/modelo/MODELO_converter-server cvtserver
  • Enter cvtserver, npm install. Please make sure node.js > 6.9.1 is installed on your machine
  • npm run startLocal
  • Open http://localhost:8081 in Chrome, and fill in the source model path. If there are multiple files, need to first pack them into a zip file and then paste the file path of the file into the webpage.
  • Click the convert. The output file will be in the cvtserver/workspace/. Find the latest modified folder under that path.
• If you want to debug with develop site model data, e.g., models, comments and so on, simply open http://localhost:4000 in Chrome and find the model page. Note that in this way, we are executing the local source code but using remote backend server and data.

Unit Test

• gulp in DOS window
• Open http://localhost:8888 in Chrome.
• Unit test source code are in tests folder.