ChartGPU – biblioteca de gráficos de alto desempenho baseada em WebGPU (renderiza 1M de pontos a 60 fps)

• WebGPU é usado para renderizar grandes conjuntos de dados com fluidez em uma biblioteca de gráficos open source
• Escrita em TypeScript, oferece suporte a vários tipos de série, como linha, área, barras, dispersão, pizza e candlestick
• Inclui recursos de interação integrados, como realce ao passar o mouse, tooltip, crosshair, gestos de zoom e presets de tema
• Com o pacote de integração para React (chartgpu-react), também pode ser usada facilmente em ambientes React
• Com renderização acelerada por WebGPU, entrega desempenho na faixa de 60 quadros por segundo, sendo uma ferramenta adequada para visualização de grandes volumes de dados

---

Visão geral

• ChartGPU é uma biblioteca de renderização de gráficos de alto desempenho baseada em WebGPU, capaz de visualizar grandes volumes de dados com suavidade
  • Desenvolvida em TypeScript e distribuída sob a licença MIT
  • Pode ser instalada com o comando npm install chartgpu

Principais recursos

• Mantém FPS alto mesmo em grandes conjuntos de dados por meio de renderização acelerada por WebGPU
• Suporte a vários tipos de gráfico: line, area, bar, scatter, pie, candlestick
• Recursos de interação integrados: hover highlight, tooltip, crosshair
• Suporte a atualizações de dados em streaming (appendData(...))
• Recurso de zoom no eixo X (incluindo gestos e UI com slider)
• Suporte a presets de tema (dark / light) e temas personalizados

Arquitetura

• ChartGPU.create(...) gerencia o canvas e o ciclo de vida do WebGPU, enquanto o ajuste da renderização fica a cargo do Render Coordinator
• A estrutura interna é composta pelas seguintes camadas
  • WebGPU Core: inicialização do adaptador e do dispositivo GPU, configuração do canvas
  • Render Coordinator: layout, escala, upload de dados e gerenciamento de render pass
  • GPU Renderers: renderizadores de cada tipo de gráfico, como Grid, Area, Bar, Scatter, Line, Pie e Candlestick
  • Shaders(WGSL): conjunto de arquivos de shader correspondentes a cada renderizador
  • Chart Sync: oferece sincronização de crosshair entre vários gráficos

Integração com React

• Pacote para React chartgpu-react disponível
• Instalação: npm install chartgpu-react

Suporte a navegadores

• Requer um navegador com WebGPU habilitado
  • Suporte para Chrome 113+, Edge 113+ e Safari 18+
  • Firefox está atualmente em desenvolvimento

[GN⁺]

Comentários no Hacker News

• Sou o mantenedor do uPlot. Este projeto parece interessante, então devo analisá-lo a fundo em breve
  Pela impressão rápida que tive do demo com 1M,

  • a amostragem pode remover picos importantes. O uPlot não faz amostragem, então, para uma comparação de desempenho justa, isso precisa ser desativado. Veja este PR
  • o uso de CPU é bem alto mesmo quando nada está acontecendo. Em contrapartida, soluções baseadas em canvas quase não usam CPU se os dados ou a escala não mudam. Parece que no WebGPU isso também pode ser resolvido com código para pausar as atualizações
  • ao exibir vários gráficos em uma mesma página, o Chrome limita a 16 contextos GL. O Plotly contorna isso com virtual-webgl
  • um formato de dados como [[0,1],[1,3],[2,2]] exige criar milhões de pequenos arrays, então seria melhor mudar para uma estrutura de dados baseada em colunas
    Aliás, o uPlot também tem um demo com 2M de pontos de dados
  • Agradece por terem tirado tempo para analisar e diz que o uPlot foi uma grande fonte de inspiração, por provar que gráficos no navegador não precisam ser lentos
    Tanto a amostragem LTTB quanto o problema de CPU em idle são observações válidas. A amostragem vem ativada por padrão no demo, mas é possível fazer uma comparação justa com sampling: none. Ele pretende adicionar um toggle na UI.
    O problema de o loop de renderização continuar rodando mesmo quando está parado pode ser corrigido. O plano é melhorar isso para renderizar apenas quando houver mudança nos dados ou interação
  • Sou o desenvolvedor original do Flot. No passado, ao lidar com milhões de pontos de dados, implementei mip-mapping no lado do cliente
    No caso de gráficos de linha, se você fizer amostragem adaptativa com base na diferença em pixels entre pontos adjacentes, pode descartar a maior parte dos pontos sem diferença visual perceptível.
    Desenhar 1 milhão de pontos em um gráfico de 1000 pixels de largura é ineficiente
  • Fico me perguntando se não haveria uma forma de usar decomposição por wavelets (wavelet decomposition) para reduzir apenas os componentes de alta frequência e preservar os picos. Em teoria parece mais correto do que amostragem, mas não encontrei literatura sobre isso
  • Como usuário entusiasmado do uPlot, agradeço por criar uma biblioteca tão boa
  • Em vários projetos, para reamostrar dados sem perder picos, usei a abordagem de desenhar junto um gráfico de área min-max. Funcionou muito bem

