# Core Features of God’s Eye View: A Browser-Based Real-Time Satellite Simulator

> Explore Gods Eye View's core features. This real-time satellite simulator uses vanilla JS and CesiumJS for a 3D globe experience with cockpit view and voice annotations.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: core-features
- Published: 2026-09-05

---

**God’s Eye View is a browser-based, real-time "spy-satellite" simulator built with vanilla JavaScript, CesiumJS, and Vite that stitches together public data streams onto a photorealistic 3D globe with features like cockpit view, voice-driven annotations, and sensor-style visual filters.**

The open-source `gods-eye-view` repository delivers a lightweight yet feature-rich platform for monitoring live aircraft, vessels, satellites, and ground events from a single interactive interface. Its modular architecture separates data ingestion from rendering, enabling developers to extend functionality while maintaining performance across desktop and mobile browsers.

## Core Features and Capabilities

### Cockpit View and Terrain-Aware Tracking

The **cockpit view** allows users to ride inside any tracked flight, with the camera remaining glued to the terrain during descent. This feature relies on [`src/cockpitMath.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/cockpitMath.js), which handles the core mechanics for camera-to-entity tracking and terrain-aware placement. The math ensures that as you follow an aircraft or vessel, the perspective naturally accounts for elevation changes and maintains realistic viewing angles.

### Contacts Roster and Click-to-Track Navigation

A **250 km contacts roster** displays nearby live aircraft, ships, satellites, and other entities, enabling one-click "hop-ins" to jump between targets. This functionality is implemented in [`src/locationStatus.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/locationStatus.js). When you click any entity on the globe, the **click-to-track** system—managed by [`src/camera.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/camera.js)—locks the camera to that object, draws a fading trail behind it, and displays full metadata panels. The system can also hand off tracking to the nearest available live camera feed when spatial data correlates with CCTV mesh layers.

### Voice-Driven Whiteboard Annotations

The **voice whiteboard** feature transforms spoken commands into persistent vector annotations on the map. Located in `src/voice/`, this module integrates OpenAI Realtime API and supports 28 distinct voice-tool verbs for drawing polygons, plotting routes, and measuring distances. Users can speak natural language commands like "draw a perimeter around this airport" or "measure distance to the nearest vessel," and the system renders these as persistent GeoJSON layers overlaid on the 3D globe.

### Sensor-Style Visual Filters

God’s Eye View includes **reskinning capabilities** that emulate various sensor technologies through GLSL shaders. Pressing keys **1 through 7** cycles between visual modes including CRT, night-vision (NVG), FLIR/thermal, noir, and snow filters. The shader implementations reside in [`src/bloom.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/bloom.js) and are registered in the main application loop within [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js), allowing real-time post-processing effects that simulate military-grade optics without requiring external image assets.

### Detection Overlays and Military HUD

Every visible entity can display **screen-space detection overlays** showing bounding boxes and identification tags. The projection logic lives in [`src/annotations/screenAnnotationRenderer.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/annotations/screenAnnotationRenderer.js), which calculates 2D screen positions for 3D world objects. Complementing this is the **military HUD** (heads-up display) rendered by [`src/hud.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/hud.js), providing tactical telemetry readouts and AI-driven summary panels that update based on the currently tracked entity.

### Global Context Switching and Scene Direction

The **global context switches** feature enables one-click toggles between full-Earth, regional, and focused views while preserving application state. [`src/mapStackController.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/mapStackController.js) manages basemap layers and view stacks, supporting switches between Esri, Google 3D, OpenStreetMap, and Cesium Ion terrain providers. For cinematic presentation, the **scene director** in `src/scenes/` records camera tours that can be shared via URLs encoding camera pose, visual style, and active layers.

## Architecture and Implementation Details

The application architecture is deliberately lightweight, avoiding heavy frameworks in favor of vanilla JavaScript bundled with Vite. CesiumJS powers the 3D globe rendering, while modular data layers in `src/data/` handle specific feeds such as Live Flights, Live Vessels, Satellites, Earthquakes, Traffic, CCTV Mesh, Radio, Bikeshare, Fires, and Space Missions.

Key architectural files include:

- **[`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js)** – Bootstrap module that loads Cesium, registers all data layers, and initializes the main UI components.
- **[`src/mapStackController.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/mapStackController.js)** – Manages basemap providers and view state transitions.
- **[`src/annotations/annotationEngine.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/annotations/annotationEngine.js)** – Resolves GeoJSON inputs and renders both screen-space and world-space annotations.
- **`tools/cesium-render.mjs`** – Development helper script for rendering Cesium tiles in local environments.

