NebulaGraph: rendering real-time di un milione di punti con WebGL

Prova a visualizzare un milione di punti in un foglio di calcolo o in una libreria grafica tradizionale: quasi sempre ottieni uno di questi due risultati.

Blocca il browser (oltre 50 MB di nodi DOM)
Rendering in 30 secondi (l'utente abbandona prima di vedere il grafico)

I data scientist lavorano spesso con dataset di questa dimensione: correlazioni azionarie, matrici di espressione genica, embedding neurali. Molti strumenti di visualizzazione si fermano però intorno ai 100.000 punti prima di degradare.

Questa è la storia di NebulaGraph, un motore di visualizzazione WebGL che abbiamo costruito per gestire dataset massivi mantenendo interattività in tempo reale.

Il problema: il DOM non può essere scalato

Un approccio tradizionale alla visualizzazione dei dati:

// Plotting 1 million points the naive way
const svg = d3.select("body").append("svg");
data.forEach((point) => {
  svg.append("circle")
    .attr("cx", point.x)
    .attr("cy", point.y)
    .attr("r", 2)
    .style("fill", colorScale(point.value));
});

Che succede?

Crea 1.000.000 di nodi DOM
Il motore CSS calcola il layout per ciascuno (calcoli di layout 1M)
Memoria del browser: 50-100 MB solo per i cerchi
Interazione (zoom, panoramica, passaggio del mouse): blocca per più di 2 secondi

Il collo di bottiglia è evidente: il DOM è progettato per documenti, non per milioni di primitive grafiche. Ogni elemento è un nodo completo con listener, stili e stato: un overhead enorme per rappresentare, in pratica, un pixel.

I data scientist dovrebbero:

Usa Python con Matplotlib (nessuna interattività, PNG statico)
Usa Plotly (interattivo, ma lento oltre ~50k punti)
Usa strumenti specializzati (Graphia per grafi, Tableau per BI)
Sviluppa pipeline WebGL custom (richiede competenze grafiche avanzate)

La domanda era: possiamo rendere WebGL accessibile ai data scientist senza richiedere competenze di computer graphics?

La soluzione: rendering accelerato dalla GPU

Abbiamo costruito NebulaGraph in tre livelli:

Livello 1: renderer WebGL con shader GLSL

Invece di elementi DOM, ogni punto viene renderizzato via WebGL direttamente sulla GPU:

// vertex.glsl - Runs once per vertex (1M times, in parallel on GPU)
attribute vec3 position;
attribute float value;  // Data value for coloring
attribute float selected; // For highlighting

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform float time;

varying vec4 vColor;
varying float vValue;

void main() {
  // Position: transform to screen space
  gl_Position = projectionMatrix * viewMatrix * vec4(position, 1.0);
  
  // Size: responsive to zoom level
  gl_PointSize = mix(2.0, 8.0, float(selected));
  
  // Color: based on data value
  vColor = colorForValue(value);
  vValue = value;
}

// fragment.glsl - Runs once per pixel
varying vec4 vColor;
varying float vValue;

void main() {
  // Circular point shape (instead of square)
  float r = distance(gl_PointCoord, vec2(0.5));
  if (r > 0.5) discard; // Transparent outside circle
  
  gl_FragColor = vColor;
  gl_FragColor.a = 1.0 - smoothstep(0.4, 0.5, r); // Soft edges
}

Risultato: 1 milione di punti renderizzati in ~16ms (60fps) invece di 30 secondi.

Livello 2: ottimizzazione del trasferimento dati

Il collo di bottiglia si è spostato dal rendering al trasferimento dei dati:

// Traditional: Transfer JSON
const data = [
  { x: 0.1, y: 0.2, value: 0.5 },
  { x: 0.15, y: 0.25, value: 0.55 },
  // ... 999,998 more objects
  // Result: ~40MB of JSON
];

// NebulaGraph: Binary streaming
const floatBuffer = new Float32Array(1000000 * 3); // 12MB
let offset = 0;
data.forEach((point) => {
  floatBuffer[offset++] = point.x;
  floatBuffer[offset++] = point.y;
  floatBuffer[offset++] = point.value;
});

// Transfer via ArrayBuffer (native binary, 3x smaller than JSON)
const arrayBuffer = floatBuffer.buffer;

Utilizzando Float32Array binari invece di JSON, abbiamo ridotto le dimensioni di trasferimento da Da 40 MB a 12 MB (riduzione del 70%). Per scenari con uso intensivo della rete, ciò significava 3-4 secondo tempo di caricamento invece di 30+ secondi.

Livello 3: API adatta ai data scientist

Abbiamo eliminato la complessità di WebGL:

# Python data science workflow
import numpy as np
import pandas as pd
from nebulagraph import NebulaGraph

# Load dataset (e.g., gene expression data)
data = pd.read_csv("gene_expression.csv")
features = np.array(data[['gene1', 'gene2', 'gene3']].values)

# Project to 2D for visualization
from sklearn.decomposition import PCA
pca = PCA(n_components=2)
points_2d = pca.fit_transform(features)

# Create interactive visualization
viz = NebulaGraph(
  data=points_2d,
  values=data['expression_level'],
  color_by='expression_level',
  title='Gene Expression Landscape'
)
viz.show()

Dietro le quinte, NebulaGraph:

Serializzato l'array Numpy in formato binario
Contesto WebGL aperto in Jupyter
Dati binari trasmessi in streaming alla GPU
Rendering di oltre 1 milione di punti in modo interattivo

Risultato: i data scientist non hanno scritto WebGL. Hanno scritto Python.**

I risultati: democratizzare la visualizzazione dei dati

60fps a 1 milione di punti

Strumenti tradizionali: Congelato a 20-30 punti
Matplotlib: statico, nessuna interattività
Trama: 15-20fps a 50k punti, inutilizzabile a 100k+
NebulaGraph: 60fps stabili a 1 milione di punti

Ciò ha consentito l'esplorazione interattiva: zoom, filtraggio, passaggio del mouse singoli punti per visualizzare i valori.

Tempi di caricamento più rapidi dell'80%.

Trasferimento JSON (40 MB) + rendering DOM: 30-45 secondi
Trasferimento binario NebulaGraph + rendering GPU: 5-8 secondi
Per flussi di lavoro iterativi (caricamento, esplorazione, modifica dei parametri, ricaricamento), 20 minuti analisi → analisi di 5 minuti

Casi d'uso nel mondo reale

Modellazione finanziaria (correlazioni azionarie)

Visualizza oltre 5000 azioni × 2000+ giorni di negoziazione (10 milioni di punti)
Identifica istantaneamente i cluster di correlazione passando il mouse
Zoom per confrontare i percorsi dei singoli stock all'interno del cluster

Analisi dell'espressione genica

Traccia 20.000 geni × 500 campioni (10 milioni di punti)
Colora per tipo di cellula, vedi quali geni co-esprimono
Passa il mouse sui metadati dei geni (funzione, percorso, associazione con la malattia)

Visualizzazione della rete neurale

Tracciare le attivazioni dei neuroni 1M dal modello addestrato
Colore in base alla forza di attivazione
Identificare rappresentazioni di caratteristiche importanti

Approfondimento sull'architettura tecnica

Gestione della memoria

La memoria della GPU è limitata (in genere 1-4 GB di VRAM). Lo abbiamo gestito in modo aggressivo:

// Streaming data for massive datasets
class DataStreamBuffer {
  chunkSize = 100_000; // Process in chunks
  totalPoints: number;

  async *streamData(dataset: AsyncIterable<Point>) {
    let chunk = new Float32Array(this.chunkSize * 3);
    let offset = 0;

    for await (const point of dataset) {
      chunk[offset++] = point.x;
      chunk[offset++] = point.y;
      chunk[offset++] = point.value;

      if (offset === this.chunkSize * 3) {
        yield chunk; // Transfer chunk to GPU
        chunk = new Float32Array(this.chunkSize * 3);
        offset = 0;
      }
    }

    if (offset > 0) yield chunk.slice(0, offset); // Final partial chunk
  }
}

Ciò ci consente di visualizzare set di dati più grandi della memoria della GPU tramite streaming.

Prestazioni di interazione

Lo zoom/panning richiedeva il ricalcolo della matrice di proiezione per ogni fotogramma. Noi ottimizzato:

const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);

