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

 (github.com/ChartGPU)
14 points par GN⁺ 2026-01-22 | 1 commentaires | Partager sur WhatsApp
  • 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
    Publicité

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

À lire aussi

1 commentaires

 
GN⁺ 2026-01-22
Avis sur Hacker News

  • Je suis le mainteneur de uPlot. Ce projet m’intéresse, donc je vais bientôt l’examiner en profondeur.
    Après un rapide coup d’œil à la démo 1M, voici mon impression :

    • l’échantillonnage risque de supprimer des pics importants. uPlot n’effectue pas d’échantillonnage, donc pour une comparaison de performance équitable, il faut le désactiver. Voir cette PR à ce sujet
    • l’utilisation CPU est assez élevée quand il ne se passe rien. À l’inverse, une solution basée sur canvas n’utilise pratiquement pas de CPU si les données ou l’échelle ne changent pas. Même avec WebGPU, cela semble corrigeable avec du code qui suspend les mises à jour
    • quand plusieurs graphiques sont affichés sur une même page, Chrome limite les contextes GL à 16. Plotly contourne cela avec virtual-webgl
    • un format de données comme [[0,1],[1,3],[2,2]] oblige à créer des millions de petits tableaux, donc il vaudrait mieux passer à une structure de données en colonnes
      À noter que uPlot a aussi une démo à 2M de points de données
    • Il remercie d’avoir pris le temps d’y jeter un œil et dit que uPlot a été une grande source d’inspiration, en prouvant que les graphiques dans le navigateur n’ont pas besoin d’être lents
      Les remarques sur l’échantillonnage LTTB et sur le CPU au repos sont toutes deux pertinentes ; l’échantillonnage est activé par défaut dans la démo, mais on peut faire une comparaison équitable avec sampling: none. Il prévoit d’ajouter un toggle dans l’interface.
      Le problème de boucle de rendu qui continue de tourner même à l’arrêt peut être corrigé. Il prévoit de faire en sorte que le rendu ne se déclenche qu’en cas de changement de données ou d’interaction
    • Je suis le développeur original de Flot. À l’époque, pour traiter des millions de points de données, j’avais implémenté du mip-mapping côté client
      Pour un graphique en ligne, si on fait un échantillonnage adaptatif selon la différence en pixels entre points adjacents, on peut supprimer la plupart des points sans différence visuelle notable.
      Dessiner 1 million de points sur un graphique large de 1000 pixels est inefficace
    • Je me demande s’il serait possible d’utiliser une décomposition en ondelettes (wavelet decomposition) pour ne réduire que les hautes fréquences tout en conservant les pics. En théorie, cela semble plus justifié que l’échantillonnage, mais je n’ai pas trouvé de littérature à ce sujet
    • En tant qu’utilisateur enthousiaste de uPlot, merci d’avoir créé une bibliothèque aussi excellente
    • Sur plusieurs projets, pour rééchantillonner les données sans perdre les pics, nous avons utilisé une approche consistant à dessiner aussi un graphique de zone min-max. Cela fonctionnait plutôt bien

  • Quand il y a énormément de points de données, il vaut mieux compter combien de points recouvre chaque pixel et représenter l’intensité par la luminosité ou la couleur
    C’est similaire à l’approche digital phosphor en électronique. Voir ce lien pour un exemple

    • Bonne suggestion. Ce type de rendu basé sur la densité est efficace pour les données qui se chevauchent. Avec un compute shader WebGPU, on peut faire du binning des points dans une grille, compter par cellule, puis rendre selon l’intensité.
      C’est particulièrement utile pour révéler la structure des clusters dans un scatter plot. J’ajoute l’idée à la liste
    • D’accord. Une heatmap d’intensité en échelle logarithmique convient bien aux très grands jeux de données, par exemple un graphique en lignes avec 10 000 séries. On peut ensuite drill-down si nécessaire

  • Le patch d’utilisation CPU au repos est terminé.
    Un toggle « Benchmark mode » a été ajouté à l’exemple de benchmark 1M, afin de conserver les fonctions de benchmark tout en restant efficace à l’état inactif
    Il est normal que le FPS affiche 0 — s’il n’y a rien à rendre, aucune frame n’est dessinée. Dès qu’il faut rendre quelque chose, cela repart immédiatement à vitesse maximale
    J’ai été touché par les retours passionnés de la communauté

  • Je développe un outil d’analyse de Link Graph dans le navigateur (webvetted.com/workbench)
    Je dois visualiser des graphes avec des milliers de nœuds et d’arêtes, donc si cela peut traiter 1M de points, ce serait d’une grande aide

    • Il trouve le projet très intéressant et explique que ChartGPU se concentre actuellement sur les graphiques 2D (lignes, barres, scatter, etc.)
      Cela dit, les patterns de rendu WebGPU peuvent très bien s’appliquer à la visualisation de graphes. Le moteur de scatter gère déjà des milliers d’instances, donc ajouter les arêtes ne serait pas structurellement difficile
      Il demande s’il vaudrait mieux intégrer les fonctions de graphe à ChartGPU ou les séparer dans une bibliothèque GraphGPU dédiée
    • Il pose une question sur la liste de confiance de webvetted.com dans le scanner d’URL de Gridinsoft
    • Il juge cela très utile et dit qu’il va l’intégrer dès aujourd’hui
    • En tant qu’utilisateur potentiel, il conseille qu’il manque sur le site une page montrant plus en détail les fonctionnalités du produit. Il estime qu’il faut mieux présenter le produit

  • Impressionnant. J’ai trouvé que c’était l’une des démos les plus impressionnantes

  • Ce serait bien d’ajouter une fonction de tracé de lignes et de bandes pour les chandeliers. Il ne faut pas seulement pouvoir tracer, mais aussi mettre certains points en évidence
    J’avais déjà essayé de faire quelque chose de similaire moi-même avec WebGPU, et ce projet me donne envie de l’essayer directement

  • Je suis le mainteneur de TimeLine. La démo de streaming live de ChartGPU (lien) n’est pas aussi fluide que prévu
    À titre de comparaison, cette démo implémentée en canvas 2D sur le thread principal tourne beaucoup plus fluidement

  • Quelqu’un a trouvé un bug du slider dans l’exemple 1M de points (lien)
    Pendant le glisser-déposer, le slider ne reste pas sous le curseur et se déplace d’une distance inattendue

    • Il dit que c’est la deuxième fois qu’on lui signale ce problème. Cela semble avoir la même cause que le bug de scrollbar sur Mac M1
      Il s’agit d’un problème de mapping des coordonnées du slider de zoom sur les données, et il va le corriger en priorité

  • Félicitations, mais 1M de points reste banal dans la finance
    Le moteur de rendu en cours de développement a déjà fait passer les performances de 10 millions de points à 100 millions de points
    Voir la vidéo de démo

  • Plotly pouvait déjà traiter plus de dix millions de points en WebGL il y a plusieurs années
    Il existe de nombreuses bibliothèques aux fonctionnalités similaires
    Voir la démo de performance