ChartGPU – WebGPUベースの高性能チャートライブラリ（100万ポイントを60fpsでレンダリング）

 (github.com/ChartGPU)
14 ポイント 投稿者 GN⁺ 2026-01-22 | 1件のコメント | WhatsAppで共有
  • WebGPUを活用して大規模データセットを滑らかにレンダリングするオープンソースのチャートライブラリ
  • TypeScriptで書かれており、ライン・エリア・棒・散布図・円・ローソク足など多様なシリーズタイプをサポート
  • ホバーハイライト、ツールチップ、クロスヘア、ズームジェスチャー、テーマプリセットなどのインタラクション機能を内蔵
  • **React統合パッケージ（chartgpu-react）**により、React環境でも簡単に利用可能
  • WebGPUアクセラレーションレンダリングにより毎秒60フレーム級の性能を提供し、大規模データ可視化に適したツール

概要

  • ChartGPUはWebGPUベースの高性能チャートレンダリングライブラリで、大量のデータを滑らかに可視化できる
    • TypeScriptで開発され、MITライセンスで公開
    • npm install chartgpu コマンドでインストール可能

主な機能

  • WebGPUアクセラレーションレンダリングにより、大規模データセットでも高いFPSを維持
  • 多様なチャートタイプをサポート: line, area, bar, scatter, pie, candlestick
  • インタラクション機能を内蔵: hover highlight, tooltip, crosshair
  • データストリーミング更新をサポート（appendData(...)）
  • X軸ズーム機能を提供（ジェスチャーおよびスライダーUIを含む）
  • テーマプリセット（dark / light）およびカスタムテーマをサポート

アーキテクチャ

  • ChartGPU.create(...) がキャンバスとWebGPUライフサイクルを管理し、レンダリングの調整はRender Coordinatorが担当
  • 内部構造は次のようなレイヤーで構成
    • WebGPU Core: GPUアダプタおよびデバイスの初期化、キャンバス設定
    • Render Coordinator: レイアウト、スケール、データアップロード、レンダーパス管理
    • GPU Renderers: Grid、Area、Bar、Scatter、Line、Pie、Candlestickなど各チャート用レンダラー
    • Shaders(WGSL): 各レンダラーに対応するシェーダーファイルで構成
    • Chart Sync: 複数チャート間のクロスヘア同期機能を提供

React統合

  • React向けパッケージ chartgpu-react を提供
  • インストール: npm install chartgpu-react

ブラウザ対応

  • WebGPUが有効なブラウザが必要
    • Chrome 113+、Edge 113+、Safari 18+ をサポート
    • Firefoxは現在開発中

関連記事

