VEB.js

VEB.js (Virtual Environment based on Babylon.js) is a reconfigurable model-driven virtual environment application based on Babylon.js, a complete JavaScript framework and graphics engine for building 3D applications with HTML5 and WebGL (Web Graphics Library). Babylon.js enables to load and draw 3D objects, manage these 3D objects, create and manage special effects, play and manage spatialized sounds, create gameplays and more. Babylon.js library is free to use, thus enabling also didactic use.

Babylon.js was exploited to develop VEB.js as a reconfigurable model-driven virtual environment application.

Contact person: Walter Terkaj (CNR-STIIMA)

Hardware, OS, browser compatibility

VEbjs works on any browser that supports WebGL and no specific configuration of the hardware is needed. The same can be stated for the Operating System (OS).

Though it has to be noted that depending on the complexity of the scene, problems (e.g. lag) might arise if using a low potential graphic processing unit (GPU); indeed, even a smartphone can be used to load basic scenes, but if the complexity of the scene increases a more powerful GPU will be needed in order to obtain optimal rendering.

How to run VEB.js remotely

It is possible to remotely access the VEB.js application if it is installed on a server. If the server is active at the address $ServerAddress, then the application can be accessed via browser at $ServerAddress/vebjs.html?inputscene=.

Alternatively, the contents of the folder $vebjs can be compressed in a .war file and the application launched as a Tomcat service. A demo of VEB.js is available at: http://mi-eva-d001.stiima.cnr.it/vebjs/?inputscene=

How to run VEB.js locally

The application can be provided as a folder named $vebjs, containing the source code to start working on your virtual environment. This folder may be provided as as a single .zip file to be unzipped.

Node.js and NPM are needed to run the application. If Node.js and NPM are not already installed, it is possible to download and run the latest (LTS) Node.js installer confirming the default settings . NPM (Node Package Manager) is a package manager for JavaScript leanguage and is included in this installation. For installing the dependencies, open the command prompt, go to directory $vebjs/js and execute command npm install

It is important to keep the original structure of the $vebjs folder to guarantee a correct execution of the application, including the access to already available scenes in subfolder $vebjs/Scenes.

To easily access local files (e.g. 3D models) it is necessary to launch a local host server, as explained in the following for Windows and MacOS.

Run on Windows: launch the application by double clicking vebjs_launch.bat in the $vebjs folder and a browser page will be opened automatically at the address http://localhost/vebjs.html?inputscene=.

Run on MacOS: first open the terminal and go to the folder $vebjs. Then run the command sh vebjs_launch.sh and a browser page will be opened automatically at the address http://localhost/vebjs.html?inputscene=

At startup the browser shows an empty scene that contains the main application functionalities.

empty scene

NOTE

A scene consists of a set of assets (e.g. selected from a catalog of resources) that are organized in a layout; in addition, lights and cameras (i.e. navigation point of view) are attached to a scene. Some pre-defined scenes may be available in the $vebjs/Scenes folder as .json files

After opening the empty scene page, there are two options to load an already existing scene:

  • import a scene .json file, clicking on the Import button and browsering your local file system.

  • modify the URL on the search bar writing after "=" the name of the scene to be opened, e.g. http://localhost/vebjs.html?inputscene=example_1 . The corresponding .json file must be available in the $vebjs/Scenes folder.

Example of a 3D scene

Offline/Online use

The default setting of the package allows to run the application offline by exploiting the libraries (modules) installed in $vebjs/node_modules. However, if an internet connection is available, the most recent version of the libraries can be accessed by manually modifying the file $vebjs/vebjs.html; in this case it is necessary to comment the whole "LOCAL" block and uncomment the "ONLINE STABLE" block in the <head>.

References