ChartGPU – biblioteca de gráficos de alto rendimiento basada en WebGPU (renderiza 1M de puntos a 60 fps)

• WebGPU se aprovecha para renderizar de forma fluida grandes conjuntos de datos en una biblioteca de gráficos de código abierto
• Está escrita en TypeScript y admite varios tipos de series, como línea, área, barras, dispersión, pastel y velas japonesas
• Incluye funciones interactivas como resaltado al pasar el cursor, tooltips, crosshair, gestos de zoom y presets de tema
• A través del paquete de integración para React (chartgpu-react) también se puede usar fácilmente en entornos React
• Con renderizado acelerado por WebGPU, ofrece un rendimiento de alrededor de 60 cuadros por segundo y es una herramienta adecuada para la visualización de grandes volúmenes de datos

---

Descripción general

• ChartGPU es una biblioteca de renderizado de gráficos de alto rendimiento basada en WebGPU que permite visualizar grandes volúmenes de datos de forma fluida
  • Está desarrollada en TypeScript y se publica bajo la licencia MIT
  • Se puede instalar con el comando npm install chartgpu

Características principales

• Mantiene un FPS alto incluso con conjuntos de datos grandes gracias al renderizado acelerado por WebGPU
• Compatibilidad con varios tipos de gráficos: line, area, bar, scatter, pie, candlestick
• Funciones interactivas integradas: hover highlight, tooltip, crosshair
• Compatible con actualizaciones de datos por streaming (appendData(...))
• Ofrece zoom en el eje X (incluye gestos e interfaz de slider)
• Soporta presets de tema (dark / light) y temas personalizados

Arquitectura

• ChartGPU.create(...) administra el canvas y el ciclo de vida de WebGPU, mientras que el ajuste del renderizado corre a cargo del Render Coordinator
• La estructura interna está compuesta por las siguientes capas
  • WebGPU Core: inicialización del adaptador y dispositivo GPU, configuración del canvas
  • Render Coordinator: gestión del layout, escalas, carga de datos y render passes
  • GPU Renderers: renderers de cada tipo de gráfico, como Grid, Area, Bar, Scatter, Line, Pie y Candlestick
  • Shaders (WGSL): conjunto de archivos shader correspondientes a cada renderer
  • Chart Sync: ofrece la función de sincronización de crosshair entre varios gráficos

Integración con React

• Está disponible el paquete para React chartgpu-react
• Instalación: npm install chartgpu-react

Compatibilidad con navegadores

• Se requiere un navegador con WebGPU habilitado
  • Compatible con Chrome 113+, Edge 113+ y Safari 18+
  • Firefox está actualmente en desarrollo

[GN⁺]

Comentarios en Hacker News

• Es el mantenedor principal de uPlot. Dice que este proyecto le pareció interesante y que pronto lo revisará a fondo
  Su impresión rápida tras ver el demo de 1M es que:

  • El muestreo puede eliminar picos importantes. uPlot no hace muestreo, así que para una comparación de rendimiento justa habría que desactivarlo. Ver este PR para más contexto
  • El uso de CPU es bastante alto cuando no está haciendo nada. En cambio, las soluciones basadas en canvas casi no usan CPU si no cambian los datos ni la escala. En WebGPU probablemente se pueda resolver con código que pause las actualizaciones
  • Al mostrar varios gráficos en una misma página, Chrome limita los contextos GL a 16. Plotly evita eso con virtual-webgl
  • Un formato de datos como [[0,1],[1,3],[2,2]] obliga a crear millones de arreglos pequeños, así que convendría cambiarlo a una estructura de datos por columnas
    Como referencia, también existe el demo de 2M puntos de datos de uPlot
  • Agradece que se haya tomado el tiempo de revisarlo y comenta que uPlot fue una gran fuente de inspiración al demostrar que los gráficos en el navegador no tienen por qué ser lentos
    Tanto el muestreo LTTB como el problema del CPU en reposo son observaciones válidas; el muestreo está activado por defecto en el demo, pero se puede hacer una comparación justa con sampling: none. Planea agregar un toggle a la UI.
    El problema de que el bucle de render siga corriendo incluso en estado detenido también se puede corregir. Planea mejorarlo para renderizar solo cuando cambien los datos o haya interacción
  • Es el desarrollador original de Flot. En el pasado implementó mip-mapping del lado del cliente para manejar millones de puntos de datos
    En gráficos de líneas, si se hace un muestreo adaptativo con base en la diferencia en píxeles entre puntos adyacentes, se pueden descartar la mayoría de los puntos sin diferencia visual apreciable.
    Dibujar 1 millón de puntos en un gráfico de 1000 píxeles de ancho es ineficiente
  • Se pregunta si sería posible usar descomposición wavelet para reducir solo los componentes de alta frecuencia y conservar los picos. En teoría parece más sólido que el muestreo, pero no ha encontrado literatura al respecto
  • Como usuario entusiasta de uPlot, agradece por haber creado una biblioteca tan excelente
  • En varios proyectos, para remuestrear datos sin perder picos, ha usado el enfoque de dibujar también una gráfica de banda min-max. Le ha funcionado bastante bien

