ChartGPU – Hochleistungs-Chartbibliothek auf WebGPU-Basis (rendert 1 Mio. Punkte mit 60 fps)

• Eine Open-Source-Chartbibliothek, die mithilfe von WebGPU große Datensätze flüssig rendert
• In TypeScript geschrieben und unterstützt verschiedene Serientypen wie Linie, Fläche, Balken, Scatter, Kreis und Candlestick
• Integrierte Interaktionsfunktionen wie Hover-Highlighting, Tooltips, Crosshair, Zoom-Gesten und Theme-Presets
• Mit dem React-Integrationspaket (chartgpu-react) auch in React-Umgebungen einfach einsetzbar
• WebGPU-beschleunigtes Rendering liefert eine Leistung auf dem Niveau von 60 Bildern pro Sekunde und eignet sich damit gut für die Visualisierung großer Datenmengen

---

Überblick

• ChartGPU ist eine Hochleistungsbibliothek für Chart-Rendering auf WebGPU-Basis, mit der sich große Datenmengen flüssig visualisieren lassen
  • Entwickelt in TypeScript und veröffentlicht unter der MIT-Lizenz
  • Installation mit dem Befehl npm install chartgpu möglich

Hauptfunktionen

• WebGPU-beschleunigtes Rendering hält auch bei großen Datensätzen hohe FPS-Werte
• Unterstützung für verschiedene Diagrammtypen: line, area, bar, scatter, pie, candlestick
• Integrierte Interaktionsfunktionen: hover highlight, tooltip, crosshair
• Unterstützung für Streaming-Updates von Daten (appendData(...))
• Zoom auf der X-Achse verfügbar (einschließlich Gesten und Slider-UI)
• Theme-Presets (dark / light) sowie benutzerdefinierte Themes werden unterstützt

Architektur

• ChartGPU.create(...) verwaltet den Canvas- und WebGPU-Lebenszyklus, während der Render Coordinator die Rendering-Abstimmung übernimmt
• Die interne Struktur besteht aus den folgenden Schichten
  • WebGPU Core: Initialisierung von GPU-Adapter und -Gerät, Konfiguration des Canvas
  • Render Coordinator: Layout, Skalierung, Daten-Upload und Verwaltung der Render-Passes
  • GPU Renderers: Renderer für die jeweiligen Diagrammtypen wie Grid, Area, Bar, Scatter, Line, Pie und Candlestick
  • Shaders(WGSL): Shader-Dateien passend zu den jeweiligen Renderern
  • Chart Sync: bietet Crosshair-Synchronisierung zwischen mehreren Charts

React-Integration

• Paket chartgpu-react für React verfügbar
• Installation: npm install chartgpu-react

Browser-Unterstützung

• Erfordert einen Browser mit aktiviertem WebGPU
  • Unterstützung für Chrome 113+, Edge 113+, Safari 18+
  • Firefox befindet sich derzeit in Entwicklung

[GN⁺]

Hacker-News-Kommentare

• Ich bin der Maintainer von uPlot. Dieses Projekt ist interessant, daher werde ich es mir bald genauer ansehen
  Mein kurzer Eindruck vom 1M-Demo:

  • Beim Sampling besteht das Risiko, wichtige Peaks zu entfernen. uPlot verwendet kein Sampling, daher sollte man es für einen fairen Performance-Vergleich deaktivieren. Siehe dazu diesen PR
  • Die CPU-Auslastung ist ziemlich hoch, obwohl nichts passiert. Canvas-basierte Lösungen hingegen verbrauchen fast keine CPU, wenn sich Daten oder Skalierung nicht ändern. In WebGPU lässt sich das vermutlich mit Code beheben, der Updates pausiert
  • Wenn mehrere Charts auf einer Seite angezeigt werden, begrenzt Chrome die Zahl der GL-Kontexte auf 16. Plotly umgeht das mit virtual-webgl
  • Ein Datenformat wie [[0,1],[1,3],[2,2]] erzeugt Millionen kleiner Arrays, daher wäre eine spaltenbasierte Datenstruktur besser
    Übrigens gibt es auch ein 2M-Datenpunkte-Demo von uPlot
  • Er bedankt sich dafür, dass man sich die Zeit genommen hat, und sagt, uPlot sei eine große Inspirationsquelle gewesen, die gezeigt habe, dass Browser-Charts nicht langsam sein müssen
    Sowohl das LTTB-Sampling als auch das Idle-CPU-Problem seien berechtigte Hinweise. Sampling ist im Demo standardmäßig aktiviert, aber mit „sampling: none“ ist ein fairer Vergleich möglich. Er will einen Toggle in die UI einbauen.
    Auch das Problem, dass die Render-Schleife im Stillstand weiterläuft, lasse sich beheben. Geplant ist, nur bei Datenänderungen oder Interaktionen zu rendern
  • Ich bin der ursprüngliche Entwickler von Flot. Früher habe ich bei der Verarbeitung von Millionen Datenpunkten Mip-Mapping clientseitig implementiert
    Bei Liniendiagrammen kann man adaptiv auf Basis des pixelgenauen Unterschieds zwischen benachbarten Punkten samplen, ohne dass man visuell einen Unterschied sieht, selbst wenn man die meisten Punkte verwirft.
    Es ist ineffizient, 1 Million Punkte in einem 1000 Pixel breiten Chart zu zeichnen
  • Ich frage mich, ob man mit Wavelet-Zerlegung nur die Hochfrequenzanteile reduzieren und Peaks erhalten könnte. Das erscheint theoretisch sinnvoller als Sampling, aber ich habe dazu keine Literatur gefunden
  • Als begeisterter Nutzer von uPlot möchte ich Danke sagen, dass du so eine großartige Bibliothek gebaut hast
  • In mehreren Projekten haben wir Daten ohne Peak-Verlust neu gesampelt, indem wir zusätzlich einen Min-Max-Bereichsgraphen gezeichnet haben. Das hat ziemlich gut funktioniert

