>_ DevTrendsit

Lingua

Home

Linguaggi

Sezioni

Frontend Backend Mobile DevOps AI / ML GameDev Blockchain Embedded Sicurezza
JavaScript

Come Trasformare un Browser in un Centro di Comando Intelligente Usando Dati Aperti

I film di spionaggio mostrano spesso enormi schermi con un globo 3D, dove un operatore traccia gli aerei in tempo reale, passa alle telecamere di sorveglianza stradale e punta i satelliti. Di solito sembra costosa grafica di Hollywood. Ma in realtà, quasi tutti questi segnali sono aperti e vengono trasmessi proprio adesso in forma non crittografata.

Dimostrazione dell'interfaccia del progetto

Il progetto God's Eye View, creato dallo sviluppatore Bilawal Sidhu, combina fonti di dati aperti disparate in una singola finestra del browser basata su un globo 3D fotorealistico. L'autore ha gestito una popolare serie di video su YouTube, raccogliendo milioni di visualizzazioni, e ha rilasciato tutto il codice sorgente sotto licenza MIT.

Cosa può fare il progetto

Di solito, per raccogliere informazioni spaziali (OSINT/GEOINT), devi aprire decine di schede: Flightradar24 per gli aerei, MarineTraffic per le navi, i cataloghi satellitari CelesTrak e i siti delle telecamere stradali. Qui, tutti questi livelli sono consolidati in un unico posto.

Cambio modalità sensore

Ecco alcune cose interessanti che puoi esplorare in diretta:

  • Vista dalla cabina di pilotaggio. Seleziona qualsiasi aereo reale in volo, premi un pulsante e vola insieme a lui. La telecamera tiene il terreno sottostante inquadrato, mentre un riepilogo meteorologico e i contatti nelle vicinanze vengono visualizzati accanto.

Vista dalla cabina di pilotaggio

  • Proiezione delle telecamere stradali direttamente nella scena 3D. Circa 800 telecamere pubbliche a Austin, Londra e California non vengono solo aperte in un player separato, ma proiettate sulla geometria delle intersezioni con coni di visibilità.

Proiezione telecamere nella città 3D

  • Orbite satellitari e missioni spaziali. Il globo calcola le posizioni di centinaia di satelliti, inclusa la Stazione Spaziale Internazionale, traccia traiettorie e riproduce lanci di razzi recenti.

Tracciamento ISS

  • Filtri shader per sensori. I tasti di scelta rapida possono commutare l'immagine in visione notturna (NVG), termografia (FLIR) o modalità monitor CRT.

  • Controllo vocale tramite rete neurale. Se colleghi una chiave OpenAI, l'applicazione può essere controllata tramite voce. L'agente comprende le coordinate, la prospettiva corrente della telecamera, può misurare distanze tra oggetti e tracciare confini di quartieri direttamente sulla mappa.

Disegno di rotte e zone con la voce

Sotto il cofano

Non ci sono framework frontend pesanti come React o Vue qui. Lo stack è sorprendentemente diretto: JavaScript vanilla, il tool di build Vite e il motore geospaziale CesiumJS. Il pianeta 3D stesso viene renderizzato usando Google Photorealistic 3D Tiles.

L'architettura è interessante nel modo in cui l'autore ha risolto i tipici problemi di visualizzazione di geodati grezzi:

  1. Fluidità con aggiornamenti poco frequenti. La maggior parte delle API gratuite fornisce le posizioni degli aerei ogni 15-30 secondi. Il client renderizza intenzionalmente il movimento con un ritardo di un intervallo di polling e interpola i punti, riempiendo i vuoti con la navigazione stimata.
  2. Ancoraggio dell'altezza. Gli oggetti non fluttuano nell'aria né sprofondano nel terreno. Le altezze del transponder vengono ricalcolate rispetto al geoide e abbinate alla mesh poligonale del terreno corrente.
  3. Calcolo delle orbite. Le coordinate satellitari vengono calcolate localmente usando l'algoritmo SGP4 con sincronizzazione del tempo siderale di Greenwich, quindi gli anelli delle orbite non tremolano quando si cambia prospettiva.
  4. Sicurezza delle chiavi e limiti di frequenza. Tutte le richieste alle API a pagamento (OpenAI, AISStream, TomTom) vengono instradate attraverso il backend, dove sono configurate la cache e stretti limiti di frequenza sul consumo delle richieste.
src/
├── main.js                 # Инициализация CesiumJS и слоев
├── ui.js                   # Панели управления, HUD, стили
├── hud.js                  # Интерфейс телеметрии
├── mapStackController.js   # Переключение подложек (Google 3D / Bing / OSM)
├── iconOrientation.js      # Проекция курсовых углов техники на экран
├── voice/                  # Интеграция с OpenAI Realtime API
└── data/                   # Модули загрузки данных по каждому слою

Fonti di dati e costo di avvio

La maggior parte dei livelli funziona senza registrazione e chiavi: aviazione tramite OpenSky e adsb.lol, terremoti tramite USGS, satelliti tramite CelesTrak, stazioni radio tramite Radio Browser, database di data center e cavi sottomarini.

Per eseguire il terreno 3D stesso, avrai bisogno di una chiave API Google Maps con Map Tiles API abilitata. Google fornisce 1000 sessioni gratuite al mese. Ogni sessione dura fino a tre ore di visualizzazione attiva, più che sufficienti per esperimenti personali. È necessario un token OpenAI funzionante per l'assistente vocale.

Ricostruzione della traiettoria di un elicottero

Avvio rapido

È richiesta la versione 24 o 26 di Node.js.

Clona il repository e configura le variabili d'ambiente:

git clone https://github.com/bilawalsidhu/gods-eye-view.git
cd gods-eye-view
cp .env.example .env

Apri il file .env, inserisci GOOGLE_MAPS_API_KEY ed esegui il progetto:

npm install
npm run dev -- --host localhost --port 4173

Dopo di ciò, l'interfaccia è disponibile su http://localhost:4173. Per impostazione predefinita, il server ascolta solo sull'indirizzo locale della macchina, quindi le tue chiavi API non verranno esposte alla rete locale.

A chi sarà utile questo progetto

Prima di tutto, questa è un'eccellente guida per sviluppatori web che vogliono capire WebGL, tile 3D, la libreria CesiumJS e l'elaborazione di flussi geospaziali. Il codice è scritto senza astrazioni inutili, la logica di ogni livello è isolata nella cartella src/data/, e l'implementazione dell'agente vocale dimostra chiaramente come collegare LLM multimodali con una scena 3D.

Se stai costruendo il tuo sistema di monitoraggio, una dashboard per droni, o sei interessato all'analisi di intelligence open source, il progetto fungerà da solida base per i tuoi livelli e le tue visualizzazioni.

Progetti correlati