• Quando há muitos pontos de dados, uma boa abordagem é contar quantos pontos cada pixel cobre e representar a intensidade por brilho ou cor
  Isso é parecido com o método de fósforo digital (digital phosphor) da eletrônica. Veja este link

  • Boa sugestão. Esse tipo de renderização baseada em densidade é eficaz para dados sobrepostos. Com compute shaders do WebGPU, dá para fazer o binning dos pontos em uma grade, contar por célula e então renderizar pela intensidade.
    Isso é especialmente útil em scatter plots para revelar a estrutura de clusters. Vou adicionar à lista de ideias
  • Concordo. Um heatmap de intensidade em escala logarítmica é adequado para datasets grandes, como um gráfico de linhas com 10 mil séries. Se necessário, depois dá para fazer drill-down nos detalhes

• Concluí o patch de uso de CPU em idle.
  Adicionei um toggle de “Benchmark mode” ao exemplo de benchmark com 1M, para manter a funcionalidade de benchmark e ao mesmo tempo operar com eficiência quando estiver inativo
  É normal o FPS aparecer como 0 — se não há nada para renderizar, nenhum frame é desenhado. Quando necessário, a renderização volta imediatamente na velocidade máxima
  Fiquei impressionado com o feedback apaixonado da comunidade

• Estou desenvolvendo uma ferramenta de análise de Link Graph no navegador (webvetted.com/workbench)
  Preciso visualizar grafos com milhares de nós/arestas, então, se ela consegue lidar com 1M de pontos, isso pode ajudar bastante

  • Diz que o projeto parece ótimo e explica que o ChartGPU está focado no momento em gráficos 2D (linhas, barras, scatter etc.)
    Ainda assim, os padrões de renderização com WebGPU podem ser aplicados muito bem à visualização de grafos. O renderizador de scatter já lida com milhares de instâncias, então adicionar arestas não seria estruturalmente difícil
    Pergunta se faz mais sentido integrar recursos de grafo ao ChartGPU ou separar isso em uma biblioteca GraphGPU
  • Pergunta sobre a lista de reputação de webvetted.com no scanner de URL da Gridinsoft
  • Avalia como muito útil e diz que vai integrar isso hoje mesmo
  • Como usuário em potencial, aconselha que falta no site uma página mostrando com mais detalhes o que o produto faz. Diz que é preciso fortalecer a apresentação do produto

• Impressionante. Parece ser um dos demos mais impressionantes

• Seria bom adicionar um recurso de desenho de linhas e bandas para candlestick. Não basta apenas plotar; também é preciso poder destacar pontos
  Eu já tinha tentado fazer algo parecido em WebGPU por conta própria, e este projeto me deixou com vontade de testá-lo diretamente

• Sou o mantenedor do TimeLine. O demo de streaming ao vivo do ChartGPU (link) não parece tão fluido quanto eu esperava
  Para comparar, este demo implementado com canvas 2D na thread principal roda com muito mais suavidade

  • A biblioteca inteira parece código gerado por IA.
    Veja os arquivos webgpu-pro.md e webgpu-expert.md

• Encontrou um bug no slider do exemplo com 1M de pontos (link)
  Durante o arraste, o slider não fica sob o cursor e se move uma distância inesperada

  • Diz que esta é a segunda vez que recebe o mesmo relato. Parece ter a mesma causa do bug de scrollbar no Mac M1
    É um problema de mapeamento de coordenadas no slider de zoom de dados, e ele pretende elevar a prioridade da correção

• Parabéns, mas 1M de pontos é algo comum no setor financeiro
  O motor de renderização que estou desenvolvendo elevou o desempenho dos 10 milhões de pontos anteriores para 100 milhões de pontos
  Veja o vídeo de demonstração

• O Plotly já conseguia lidar com mais de dez milhões de pontos com WebGL há anos
  Há muitas bibliotecas com funcionalidades parecidas
  Veja o demo de desempenho