Functionalities
The functionalities of VEB.js are provided by:
1. Navigation in the scene
It it possible to navigate the 3D scene using a dedicated camera. The commands depend on the type of camera (e.g. fly camera, free camera, VR camera).
Moreover, it is possible to select an asset by clicking on it. The selection mode depends on the active settings (see Toolbar).
1.1 Fly Camera
If a FlyCamera is active, it is possible to use the keyboard to navigate the scenes with the following keys.
Key | Function |
A | moves the point of view to the left |
D | moves the point of view to the right |
W | moves the point of view forward (zoom) |
S | moves the point of view backward (de-zoom) |
E | moves the point of view upward |
Q | moves the point of view downward |
1.2 Free/Universal Camera
If a Free Camera or Universal Camera is active, it is possible to use the keyboard to navigate the scenes with arrow keys (move left, right, forward, backward), page-up/down (move upward/downward).
2. Toolbar
Various buttons appear as soon as the application is launched (also in case of an empty scene).
The following table describes the commands in the main toolbar and the associated functionality.
Command name | Function | Use mode |
Inspector | Show/hide the side bars with Scene Explorer and Inspector commands (BabylonJS default function) | Click to activate/deactivate |
Change Cam | Select a saved point of view (i.e. camera) | Change the view with one click |
Camera speed | Increase/decrease navigation speed | Move the slider to increase/decrease navigation speed |
Fullscreen | Show the scene in full screen mode | Click to to activate, esc key to deactivate |
Move | Move the selected asset | Once clicked, select the asset and move it using the translation widget that will be shown |
Rotate | Rotate the selected asset | Once clicked, select the asset and rotate it using the rotation widget |
Highlight | Highlight the selected asset with red overlay and bounding box | Click to activate/deactivate |
Select Top Parent | Select the root asset of an assembled asset | Click to activate/deactivate |
Save Scene | Save the scene to the remote ontology repository | Click |
Export Scene | Save the scene as a .json file | Click |
Import Scene | Import a scene from a .json file | Click and browse a .json file |
Import Anim | Import an animation from a .json file | Click and browse a .json file |
Import Anim Seq | Import an animation sequence from from a .txt file | Click and browse a .txt file |
Export Env | Save the current environment settings (camera, lights, etc.) as a .json file | Click |
Import Env | Import environment settings (camera, lights, etc.) from a .json file | Click and browse a .json file |
Asset Catalog | Show/hide a catalogue panel containing the assets that can be added to the scene | Click to activate/deactivate |
Animation Panel | Show/hide a panel with animation commands | Click to activate/deactivate |
Data Gen Panel | Show/hide a panel with data generation commands | Click to activate/deactivate |
Physics | Activate the physics engine | Click to activate/deactivate |
Shadows | Activate the generation of shadows for each asset in the 3D scene. Att'n: shadow generation is highly demanding for browser and video card | Click to activate/deactivate |
About | Show/hide a text block with information about developer(s) and license | Click to activate/deactivate |
WebXR | Activate immersive WebXR | Click to activate/deactivate |
3. Scene Explorer and Inspector
The Inspector button show/hide two sidebars on the working environment page: Scene Explorer (left sidebar) and Inspector (right sidebar).
| On the top of both sidebars there is a command to detach the sidebar from the scene. This command might be useful in case of a large scene to visualize it on the whole screen. |
In the Scene Explorer sidebar it is possible to click on the "+" on the side of Nodes to show all the items composing the scene in terms of: assets (and their components), cameras and lights.
It is also possible to select an asset group or a single asset belonging to an assembly.
Materials and Textures can be explored to retrieve further information about the assets and their 3D representation. Finally, GUI shows the list of items added to the user interface, e.g. buttons, that can be shown/hidden.
The Inspector sidebar consists of the main tabs described in the following subsections.
3.1 Properties
Properties are activated after selecting an asset, camera, light, or material. Some properties can be manually changed.
In the case of an asset, properties include position, scale and rotation.
In the case of a camera, properties include position, speed, mode, etc.
In the case of a light, properties include the intensity of the light, the set-up, and different settings on the shadows generated by the light.
3.2 Debugging
The second tab of the Inspector enables to enter the area relative to debugging operations.
3.3 Statistics
The third tab is related to the statistics (quantitative properties) of the scene:
FPS (frame per second) at which the scene is running.
COUNT describing the graphical properties of the scene.
FRAME STEPS DURATION showing the dynamic properties of the scene
SYSTEM INFO displays information related to the hardware and software system, in terms of graphical and operating system properties.
3.4 Tools
The fourth tab opens a window showing a set of tools:
"Screenshot" to capture the whole current scene in an image that is saved automatically to the Download folder in a .png file.
"Record video" to start recording the current scene (animation) and then stop recording. The video is saved in the Download folder in a .webm file.
"Capture" is equivalent to the Screenshot functionality, though it allows taking a screenshot of the scene without any button or other GUI feature. It also allows to set the Precision of the capture or to set its width and height.
"Generate replay code" to download the code of the scene in a .txt format.
"Export to GLB" to save the 3D model of the scene in a .glb file.
"Export to Babylon" to save the scene in a .babylon file.
4. Animation Panel
The animation panel reports the current animation time (Time in seconds). The animation Speed can be adjusted with a dedicated slider. The following table describes the commands in the animation panel and the associated functionality.
Command name | Function | Use mode |
Log | Show/hide the a scroll bar show the state log of the animation | Click to activate/deactivate |
Speed | Increase/decrease animation speed | Move the slider to increase/decrease animation speed |
Play command | Click | |
Stop command | Click | |
Pause command | Click | |
Synchronization command | Click | |
Sync Message | Show/hide a text box to insert a synchronization message | Click to activate/deactivate |
MQTT Sub | Subscribe to MQTT topic(s). The topic name is defined based on the input config and scene id. | Click |
MQTT Unsub | Unsubscribe from all MQTT topics. | Click |
MQTT Pub | Publish the update state of the scene to MQTT topic(s). The topic name is defined based on the input config and scene id. | Click |
5. Data Generation Panel
The data generation panel controls the generation of images (screenshots) with tagged data. The number of images that are currently stored in the buffer (Buffer size) is reported.
The following table describes the commands in the data generation panel and the associated functionality.
Command name | Function | Use mode |
Resize Image | Set the size of the captured image | Move the slider to increase/decrease the size |
Export JSON | Save the generated images as a .json file | Click |
Export PNG/ZIP | Save the generated images as a .png file (collected in a .zip file if there is more than one image) | Click |
Buffer Clear | Deleted all the images in the buffer | Click |
Selection Add | The currently selected asset is added to the list of assets that are tagged | Click |
Selection Clear | Clear the list of selected assets | Click |
Timed Capture | Set the time between two screen captures | Move the slider to increase/decrease the interval between screen captures |
Take a single screenshot | Click | |
Start the timed capture of the screen | Click | |
Pause the timed capture of the screen | Click | |
Start the automatic capture of the screen focusing on first selected asset | Click | |
Stop the automatic capture of the screen | Click |
6. Asset Info Panel
The asset info panel supports the calculation of relative placements of generic assets with respect to a reference asset. It is recommended to deselect the command "Select Top Parent" (see Toolbar) and check which is the selected asset in the Scene Explorer.
The relative positions can be exported to a JSON file that is structured according to the following schema:
"context": definition of context setup, i.e. unit of measurement and axis convention
"ReferenceAsset": definition of the reference asset that is used to generate the relative placements. This asset is characterized in terms of:
"id": unique identifier of the asset
"absPlace": absolute placement in the scene consisting of "position" and "rotation" defined as Euler angles YXZ in radians
"RelativeAssets": list of assets whose placement is defined as relative to the reference asset. Each asset is characterized in terms of
"id": unique identifier of the asset
"relPlace": relative placement in the scene consisting of "position" and "rotation" defined as Euler angles YXZ in radians
"boundingBox": bounding box including all children meshes of the asset. The bounding box is defined by coordinates that are relative to the reference asset, specifically:
"min": position of the bounding box minimum corner [x, y, z]
"max": position of the bounding box maximum corner [x, y, z]
"center": position of the bounding box center [x, y, z]
Command name | Function | Use mode |
Export JSON | Save the relative positions in a .json file | Click |
Set Reference Asset | The currently selected asset is defined as reference asset | Click |
Relative Assets (n) | Shows the number (n) of assets that have been selected to calculate the relative placement | |
Add | The currently selected asset is addet to the list of assets whose placement is defined as relative to the reference asset | Click |
Clear | Clear the list of assets whose placement is defined as relative to the reference asset | Click |
7. Asset Catalog
The catalog GUI shows the assets that can be added to the scene.
An asset can be added to the scene by clicking on the corresponding icon. After the 3D representation of the asset is generated, it is possible to move/rotate the asset in the scene.
Last updated
