# Core Technologies Used in God's Eye View: A Deep Dive Into the Geospatial Stack

> Explore the core technologies behind God's Eye View including vanilla JavaScript, CesiumJS for 3D, Vite bundling, and OpenAI Realtime API for voice. Learn about the geospatial stack.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: deep-dive
- Published: 2026-09-06

---

**God's Eye View runs on vanilla JavaScript, CesiumJS for 3D rendering, Vite for bundling, and the OpenAI Realtime API for voice interaction.**

God's Eye View is a browser-based real-time geospatial intelligence console. The `bilawalsidhu/gods-eye-view` repository implements a lightweight, framework-free architecture designed for live tracking of flights, ships, satellites, and environmental data on a photorealistic 3D globe.

## Rendering and UI Layer

The visualization stack centers on **CesiumJS** without the overhead of a heavy frontend framework.

### Vanilla JavaScript with ES Modules

The entire client application ships as plain JavaScript using native ES Modules. This eliminates build-time dependencies on React, Vue, or Angular while keeping the bundle size minimal and the codebase hackable.

### CesiumJS and WebGL Rendering

In [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js), the application bootstraps a Cesium `Viewer` instance that handles all WebGL-based globe rendering, terrain, and entity visualization:

```javascript
import { Viewer } from 'cesium';
import 'cesium/Widgets/widgets.css';

const viewer = new Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
});

```

The [`package.json`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/package.json) specifies Cesium version `^1.124.0`, locking to a recent stable release with full WebGL 2.0 support and improved 3D Tiles performance.

### Vite Build System

**Vite** serves as both the development server and production bundler. The [`vite.config.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/vite.config.js) configures the Cesium plugin for proper asset handling—critical because Cesium relies on a large set of static assets (Web Workers, WASM, imagery).

Development starts with `npm run dev`, binding to **localhost** by default to keep API keys server-side.

### Google Photorealistic 3D Tiles

Optional high-resolution city geometry loads via **Google Photorealistic 3D Tiles**, accessed either through a Cesium ion token or a direct Google Maps API key. This provides building-level detail for urban areas without hosting massive tilesets locally.

## Data and Geospatial Engines

Raw data feeds transit through a normalization pipeline built on specialized geospatial libraries.

### Vector Tile Processing

The `@mapbox/vector-tile` and `pbf` packages decode Mapbox Vector Tiles (MVT) for base map layers:

```javascript
import { VectorTile } from '@mapbox/vector-tile';
import { Protobuf } from 'pbf';

fetch('/tiles/12/656/1583.pbf')
  .then(r => r.arrayBuffer())
  .then(buf => {
    const tile = new VectorTile(new Protobuf(new Uint8Array(buf)));
    const roads = tile.layers.road;
  });

```

### Coordinate and Orbital Calculations

| Library | Purpose |
|---------|---------|
| **mgrs** | Converts between Military Grid Reference System and latitude/longitude |
| **egm96-universal** | Applies geoid height corrections for accurate elevation data |
| **satellite.js** | Propagates satellite orbits using SGP4/SDP4 models |

These enable unified positioning across disparate sources: AIS ship coordinates, ADS-B flight positions, and TLE-based satellite tracks all resolve to a common Earth-centered frame.

### Cesium ion Integration

A **Cesium ion** token unlocks premium global terrain and curated 3D tilesets. The application gracefully degrades when tokens expire or rate limits hit.

## Voice and AI Layer

Hands-free operation comes via the **OpenAI Realtime API**, streamed through a thin WebSocket proxy.

### OpenAI Realtime API Integration

The [`src/voice/gevRealtime.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/voice/gevRealtime.js) module implements the client half of a real-time voice conversation. Audio captured from the microphone streams to OpenAI's servers, which return both transcribed text and synthesized speech responses.

```javascript
import { WebSocket } from 'ws';

const socket = new WebSocket('wss://your-server/api/openai/realtime');

socket.addEventListener('open', () => {
  // Send microphone audio chunks
});

socket.addEventListener('message', (event) => {
  console.log('AI response:', event.data);
});

```

### WebSocket Proxy Architecture

Direct browser-to-OpenAI connections would expose API keys. Instead, a **ws**-based server proxy (`ws` version listed in [`package.json`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/package.json)) handles authentication, forwarding traffic securely while keeping secrets on the user's machine.

## Server Architecture

A minimal Node.js 24/26 server bridges external APIs:

- **OpenAI Realtime** proxy for voice
- **AISStream** for maritime tracking
- **TomTom** for geocoding and routing

The server serves static files built by Vite and runs on `localhost` by default, ensuring zero credential leakage to client bundles.

## Key Files and Their Roles

| File | Technology Demonstrated | Link |
|------|------------------------|------|
| [`package.json`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/package.json) | Full dependency manifest (Cesium, @mapbox/vector-tile, satellite.js, ws, etc.) | [source](https://github.com/bilawalsidhu/gods-eye-view/blob/main/package.json) |
| [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) | Cesium viewer bootstrap and layer orchestration | [source](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) |
| [`src/voice/gevRealtime.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/voice/gevRealtime.js) | OpenAI Realtime WebSocket client | [source](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/voice/gevRealtime.js) |
| [`vite.config.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/vite.config.js) | Vite + Cesium plugin configuration | [source](https://github.com/bilawalsidhu/gods-eye-view/blob/main/vite.config.js) |
| [`src/worldFocus.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/worldFocus.js) | Camera manipulation via `BoundingSphere` and `HeadingPitchRange` | [source](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/worldFocus.js) |

## Summary

- **God's Eye View** combines **vanilla JavaScript**, **CesiumJS**, and **Vite** for a lightweight, high-performance 3D globe
- **@mapbox/vector-tile**, **satellite.js**, and **mgrs** normalize heterogeneous geospatial data into a unified coordinate system
- The **OpenAI Realtime API** and **WebSocket** proxy enable natural voice interaction without exposing credentials
- A thin **Node.js** server isolates API keys while serving the static Vite-built frontend

## Frequently Asked Questions

### Is God's Eye View built with React or another frontend framework?

No. According to the [`package.json`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/package.json) and README's "Under the Hood" section, the application uses **vanilla JavaScript with ES Modules** exclusively. This deliberate choice reduces bundle size, eliminates framework churn, and keeps the codebase accessible to contributors without React or Vue experience.

### What version of CesiumJS does God's Eye View use?

The [`package.json`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/package.json) locks Cesium to version `^1.124.0`, a recent stable release from late 2024. This version includes WebGL 2.0 optimizations and improved 3D Tiles streaming performance essential for smooth globe rendering.

### How does the voice AI feature work without exposing OpenAI API keys?

The browser connects via **WebSocket** to a local Node.js proxy server. This server—implemented with the `ws` library—holds the OpenAI API key and forwards audio streams to OpenAI's Realtime API. All credentials remain server-side; the client only sees the WebSocket endpoint on localhost.

### Can God's Eye View run without paid API tokens?

Partially. The core Cesium globe and many data layers function with Cesium's default terrain and open data feeds. However, **Google Photorealistic 3D Tiles**, **OpenAI Realtime voice**, and some premium data sources require valid API keys. The application degrades gracefully when tokens are missing or exhausted.