ChartGPU – bibliothèque de graphiques haute performance basée sur WebGPU (rendu de 1 M de points à 60 fps)

• WebGPU est utilisé pour rendre de grands ensembles de données de manière fluide dans cette bibliothèque de graphiques open source
• Écrite en TypeScript, elle prend en charge divers types de séries, dont ligne, aire, barres, nuage de points, camembert et chandelier
• Intègre des fonctions interactives comme mise en surbrillance au survol, infobulles, réticule, gestes de zoom et préréglages de thèmes
• Le package d’intégration React (chartgpu-react) permet aussi une utilisation simple dans un environnement React
• Le rendu accéléré par WebGPU offre des performances de l’ordre de 60 images par seconde, ce qui en fait un outil adapté à la visualisation de données à grande échelle

---

Aperçu

• ChartGPU est une bibliothèque de rendu de graphiques haute performance basée sur WebGPU, capable de visualiser de grandes quantités de données de façon fluide
  • Développée en TypeScript et publiée sous licence MIT
  • Installation possible avec la commande npm install chartgpu

Fonctionnalités principales

• Rendu accéléré par WebGPU pour maintenir un FPS élevé même avec de grands ensembles de données
• Prise en charge de différents types de graphiques : line, area, bar, scatter, pie, candlestick
• Fonctions interactives intégrées : hover highlight, tooltip, crosshair
• Prise en charge des mises à jour par streaming de données (appendData(...))
• Fonction de zoom sur l’axe X (avec gestes et interface à curseur)
• Préréglages de thèmes (dark / light) et prise en charge de thèmes personnalisés

Architecture

• ChartGPU.create(...) gère le canvas et le cycle de vie WebGPU, tandis que le Render Coordinator s’occupe de l’orchestration du rendu
• La structure interne se compose des couches suivantes
  • WebGPU Core : initialisation de l’adaptateur GPU et du périphérique, configuration du canvas
  • Render Coordinator : gestion de la mise en page, des échelles, de l’envoi des données et des passes de rendu
  • GPU Renderers : moteurs de rendu par type de graphique, comme Grid, Area, Bar, Scatter, Line, Pie et Candlestick
  • Shaders (WGSL) : ensemble de fichiers de shaders correspondant à chaque moteur de rendu
  • Chart Sync : fournit une fonction de synchronisation du réticule entre plusieurs graphiques

Intégration React

• Package chartgpu-react disponible pour React
• Installation : npm install chartgpu-react

Compatibilité navigateur

• Nécessite un navigateur avec WebGPU activé
  • Compatible avec Chrome 113+, Edge 113+ et Safari 18+
  • Firefox est actuellement en cours de développement