3D Viewer

The 3D viewer renders your robot in real-time as you navigate through trajectory frames. It provides interactive camera controls, visual helpers, and joint angle readouts to give annotators full spatial context during labeling.

Overview

The 3D viewer occupies the main panel of the labeling interface. It reads joint angle values from the current frame of your CSV data and applies forward kinematics to render the robot in the corresponding pose. As you scrub through the timeline or play back the trajectory, the robot model updates in real-time.

The viewer is built on Three.js and React Three Fiber, providing hardware-accelerated WebGL rendering directly in your browser with no plugins or downloads required.

Robot Pose Rendering

Each frame of your CSV data contains joint angle values (in radians). The viewer uses these values to compute the position and orientation of every link in the kinematic chain, rendering the robot in the exact pose recorded at that timestep.

• Real-time updates — The pose updates instantly as you change frames, with no perceptible delay.
• End-effector tracking — If your CSV includes end-effector columns, a position marker is displayed at the tool tip.
• Smooth playback — During play mode, the robot animates fluidly through the trajectory at the configured FPS.

Camera Controls

The viewer uses orbit controls that let you freely position the camera around the robot. All controls operate within the 3D viewer panel.

Orbit

Left-click and drag to rotate the camera around the robot. The camera orbits around a central focus point, keeping the robot in view while you change your viewing angle. This is the primary way to inspect the robot from different perspectives.

Pan

Right-click and drag to pan the camera laterally. This shifts the entire view without changing the camera angle, useful for centering a specific part of the robot in your viewport.

Zoom

Scroll wheel to zoom in and out. Zoom toward the robot to inspect fine details like gripper orientation, or zoom out for a full overview of the workspace.

Visual Helpers

The viewer includes optional visual aids that provide spatial reference:

• Grid — A ground-plane grid that provides a sense of scale and orientation.
• Axis helper — RGB-colored axes (X = red, Y = green, Z = blue) displayed at the origin to indicate the coordinate system orientation.
• Joint markers — Small spheres at each joint position that make the kinematic chain easier to follow visually.

Robot Model Types

The appearance of the robot in the 3D viewer depends on your project's robot configuration:

• Generic Arm — Rendered as connected cylinders and spheres representing links and joints. The geometry is determined by your configured joint count, link lengths, and rotation axes.
• URDF Model — Rendered with full 3D mesh geometry loaded from the URDF package. This provides realistic link shapes, colors, and proportions matching the actual robot hardware.

If no robot configuration is set, the 3D viewer panel is hidden and the labeling interface shows only the timeline, video, and graphs.

Joint Angle Visualization

Below the 3D viewer, joint angle values for the current frame are displayed in real-time. This readout updates as you navigate through frames and includes:

• Numeric values — The raw radian value for each joint at the current frame.
• Joint graphs — Interactive line charts showing each joint's angle over the full trajectory, with a vertical marker indicating the current frame position.
• Synchronized scrubbing — Clicking on a joint graph jumps the viewer to that frame, and navigating in the timeline updates the graph markers.

Performance Tips

• Use a modern browser — Chrome and Edge provide the best WebGL performance. Safari and Firefox work but may render slightly slower with complex URDF models.
• Hardware acceleration — Ensure your browser has hardware acceleration enabled in its settings for smooth rendering.
• Large datasets — The 3D viewer only renders the current frame, so dataset size does not affect rendering performance. Navigation speed may be affected by very large CSV files.
• URDF mesh complexity — URDF models with high-polygon meshes may take a moment to load initially but render smoothly once loaded.