ChartGPU – WebGPU 기반 고성능 차트 라이브러리 (1M 포인트를 60fps로 렌더링)

• 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는 현재 개발 중