The system respects API provider quotas through a server-side proxy, ensuring sustainable polling of live data feeds without hitting rate limits.

## Practical Usage Examples

### Starting the Application

```bash
git clone https://github.com/bilawalsidhu/gods-eye-view.git
cd gods-eye-view
npm ci
npm run dev   # launches http://localhost:4173

```

### Adding a Custom Annotation Layer

```javascript
import { AnnotationEngine } from './src/annotations/annotationEngine.js';

// Create a simple polygon annotation
const polygon = {
  type: 'Polygon',
  coordinates: [[[ -122.4, 37.8 ], [ -122.5, 37.8 ], [ -122.5, 37.7 ], [ -122.4, 37.7 ], [ -122.4, 37.8 ]]]
};

AnnotationEngine.addGeoJson(polygon, { style: { color: '#ff6600', opacity: 0.5 } });

```

### Issuing Voice Commands

```javascript
// In the browser console after the app is running
document.querySelector('#gev-mic').click(); // activate microphone
// Say: "Take me to Tokyo" or "Draw a box around this area"

```

### Switching Sensor Styles via Keyboard

```javascript
// Press keys 1-7 to cycle sensors (CRT, NVG, FLIR, etc.)
window.addEventListener('keydown', e => {
  if (e.key >= '1' && e.key <= '7') {
    console.log(`Switching to sensor style ${e.key}`);
    // The UI handler automatically updates the GLSL shader uniforms
  }
});

```

## Summary

- **God’s Eye View** combines real-time public data streams with photorealistic 3D visualization using CesiumJS and vanilla JavaScript.
- **Cockpit view** ([`src/cockpitMath.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/cockpitMath.js)) provides terrain-aware camera tracking for immersive entity following.
- **Voice whiteboard** (`src/voice/`) supports 28 natural language commands for creating map annotations.
- **Sensor filters** ([`src/bloom.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/bloom.js)) emulate military optics via GLSL shaders accessible through keyboard shortcuts 1-7.
- **Shareable state** encoding allows users to distribute specific camera angles, layers, and targets via URL parameters.
- Modular **data layers** in `src/data/` enable easy extension of the 20+ supported live feed types.

## Frequently Asked Questions

### What technologies power God’s Eye View?

God’s Eye View is built with **vanilla JavaScript**, **CesiumJS** for 3D globe rendering, and **Vite** for bundling. It uses the OpenAI Realtime API for voice processing and standard WebGL/GLSL for shader effects. The application runs entirely in the browser, fetching data through a lightweight server-side proxy to manage API quotas.

### How does the voice whiteboard feature interpret commands?

The voice system uses the **28 voice-tool verbs** defined in `src/voice/` to map natural language to specific actions. When you speak a command, the OpenAI Realtime integration parses the audio, identifies the intended tool (such as drawing a polygon or measuring distance), and calls the corresponding function in the **AnnotationEngine** to render persistent vector layers on the 3D globe.

### Can I integrate custom data sources into the simulator?

Yes. All data providers are modularized within `src/data/`. Each layer follows a consistent interface for fetching, interpolating between updates, and exposing entities to the roster system. You can add new feeds by creating a module that exports entity positions and metadata in the format expected by [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) during the bootstrap phase.

### How are shareable links generated and what do they contain?

When you create a scene or configure a specific view, God’s Eye View serializes the **UI state—including camera pose, active target, visual style filters, and layer toggles**—into URL parameters. This allows users to copy and share links that reproduce the exact session state, enabling collaborative "hand-off" sessions where one user can pass a specific surveillance view to another.