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

 (github.com/ChartGPU)
14P by GN⁺ | ★ favorite | 댓글 1개
  • 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는 현재 개발 중
GeekNews Weekly에 포함된 글입니다. 에디터 코멘트 보기

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • uPlot의 메인테이너임. 이번 프로젝트가 흥미로워서 곧 깊이 살펴볼 예정임
    1M 데모를 잠깐 본 소감으로는,

    • 샘플링이 중요한 피크를 제거할 위험이 있음. uPlot은 샘플링을 하지 않으므로 공정한 성능 비교를 위해선 이를 꺼야 함. 관련 내용은 이 PR 참고
    • 아무것도 하지 않을 때 CPU 사용량이 꽤 높음. 반면 캔버스 기반 솔루션은 데이터나 스케일이 바뀌지 않으면 CPU를 거의 쓰지 않음. WebGPU에서도 업데이트를 일시 중단하는 코드로 해결 가능할 듯함
    • 여러 차트를 한 페이지에 띄울 때 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의 신뢰도 목록에 대해 문의함
    • 매우 유용하다고 평가하며, 오늘 바로 통합하겠다고 함
    • 잠재적 사용자로서, 웹사이트에 제품 기능을 더 자세히 보여주는 페이지가 부족하다고 조언함. 제품 소개 강화가 필요하다고 함

  • 인상적임. 가장 인상적인 데모 중 하나라고 느낌

  • 캔들스틱용 라인 및 밴드 그리기 기능을 추가하면 좋겠음. 단순히 플로팅뿐 아니라 포인트를 강조할 수 있어야 함
    예전에 비슷한 걸 직접 WebGPU로 만들려 했는데, 이번 프로젝트를 보고 직접 써보고 싶어짐

  • TimeLine의 메인테이너임. ChartGPU의 라이브 스트리밍 데모(링크)가 생각보다 매끄럽지 않음
    비교를 위해, 메인 스레드에서 2D 캔버스로 구현한 이 데모가 훨씬 부드럽게 동작함

  • 1M 포인트 예제의 슬라이더 버그를 발견함 (링크)
    드래그 중 슬라이더가 커서 아래에 머물지 않고 예상치 못한 거리로 이동함

    • 두 번째로 같은 문제를 보고받았다고 함. Mac M1의 스크롤바 버그와 동일한 원인으로 보임
      데이터 줌 슬라이더의 좌표 매핑 문제로, 우선순위를 높여 수정할 예정임

  • 축하하지만, 1M 포인트는 금융 분야에서는 평범한 수준임
    현재 개발 중인 렌더링 엔진은 기존 1천만 포인트에서 1억 포인트까지 성능을 끌어올렸음
    데모 영상 참고

  • Plotly는 이미 수년 전부터 WebGL로 천만 개 이상의 포인트를 처리할 수 있었음
    비슷한 기능을 가진 라이브러리가 많음
    성능 데모 참고

답변달기