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

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