Functionalities

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: functionalities and mode of use

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

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

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 dynamical properties of the scene
  • SYSTEM INFO displaying 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 to 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
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 panle 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

5. Data Generation Panel

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
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
Clear Buffer
Deleted all the images in the buffer
Click
Add Selection
The currently selected asset is added to the list of assets that are tagged
Click
Clear Selections
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 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 modified 14d ago