Perception view

Live · replay

A small sample scene replaying in-browser — a real renderer drawing real geometry, not invented telemetry. A swarm of platforms feeds one consolidated map of a mid-rise building: its window grid is structure (a mesh), with point clouds and a voxel floor plan over it, and AOIs highlighting specific windows. Drag to orbit; toggle layers; select an area of interest. Watch platforms drop out on a rolling cycle — their points fade and their source flips to `STALE` rather than holding a crisp last frame.

Feed posture

The `status` prop governs the whole view. `live` draws normally. When the consolidated feed stops, `holding` dims the scene and raises a banner with the age of the last good frame — a held picture can never read as live. `lost` replaces the scene with an unmistakable overlay. This is invariant 5 applied to space.

What RC3 owns — and what it doesn't

Perception view is the trustworthy screen, not the map-builder. RC3 does not fuse, register, or run SLAM — it assumes an upstream system consolidates the swarm's sensors into one clean scene, the same way the Controller interface frames a physical gamepad. RC3 owns the input contract, the operator chrome, and a reference renderer; a vendor engine can take over the drawing through `renderDelegate` while keeping both.

Anatomy

A spatial canvas in the centre with chrome pinned to the edges. The geometry comes from the scene; the operator semantics come from the chrome.

Props

Types

interface PerceptionScene {
  frame: CoordinateFrame;          // "ENU" | "NED" | "z-up" | "y-up"
  sources: PerceptionSource[];
  layers: SceneLayer[];
  aois?: AreaOfInterest[];
}

type SceneLayer = PointCloudLayer | OccupancyLayer | MeshLayer;
// points    → sensor_msgs/PointCloud2 · Foxglove PointCloud
// occupancy → nav_msgs/OccupancyGrid · OctoMap · Foxglove Grid
// mesh      → pre-tessellated glTF / 3D Tiles backdrop

interface PerceptionSource {
  id: string;                      // "UGV-04"
  label?: string;
  ageSeconds: number;              // since last fresh geometry
  transform?: FrameTransform;      // into the scene frame
}

interface AreaOfInterest {
  id: string;
  label: string;
  kind: "objective" | "hazard" | "inspect" | "marker";
  position: Vec3;
  sourceId?: string;
  confidence?: number;             // 0–1
  ageSeconds?: number;
}

interface FrameTransform {
  translation: Vec3;               // metres, into the scene frame
  yaw?: number;                    // radians about the up axis
}

interface PerceptionRenderContext {
  scene: PerceptionScene;
  hiddenLayerIds: Set<string>;
  selectedAoiId: string | null;
  staleAfterSeconds: number;
  status: PerceptionStatus;
}

Wiring

Subscribe to the upstream scene, hold the hidden-layer set and the selected AOI, and feed each source's age from its last update. When a source stops, let its age climb rather than freezing the picture; when the whole feed stops, raise `status`.

// Live scene from an upstream perception subscription
<PerceptionView
  scene={{
    frame: "ENU",
    sources: feed.platforms.map((p) => ({
      id: p.id,
      ageSeconds: secondsSince(p.lastFrameAt),
      transform: { translation: p.position, yaw: p.yaw },
    })),
    layers: feed.layers,   // points / occupancy / mesh
    aois: feed.areasOfInterest,
  }}
  status={feed.connected ? "live" : "holding"}
  hiddenLayerIds={hidden}
  onToggleLayer={toggleLayer}
  selectedAoiId={selectedAoi}
  onSelectAoi={setSelectedAoi}
/>

// Hand the drawing to a vendor 3D engine, keep RC3's chrome
<PerceptionView
  scene={scene}
  renderDelegate={({ scene, hiddenLayerIds, selectedAoiId }) => (
    <YourEngine
      scene={scene}
      hidden={hiddenLayerIds}
      focus={selectedAoiId}
    />
  )}
/>

Behavioural rule

Accessibility

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as Rc3PerceptionView (extends StackPane). Run the gallery to see it natively.

import design.prizm.fx.rc3.Rc3PerceptionView;

Rc3PerceptionView()

A JavaFX Canvas reference renderer projects the scene with an orbit camera (drag / scroll-zoom / auto-rotate); chrome mirrors the web (frame chip, layer legend, source provenance, AOI registry, holding / lost overlay). Honours invariant 5 — stale geometry decays and a frozen scene never reads as live. JavaFX divergence: the renderer's neutral colours are dark-tuned constants (the web reads live CSS vars). Mirrors components/rc3/perception-view.tsx.