> For the complete documentation index, see [llms.txt](https://virtualfactory.gitbook.io/vlft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://virtualfactory.gitbook.io/vlft/tools/vebjs/functionalities.md).

# Functionalities

The functionalities of VEB.js are provided by:

* [Navigation commands](#id-1.-navigation-in-the-scene)
* [Toolbar commands](#id-2.-toolbar)
* [Scene Explorer and Inspector](#id-3.-scene-explorer-and-inspector)
* [Animation panel](#id-4.-animation-panel)
* [Data Generation panel](#id-5.-data-generation-panel)
* [Asset Info panel](#id-6.-asset-info-panel)
* [WebXR](#id-7.-webxr)

### 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](#2.-toolbar-functionalities-and-mode-of-use)).

#### 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

<figure><img src="/files/gqqI2ljLUelnEo1HI8XC" alt=""><figcaption></figcaption></figure>

Various buttons appear as soon as the application is launched (also in case of an empty scene).&#x20;

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](/vlft/tools/vebjs/input-output.md#scene) as a .json file                                                                  | Click                                                                                      |
| **Import Scene**      | Import a [scene](/vlft/tools/vebjs/input-output.md#scene) from a .json file                                                                | Click and browse a .json file                                                              |
| **Import Anim**       | Import an [animation](/vlft/tools/vebjs/input-output.md#animation) from a .json file                                                       | Click and browse a .json file                                                              |
| **Import Anim Seq**   | Import an [animation](/vlft/tools/vebjs/input-output.md#animation) sequence from from a .txt file                                          | Click and browse a .txt file                                                               |
| **Export Env**        | Save the current [environment settings](/vlft/tools/vebjs/input-output.md#environment) (camera, lights, etc.) as a .json file              | Click                                                                                      |
| **Import Env**        | Import [environment settings](/vlft/tools/vebjs/input-output.md#environment) (camera, lights, etc.) from a .json file                      | Click and browse a .json file                                                              |
| **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                                                               |
| **Asset Info Panel**  | Show/hide a panel with commands to extract info about asset placements                                                                     | Click to activate/deactivate                                                               |
| **Controller**        | Activate the controller that manages assets with an associated statechart                                                                  | Click to activate/deactivate                                                               |
| **SC visual**         | Open the statechart visualization (based on Stately) in a separate tab                                                                     | Click to open the tab                                                                      |
| **SC embed**          | Show/hide the embedded visualization of a simplified statechart in the left bottom corner                                                  | 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. |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

![Scene explorer](/files/-MDoZD4YzNCRq8XWb6fT)

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.

![Inspector](/files/-MDoZD4ZKijVPymK5eOc)

#### 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

![Animation Panel](/files/IRm89EzjSCspW6KD4F9X)

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 |
| ![](/files/-MlBQ-DVC3whXN1NGOUa) | Play command                                                                                                              | Click                                                |
| ![](/files/-MlBQ06_9HLm87osLoqu) | Stop command                                                                                                              | Click                                                |
| ![](/files/-MlBQ1ipbq3cy2N2OkpV) | Pause command                                                                                                             | Click                                                |
| ![](/files/4iW1AOpRnyWM2bsDhkLm) | 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

<figure><img src="/files/VaQQCGz8dXnZu5xGLUdr" alt=""><figcaption></figcaption></figure>

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.&#x20;

The following table describes the commands in the data generation panel and the associated functionality.

<table data-header-hidden><thead><tr><th>Command name</th><th>Function</th><th width="248.33333333333331">Use mode</th></tr></thead><tbody><tr><td><strong>Command name</strong></td><td><strong>Function</strong></td><td><strong>Use mode</strong></td></tr><tr><td><strong>Resize Image</strong></td><td>Set the size of the captured image</td><td>Move the slider to increase/decrease the size</td></tr><tr><td>Export <strong>JSON</strong></td><td>Save the generated images as a .json file</td><td>Click</td></tr><tr><td>Export <strong>PNG/ZIP</strong></td><td>Save the generated images as a .png file (collected in a .zip file if there is more than one image)</td><td>Click</td></tr><tr><td>Buffer <strong>Clear</strong> </td><td>Deleted all the images in the buffer</td><td>Click</td></tr><tr><td>Selection <strong>Add</strong></td><td>The currently selected asset is added to the list of assets that are tagged</td><td>Click</td></tr><tr><td>Selection <strong>Clear</strong></td><td>Clear the list of selected assets</td><td>Click</td></tr><tr><td><strong>Timed Capture</strong></td><td>Set the time between two screen captures</td><td>Move the slider to increase/decrease the interval between screen captures</td></tr><tr><td><img src="/files/D1QRzcROZ8OqK6jhgxhR" alt=""></td><td>Take a single screenshot</td><td>Click</td></tr><tr><td><img src="/files/ZzNIQydOVU3wq56xrcYY" alt=""></td><td>Start the timed capture of the screen</td><td>Click</td></tr><tr><td><img src="/files/Cc5MhBrPBWrJxf0fKUxW" alt=""></td><td>Pause the timed capture of the screen</td><td>Click</td></tr><tr><td><img src="/files/cGWGkBA6lKBDAjgLKf7m" alt=""></td><td>Start the automatic capture of the screen focusing on first selected asset</td><td>Click</td></tr><tr><td><img src="/files/caa7wNPED7FLrM37bBay" alt=""></td><td>Stop the automatic capture of the screen</td><td>Click</td></tr><tr><td>Square image</td><td>Check to force the screen capture to be a square image</td><td>Check/uncheck</td></tr><tr><td>Discard occlusions</td><td>Check to discard occlusions from the calculation of the bounding box and segmentation (only partially implemented)</td><td>Check/uncheck</td></tr><tr><td>Show segmentation</td><td>Check to show the asset segmentation</td><td>Check/uncheck</td></tr></tbody></table>

### 6. Asset Info Panel

<figure><img src="/files/QQN1xbJ0VVobwjKijWng" alt=""><figcaption><p>Asset Info panel</p></figcaption></figure>

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](#2.-toolbar)) and check which is the selected asset in the [Scene Explorer](#3.-scene-explorer-and-inspector).

The relative positions can be exported to a JSON file that is structured according to the following schema:

* "**context**": definition of [context setup](/vlft/kb/instantiation/assets/json.md#context), 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&#x20;
  * "**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        |
| **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        |
| Relative Assets (n)     | Shows the number (n) of assets that have been selected to calculate the relative placement                                |              |

### 7. WebXR

VEB.js can be use in immersive mode by clicking on the button WebXR (bottom right corner) and then on the immersive mode icon.

The following commands are available when using two controllers:

* Visualization/Hiding of the WebXR control panel: press button Y on the left controller. The control panel enables the activation/deactivation of teleporting, collision, display panel iTablet.
* Teleporting: push toggle forward to execute teleporting in the direction of the pointer.
* Grabbing assets: point an asset with the righ controller and select the asset. Then push and hold the grip button on the right controller to grab the asset. Grabbing is ended when the grip button is released.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://virtualfactory.gitbook.io/vlft/tools/vebjs/functionalities.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.