Skip to main content

Debug app

Since the rendering of the 3d content is remotely drawn and managed by the 3dverse platform, debugging your application can be a bit different compared to traditional web applications.

This article will not cover debugging techniques of your own application code, but rather focus on how to debug issues related to the 3dverse platform, network interactions, and performance bottlenecks.

Use the 3dverse editor for debugging​

3dverse Editor with various extensions like the Scene Graph, Asset Browser, Components, and Material Editor.
3dverse Editor with various extensions like the Scene Graph, Asset Browser, Components, and Material Editor.

Livelink always connects to a rendering session on the 3dverse platform, which you can also open in the 3dverse editor.

From the editor, you can:

  • Use the Scene graph to browse the entities through their hierarchy
  • Inspect and modify Components on entities
  • Monitor the performance of your scene by looking at the metrics panel
  • Use the material editor to tweak materials in real-time
  • Read renderer logs and errors from the Logs extension
  • Open the GPU Memory profiler to inspect memory usage
  • See connected clients and see the scene from their perspective

Join active sessions​

While browsing the sessions from the 3dverse console, you can join any active session in the editor by clicking on it.

Joining the session from the editor allows you to inspect and modify entities and components in real-time, this is especially useful to debug your application, and make sure everything is working as expected.

Joining an active session from the 3dverse console.
Joining an active session from the 3dverse console.

Scene graph​

You can use the Scene Graph to inspect the hierarchy of entities in your scene. This allows you to see how entities are organized, their parent-child relationships, and their components. You can select any entity in the scene graph to view its componentsin the Components panel.

Selecting an entity from the editor in the scene graph to inspect its components.
Selecting an entity from the editor in the scene graph to inspect its components.

On the bottom of the Scene Graph, you can find the total number of entities in the scene, and the total triangle count. You should keep an eye of these numbers, as a high triangle count or entity count can lead to performance issues.

Scene graph showing the total number of entities and triangle count.
Scene graph showing the total number of entities and triangle count.

Hide entities​

When debugging complex scenes, if you want to focus on specific entities, you can hide other entities temporarily. To do this, hover over the entities you want to hide in the scene graph, then click on the eye icon Hide.

This can also help you identify if certain entities are causing performance issues or rendering problems.

Hiding entities in the editor for better inspection.
Hiding entities in the editor for better inspection.

Latency and FPS monitoring​

In the editor, you can monitor your latency with your rendering session at the bottom left corner. This will show the country hosting the rendering session, along with the latency in milliseconds.

Monitoring latency from the editor.
Monitoring latency from the editor.

You can also add the metrics panel to see detailed performance metrics, including FPS, and network statistics. Go to bottom right corner, click on Extensions and drag and drop Metrics from the Debug column.

Monitoring the performance of your scene using the metrics panel.
Monitoring the performance of your scene using the metrics panel.

Using performance panel in your Application​

Livelink-react-ui provides a built-in performance panel to help you monitor your application's performance in real-time.

It displays the Latency and FPS of the rendering session directly within your application.