• Cuando hay muchísimos puntos de datos, conviene contar cuántos puntos cubre cada píxel y representar la intensidad con brillo o color
  Es similar al enfoque de digital phosphor en electrónica. Véase este enlace como ejemplo

  • Le parece una gran sugerencia. Este tipo de renderizado basado en densidad funciona bien con datos superpuestos. Con el compute shader de WebGPU se pueden agrupar los puntos en una cuadrícula, contar por celda y luego renderizar según la intensidad.
    Es especialmente útil para mostrar la estructura de clústeres en scatter plots. Lo agrega a la lista de ideas
  • Está de acuerdo. Un heatmap de intensidad en escala logarítmica encaja bien con datasets masivos, por ejemplo gráficos de líneas con 10 mil series. Si hace falta, luego se puede hacer drill-down al detalle

• Ya completó el parche para el uso de CPU en idle.
  Agregó un toggle de “Benchmark mode” al ejemplo de benchmark de 1M para conservar la funcionalidad de benchmark, pero permitiendo operar eficientemente cuando está inactivo
  Es normal que el FPS marque 0: si no hay nada que renderizar, no se dibujan frames. Si hace falta, renderiza de inmediato a máxima velocidad
  Dice que le impresionó la apasionada retroalimentación de la comunidad

• Está desarrollando una herramienta de análisis de Link Graph basada en navegador (webvetted.com/workbench)
  Necesita visualizar grafos con miles de nodos y aristas, así que poder manejar 1M de puntos podría ser de gran ayuda

  • Responde que el proyecto se ve genial y explica que ChartGPU hoy está enfocado en gráficos 2D como líneas, barras y scatter
    Aun así, los patrones de renderizado con WebGPU también pueden aplicarse bien a la visualización de grafos. El renderer de scatter ya maneja miles de instancias, así que agregar aristas no sería estructuralmente difícil
    Pregunta si convendría integrar funciones de grafos en ChartGPU o separarlas en una biblioteca GraphGPU independiente
  • Pregunta por la lista de confianza de webvetted.com en el escáner de URL de Gridinsoft
  • Dice que sería muy útil y que lo integrará hoy mismo
  • Como posible usuario, aconseja que al sitio web le falta una página que muestre con más detalle las funciones del producto. Comenta que hace falta reforzar la presentación del producto

• Es impresionante. Le pareció uno de los demos más impresionantes

• Estaría bien agregar una función para dibujar líneas y bandas para velas. No solo debería poder graficar, sino también resaltar puntos
  Antes había intentado hacer algo parecido él mismo con WebGPU, y este proyecto le dio ganas de probarlo directamente

• Es el mantenedor de TimeLine. Dice que el demo de live streaming de ChartGPU (enlace) no es tan fluido como esperaba
  Para comparar, este demo implementado con canvas 2D en el hilo principal funciona con mucha más suavidad

  • Toda la biblioteca parece código generado por IA.
    Véanse webgpu-pro.md y webgpu-expert.md

• Encontró un bug en el slider del ejemplo de 1M puntos (enlace)
  Mientras se arrastra, el slider no se queda debajo del cursor y se mueve una distancia inesperada

  • Comenta que es la segunda vez que le reportan el mismo problema. Parece tener la misma causa que el bug de la barra de desplazamiento en Mac M1
    Es un problema de mapeo de coordenadas en el slider de zoom de datos, y planea corregirlo con alta prioridad

• Lo felicita, pero dice que 1M de puntos es algo común en finanzas
  El motor de renderizado que está desarrollando actualmente elevó el rendimiento de 10 millones de puntos hasta 100 millones de puntos
  Véase el video demo

• Plotly ya podía manejar decenas de millones de puntos con WebGL desde hace varios años
  Hay muchas bibliotecas con capacidades similares
  Véase el demo de rendimiento