ReViz 3D

What if within just few minutes after building a cool Hardware prototype, maybe even a DIY Arduino project, you could visualize the data in 3D interactive environment? Furthermore, what if you could save and share this visualization in multiple platforms? Maybe even your portfolio webpage. Or even visualizing a GIS dataset in a more cool way? Welcome to ReViz3D, a tool to quick prototype visualizations of hardware devices, sensors, local and remote data. With focus on spatial contextualized information and able to export projects as React Components, those can be incorporated into Progressive Web Apps, Cross Platform Apps (using electron) or simply static web pages.

This software is meant to be used to reduce the gap between deploying sensors and visualizing, sharing and having insights about the collected data.

It works by rendering realtime changes in JavaScript code, .JSON local data files, SerialPort Streams, MQTT messages and some asseets e.g. .obj 3D models. ReViz keeps watching all the files linked to a project, re-loading assets only when changes are made.

Reviz also provides intuitive and simple SerialPort and MQTT connections interfaces, requiring almost zero configuration to the user to be able to read data from those streams.

The 3D environment is provided by three.js. So the developers can use almost any three.js example and use ReViz to export is as a ReactComponent. More details about how to use three.js methods and classes in the next topics.

ReViz3D was built by a team at MIT Media Lab, It's Free to use, open-source and if you want to contribute to develop fork it @: Github;

Installation

The current version only requires to be downloaded and executed.

Download

You can download the latest version at:

Build from source

In can also build it from the source, if you want the latest (maybe unstable) version:

# Clone the Quick Start repository
$ git clone https://github.com/lucascassiano/reViz3d

# Go into the repository
$ cd/app

# Install the dependencies and Build for a specific OS
$ npm install

# Windows
$ npm run build-win

# OSX
$ npm run build-mac

# Linux
$ npm run build-linux

The built apps will be in ./dist directory

How it works

Project Structure

/project_directory/
    project.json
    main.js
    /shaders/
        **.vert
        **.frag
    /datasets/
        **.json
    /models/
        **.obj  
    /images/
        **.png
        **.svg

• Project.json

The project settings are defined by a .json file used as an entry-point, i.e., everytime you want to open a project, just select this file. All the templates and projects created by reViz3d use the standard name project.json in the root of the project directory. It follows this structure:

{
    "name": "project name",
    "author": "lucascassiano",
    "creation_date": "MM/DD/YYYY",
    "last_update": "MM/DD/YYYY",
    "indexed_files": {
        "main": "main.js",
        "shadersDirectory": "shaders",
        "modelsDirectory": "models",
        "dataDirectory": "datasets"
    },
    "user_preferences": { "auto_reload": true, "background": "#FFFFFF" }
}

Main Code

The main code is defined by main.js, written in JavaScript - ES6/ECMAScript2015. it has a basic

This is the basic structure:

//called once
Setup = (scene, renderer, camera) =>{

}

//called @30FPS
Updated = (scene, renderer, camera) =>{

}

The life cycle is very similar to the Arduino platform: Setup() will be called one, in the very first rendered frame. Update() will be called 30 times per second (30FPS), in an infinite loop.

Local Assets

Local assets are automatically loaded into your code. So you just use the respective variables: SHADERS (for GLSL shaders), DATASETS, MODELS and IMAGES.

• Currently only .png, .svg are supported images and both of them are loaded as THREE.Texture.
• OBJ are imported to the reviz as THREE.Object3D.

    SHADERS.vertex.{...}
    SHADERS.fragment.{...}

    DATASETS.{...}

    MODELS.obj.{...}

    IMAGES.png.{...}
    IMAGES.svg.{...}

SerialPort

The system will try to convert the incoming stream into a JS object (basically a JSON). If the parsing returns an error, then the SERIAL will contain the received package as a String. The communication is designed to update the SERIAL variable whenever there is a new break-line indicator '\r\n'. If you are working using Arduino, this break-line is the result of a Serial.println() command; In other words, the variable SERIAL will always receive the latest values available in the Serialport, and if possible it will parse the Serial data to a JSON format.

MQTT

The MQTT variable works similarly to SERIAL, always receiving the latest value available the set mqtt topic. To Setup the MQTT connection go to View > Inspector Menu > MQTT and select the mqtt server and topic. In order to help with debug, we also added the option to write in a specific topic in the same mqtt server. Need a help to understand how mqtt works? take a look at Hivemq.com;

Basic Example

Saving Projects

Basic Shapes

Load 3D Models

Read from local data

Read from SerialPort

Read from MQTT

Record SerialPort and MQTT

Still under development

Internal Modules

Geometries

Text

Canvas2Plane

Ruler

Maps

{
    "name": "experiment"
}