const animate = () => {
  // Only recalculate matrix if camera moved
  if (camera.hasChanged) {
    camera.updateProjectionMatrix();

    // Reuse projection matrix across all shaders
    shader.uniforms.projectionMatrix.value = camera.projectionMatrix;
    shader.uniforms.viewMatrix.value = camera.matrixWorldInverse;

    camera.hasChanged = false;
  }

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

Risultato: Pan/zoom è rimasto a 60 fps anche con 1 milione di punti.

Mappatura dei colori su scala

Mappatura efficiente di milioni di valori sui colori:

// Pre-computed color lookup table (texture)
uniform sampler2D colorMap; // 256×1 texture with color gradient
uniform float minValue;
uniform float maxValue;

void main() {
  // Normalize value to [0, 1]
  float normalized = (vValue - minValue) / (maxValue - minValue);
  
  // Look up color from texture (very fast)
  vec4 color = texture2D(colorMap, vec2(normalized, 0.5));
  
  gl_FragColor = color;
}

Ciò ha evitato calcoli costosi (logaritmi, interpolazioni graduali) per ogni frammento.

Cosa faremmo diversamente

1. Iniziato con i fondamenti della visualizzazione

Inizialmente abbiamo creato un'interfaccia utente ricca di funzionalità prima di definire il rendering principale. Lezione: Innanzitutto prestazioni di base perfette, poi funzionalità.

2. Migliore documentazione per i formati dei dati

I data scientist hanno lottato con "quale formato accetta NebulaGraph?" Dovremmo hanno fornito più modelli ed esempi in anticipo.

3. Supporto mobile

La versione iniziale era solo desktop. Mobile WebGL presenta vincoli diversi (viewport più piccolo, VRAM limitata). Pianificarlo fin dall'inizio avrebbe aiutato.

Chi ha bisogno della visualizzazione accelerata dalla GPU

L'architettura NebulaGraph si applica a:

Scienza dei dati: esplorazione di set di dati ad alta dimensione (clustering, output di riduzione della dimensionalità, matrici di correlazione)
Analisi di rete: visualizzazione di strutture grafiche con oltre 100.000 nodi
Dati finanziari: monitoraggio di migliaia di serie temporali contemporaneamente
Informatica scientifica: simulazioni di particelle, visualizzazioni fluidodinamiche
GIS/Mappatura: rendering di milioni di punti dati geografici

Introduzione alla visualizzazione WebGL

Se stai costruendo:

Strumenti di visualizzazione dei dati ad alte prestazioni
Dashboard di analisi in tempo reale
Interfacce di calcolo scientifico interattivo
Sistemi che gestiscono oltre 100.000 punti dati

L'approccio accelerato dalla GPU di NebulaGraph è collaudato in produzione. Sì consegnato:

Rendering a 60 fps con oltre 1 milione di punti
Tempi di caricamento più rapidi dell'80% rispetto agli approcci tradizionali
API Python adatta ai data scientist

Esplora NebulaGraph

🌌 Demo interattiva: Galleria NebulaGraph
📊 Repository con esempi: GitHub/NebulaGraph
📖 Three.js + riferimento WebGL: incluso nella documentazione

None

NebulaGraph: 1 milione di punti a 60 FPS con WebGL