1件のコメント

 
GN⁺ 2026-01-22
Hacker Newsのコメント

  • uPlotのメンテナーです。このプロジェクトが興味深いので、近いうちに詳しく見てみる予定です
    1Mデモを少し見た感想としては、

    • サンプリングによって重要なピークが失われる危険があります。uPlotはサンプリングを行わないため、公平な性能比較のためにはこれを無効にするべきです。関連内容はこのPRを参照
    • 何もしていないときのCPU使用率がかなり高いです。一方、キャンバスベースのソリューションはデータやスケールが変わらなければCPUをほとんど使いません。WebGPUでも更新を一時停止するコードで解決できそうです
    • 複数のチャートを1ページに表示すると、ChromeはGLコンテキストを16個に制限します。Plotlyはvirtual-webglでこれを回避しています
    • [[0,1],[1,3],[2,2]] のようなデータ形式は数百万個の小さな配列を作る必要があるため、カラム指向のデータ構造に変えるのがよいです
      参考までに、uPlotの2Mデータポイントデモもあります
    • 時間を割いて見てくれたことへの感謝を伝えつつ、uPlotはブラウザのチャートが遅い必要はないことを示した大きなインスピレーションの源だったとのこと
      LTTBサンプリングとidle時のCPU問題はいずれももっともな指摘で、サンプリングはデモではデフォルトで有効ですが、sampling: none で公平に比較できます。UIにトグルを追加する予定です。
      停止状態でもレンダーループが回り続ける問題は修正可能です。データ変更やインタラクション時にのみレンダリングするよう改善する予定です
    • Flotの元開発者です。過去に数百万データポイントを処理した際、mip-mappingをクライアント側で実装しました
      ラインチャートの場合、隣接ポイント間のピクセル単位の差に基づいて適応的サンプリングを行えば、ほとんどのポイントを捨てても見た目の違いはありません。
      幅1000ピクセルのチャートに100万ポイントを描くのは非効率です
    • ウェーブレット分解(wavelet decomposition) を使って高周波成分だけを減らし、ピークを維持する方法があるのか気になります。サンプリングより理論的に妥当に見えますが、関連文献を見つけられていません
    • uPlotの熱心なユーザーとして、素晴らしいライブラリを作ってくれてありがとうと伝えています
    • いくつかのプロジェクトで、ピークを失わずにデータをリサンプリングするために、min-maxエリアグラフを併せて描く方法を使っていました。かなりうまく機能しました

  • データポイントが非常に多い場合は、各ピクセルがカバーするポイント数を数えて明るさや色で強度(intensity) を表現するのがよいです
    電子工学のデジタルフォスファ(digital phosphor) 方式に似ています。例はこのリンクを参照

    • 良い提案です。このような密度ベースのレンダリングは重なったデータに効果的です。WebGPUのcompute shaderでポイントをグリッドにbinningし、セルごとにカウントしてから強度としてレンダリングできます。
      特にscatter plotでクラスタ構造を明らかにするのに有用です。アイデア一覧に追加します
    • 同意します。対数スケール強度ヒートマップは大規模データセット（例: 1万本のシリーズのラインチャート）に適しています。必要に応じて詳細へdrill-downできます

  • idle時のCPU使用量パッチを完了しました。
    1Mベンチマーク例に「Benchmark mode」トグルを追加し、ベンチマーク機能を維持しつつ非アクティブ時にも効率よく動作するようにしました
    FPSが0と表示されても正常です — 描画するものがなければフレームは描きません。必要なときには即座に最大速度でレンダリングされます
    コミュニティの熱意あるフィードバックに感動しました

  • ブラウザベースのLink Graph分析ツールを開発中です（webvetted.com/workbench）
    数千のノード/エッジを扱うグラフを可視化する必要があるのですが、1Mポイントを処理できるなら大いに役立ちそうです

    • プロジェクトは素晴らしいと評価しつつ、ChartGPUは現在2Dチャート（ライン、バー、スキャッターなど） に重点を置いていると説明しています
      ただし、WebGPUのレンダリングパターンはグラフ可視化にも十分応用できます。scatterレンダラーはすでに数千インスタンスを処理しているので、エッジを追加することも構造的には難しくありません
      グラフ機能をChartGPUに統合するか、別のGraphGPUライブラリとして分離するか意見を求めています
    • GridinsoftのURLスキャナーでwebvetted.comの信頼度リストについて問い合わせています
    • とても有用だと評価し、今日中に統合すると述べています
    • 潜在的なユーザーとして、Webサイトに製品機能をより詳しく見せるページが不足していると助言しています。製品紹介の強化が必要とのことです

  • 印象的です。最も印象的なデモの1つだと感じました

  • ローソク足向けのラインおよびバンド描画機能を追加するとよいと思います。単にプロットするだけでなく、ポイントを強調できるべきです
    以前、似たものを自分でWebGPUで作ろうとしていましたが、このプロジェクトを見て実際に使ってみたくなりました

  • TimeLineのメンテナーです。ChartGPUのライブストリーミングデモ（リンク）は期待したほど滑らかではありません
    比較のため、メインスレッドで2Dキャンバスとして実装したこのデモのほうがずっと滑らかに動作します

    • ライブラリ全体がAIで生成されたコードのように見えます。
      関連ファイルはwebgpu-pro.mdとwebgpu-expert.mdを参照

  • 1Mポイントの例でスライダーのバグを見つけました（リンク）
    ドラッグ中、スライダーがカーソルの下に留まらず、予期しない距離だけ移動してしまいます

    • これで2回目の同様の報告とのことです。Mac M1のスクロールバーのバグと同じ原因に見えます
      データズームスライダーの座標マッピング問題で、優先度を上げて修正する予定です

  • 祝福しますが、1Mポイントは金融分野では普通の水準です
    現在開発中のレンダリングエンジンは、従来の1000万ポイントから1億ポイントまで性能を引き上げました
    デモ動画を参照

  • Plotlyはすでに何年も前からWebGLで1000万点以上のポイントを処理できました
    同様の機能を持つライブラリは多数あります
    性能デモを参照