Visiontr

Visiontr is a real-time geospatial visualization cockpit built with React, Vite, Cesium, and live public data feeds. It renders a tactical globe UI for tracking aircraft, satellites, orbital paths, road-flow overlays, camera/sensor panels, shader modes, and runtime performance health from one immersive screen.

The project feels like a command-center map: aircraft move across the globe, satellite catalogs propagate into orbital positions, city roads can glow with simulated traffic density, and the HUD can switch between digital, night-vision, thermal, FLIR, CRT, and other visual treatments.

What It Is About

Visiontr is an experimental world-view interface for live situational awareness. It combines multiple data layers into a single Cesium scene:

• Air layer: OpenSky flight telemetry, mapped into live aircraft positions with a simulated fallback feed when OpenSky is unavailable or rate-limited.
• Satellite layer: CelesTrak TLE catalogs rendered with satellite.js, local cache fallback, bundled fallback objects, sparse/full labels, selection metadata, and orbit sampling.
• Road traffic layer: Overpass/OpenStreetMap road geometry, animated traffic lights, density simulation, tactical culling, and surveillance nodes.
• Sensor modes: night vision, thermal palettes, FLIR variants, CRT/noir/recon-style post-processing, bloom, sharpening, scanlines, and HUD theming.
• Performance layer: adaptive render budgets, tile screen-space-error tuning, FPS sampling, workload guardrails, and scene-profile metrics.

Visual System

The UI is intentionally cinematic and dense. The main globe view is supported by:

• floating telemetry cards
• system health and alert panels
• layer toggles for aircraft, traffic, satellites, labels, trails, pulses, and surveillance cameras
• targeting reticle and selected-asset intelligence panel
• mini-map, MGRS/coordinate readouts, and quick-jump locations
• collapsible debug/performance controls

Tech Stack

• React 18
• Vite 7
• TypeScript
• Cesium 1.134 with vite-plugin-cesium
• Tailwind CSS
• satellite.js for orbital propagation
• mgrs for grid-coordinate formatting
• OpenSky, CelesTrak, and Overpass integrations through Vite dev proxies

Project Structure

src/
  components/          Globe, HUD panels, toolbar, minimap, CCTV inlay, reticle
  hooks/               Cesium setup, flight data polling, settings, scaling, sync
  services/            OpenSky auth, live traffic, satellites, post-process effects
  services/satellites/ Catalog loading and orbit propagation
  workers/             Flight-state mapping worker
  types/               Shared shader, satellite, and Cesium typing helpers
docs/
  architecture/        WebSocket ingestion/schema-versioning notes
  assets/              README visuals
public/models/         Aircraft/drone GLB assets

Data And Fallbacks

Visiontr is built to keep rendering even when public feeds are unstable:

• OpenSky polling uses OAuth client credentials, retries, backoff, and a simulated flight feed.
• CelesTrak satellite loading tries live endpoints, localStorage cache, group fallback TLEs, then bundled fallback records.
• Overpass road traffic handles rate limits and keeps cached/stale road geometry when possible.
• Expensive scene work is controlled by render budgets, culling, LOD, throttling, and adaptive guardrails.

The architecture notes in docs/architecture/websocket-ingestion-schema-versioning.md outline a future WebSocket ingestion path with schema negotiation, replay, dedupe, and observability.

Setup

Install dependencies:

npm install

Create a local env file:

copy .env.example .env

Fill in the required values:

VITE_CESIUM_ION_ACCESS_TOKEN=
VITE_GOOGLE_MAPS_API_KEY=
VITE_OPENSKY_CLIENT_ID=
VITE_OPENSKY_CLIENT_SECRET=

Optional:

VITE_SATELLITE_PROXY_MODE=auto
VITE_USE_LEGACY_GLOBE=false

Run

npm run dev

Vite serves the app locally and proxies:

• /opensky-auth to OpenSky auth
• /opensky-api to OpenSky API
• /celestrak-proxy to CelesTrak

Build

npm run build

Preview the production build:

npm run preview

Notes

• The current app entry renders Globe from src/components/Globe.tsx.
• Dashboard.tsx and WorldViewFull.jsx are also present as an alternate/legacy-style HUD surface.
• Do not commit real API credentials; keep them in .env.
• Public APIs can be rate-limited or unavailable, so fallback behavior is part of the expected experience.