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
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).
NOTE
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