• Wenn es sehr viele Datenpunkte gibt, sollte man die Zahl der Punkte pro Pixel zählen und die Intensität über Helligkeit oder Farbe darstellen
  Das ist ähnlich zum digital phosphor in der Elektronik. Ein Beispiel gibt es unter diesem Link

  • Guter Vorschlag. Solches dichtebasiertes Rendering ist bei überlappenden Daten effektiv. Mit einem WebGPU-Compute-Shader könnte man Punkte in ein Grid binning, pro Zelle zählen und dann die Intensität rendern.
    Besonders bei Scatter Plots ist das nützlich, um Clusterstrukturen sichtbar zu machen. Ich nehme die Idee in die Liste auf
  • Stimme zu. Eine Intensitäts-Heatmap mit logarithmischer Skala eignet sich gut für große Datensätze, etwa Liniendiagramme mit 10.000 Serien. Bei Bedarf kann man dann ins Detail drillen

• Der Patch für die CPU-Auslastung im Idle-Zustand ist fertig.
  Dem 1M-Benchmark-Beispiel wurde ein Toggle „Benchmark mode“ hinzugefügt, damit die Benchmark-Funktion erhalten bleibt und das Ganze im inaktiven Zustand trotzdem effizient läuft
  Dass 0 FPS angezeigt werden, ist normal — wenn es nichts zu rendern gibt, werden keine Frames gezeichnet. Bei Bedarf rendert es sofort mit voller Geschwindigkeit
  Ich bin von dem engagierten Feedback der Community beeindruckt

• Ich entwickle ein browserbasiertes Link-Graph-Analysetool (webvetted.com/workbench)
  Ich muss Graphen mit Tausenden von Knoten und Kanten visualisieren; wenn 1M Punkte möglich sind, wäre das eine große Hilfe

  • Er sagt, das Projekt sehe großartig aus, und erklärt, dass sich ChartGPU derzeit auf 2D-Charts wie Linien, Balken und Scatter Plots konzentriert
    Die WebGPU-Rendering-Muster ließen sich aber auch gut auf Graph-Visualisierung anwenden. Der Scatter-Renderer verarbeitet bereits Tausende Instanzen, daher wäre das Hinzufügen von Kanten strukturell nicht schwierig
    Er fragt nach Meinungen dazu, ob Graph-Funktionen in ChartGPU integriert oder als separate Bibliothek GraphGPU ausgelagert werden sollten
  • Es wird nach dem Vertrauenswürdigkeits-Eintrag von webvetted.com beim URL-Scanner von Gridinsoft gefragt
  • Er sagt, das sei sehr nützlich, und er werde es noch heute integrieren
  • Als potenzieller Nutzer rät er, dass auf der Website eine Seite fehle, die die Produktfunktionen detaillierter zeigt. Die Produktpräsentation müsse verbessert werden

• Beeindruckend. Das wirkt wie eines der beeindruckendsten Demos

• Es wäre gut, Linien- und Band-Zeichenfunktionen für Candlesticks hinzuzufügen. Es sollte nicht nur ums Plotten gehen, sondern auch darum, Punkte hervorheben zu können
  Früher wollte ich selbst etwas Ähnliches mit WebGPU bauen, aber dieses Projekt macht mir Lust, es direkt auszuprobieren

• Ich bin der Maintainer von TimeLine. Das Live-Streaming-Demo von ChartGPU (Link) läuft nicht so flüssig wie erwartet
  Zum Vergleich läuft dieses Demo, das mit 2D-Canvas im Main-Thread implementiert ist, deutlich flüssiger

  • Die gesamte Bibliothek sieht aus wie KI-generierter Code.
    Relevante Dateien: webgpu-pro.md und webgpu-expert.md

• Im 1M-Punkte-Beispiel wurde ein Slider-Bug entdeckt (Link)
  Beim Ziehen bleibt der Slider nicht unter dem Cursor, sondern springt um eine unerwartete Distanz

  • Er sagt, das sei bereits die zweite Meldung zum gleichen Problem. Es scheine dieselbe Ursache wie beim Scrollbar-Bug auf dem Mac M1 zu haben
    Es handelt sich um ein Koordinaten-Mapping-Problem beim Data-Zoom-Slider, das jetzt höher priorisiert behoben werden soll

• Glückwunsch, aber 1M Punkte sind im Finanzbereich eher normal
  Die Rendering-Engine, an der ich gerade arbeite, hat die Leistung von bisherigen 10 Millionen Punkten auf 100 Millionen Punkte gesteigert
  Siehe Demo-Video

• Plotly konnte schon vor Jahren mit WebGL mehr als zehn Millionen Punkte verarbeiten
  Es gibt viele Bibliotheken mit ähnlichen Funktionen
  Siehe Performance-Demo