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

> Clean Markdown view of GeekNews topic #26027. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26027](https://news.hada.io/topic?id=26027)
- GeekNews Markdown: [https://news.hada.io/topic/26027.md](https://news.hada.io/topic/26027.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-01-22T09:43:27+09:00
- Updated: 2026-01-22T09:43:27+09:00
- Original source: [github.com/ChartGPU](https://github.com/ChartGPU/ChartGPU)
- Points: 14
- Comments: 1

## Summary

**WebGPU 가속 렌더링**을 활용해 수백만 포인트 규모의 데이터를 초당 60프레임으로 시각화하는 오픈소스 차트 라이브러리입니다. 라인·막대·산점도 등 다양한 시리즈 타입과 **툴팁·크로스헤어·줌 제스처** 같은 상호작용 기능을 기본 제공하며, React 환경에서는 `chartgpu-react` 패키지로 손쉽게 통합할 수 있습니다. 대규모 실시간 데이터 시각화가 필요한 웹 애플리케이션에 적합할 듯 하네요.

## Topic Body

- **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**](https://github.com/ChartGPU/chartgpu-react) 제공  
- 설치: `npm install chartgpu-react`  
  
### 브라우저 지원  
- **WebGPU 활성화 브라우저** 필요  
  - Chrome 113+, Edge 113+, Safari 18+ 지원  
  - Firefox는 현재 개발 중

## Comments



### Comment 49661

- Author: neo
- Created: 2026-01-22T09:43:27+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46706528) 
- uPlot의 메인테이너임. 이번 프로젝트가 흥미로워서 곧 **깊이 살펴볼 예정**임  
  1M 데모를 잠깐 본 소감으로는,  
  - 샘플링이 중요한 **피크를 제거할 위험**이 있음. uPlot은 샘플링을 하지 않으므로 공정한 성능 비교를 위해선 이를 꺼야 함. 관련 내용은 [이 PR](https://github.com/leeoniya/uPlot/pull/1025) 참고  
  - 아무것도 하지 않을 때 CPU 사용량이 꽤 높음. 반면 캔버스 기반 솔루션은 데이터나 스케일이 바뀌지 않으면 CPU를 거의 쓰지 않음. WebGPU에서도 업데이트를 일시 중단하는 코드로 해결 가능할 듯함  
  - 여러 차트를 한 페이지에 띄울 때 Chrome은 **GL 컨텍스트를 16개로 제한**함. Plotly는 [virtual-webgl](https://github.com/greggman/virtual-webgl)로 이를 우회함  
  - `[[0,1],[1,3],[2,2]]` 같은 데이터 포맷은 수백만 개의 작은 배열을 만들어야 하므로 **컬럼 기반 데이터 구조**로 바꾸는 게 좋음  
  참고로 uPlot의 [2M 데이터포인트 데모](https://leeoniya.github.io/uPlot/bench/uPlot-10M.html)도 있음
  - 시간을 내서 봐줘서 고맙다는 인사와 함께, uPlot이 브라우저 차트가 느릴 필요 없다는 걸 증명한 **큰 영감의 원천**이었다고 함  
    LTTB 샘플링과 idle CPU 문제 모두 타당한 지적이며, 샘플링은 데모에서 기본 활성화되어 있지만 ‘sampling: none’으로 공정 비교 가능함. UI에 토글을 추가할 예정임.  
    정지 상태에서도 렌더 루프가 계속 도는 문제는 수정 가능함. 데이터 변경이나 인터랙션 시에만 렌더하도록 개선할 계획임  
  - Flot의 원 개발자임. 과거 수백만 데이터포인트를 처리할 때 **mip-mapping**을 클라이언트 측에서 구현했음  
    라인 차트의 경우, 인접 포인트 간 **픽셀 단위 차이**를 기준으로 적응형 샘플링을 하면 대부분의 포인트를 버려도 시각적으로 차이가 없음.  
    1000픽셀 폭의 차트에 100만 포인트를 그리는 건 비효율적임  
  - **웨이블릿 분해(wavelet decomposition)** 를 이용해 고주파 성분만 줄이고 피크를 유지하는 방법이 있을지 궁금함. 샘플링보다 이론적으로 더 타당해 보이지만 관련 문헌을 찾지 못했음  
  - uPlot의 **열렬한 사용자**로서, 훌륭한 라이브러리를 만들어줘서 감사하다고 전함  
  - 여러 프로젝트에서 피크 손실 없이 데이터를 리샘플링하기 위해, **min-max 영역 그래프**를 함께 그리는 방식을 사용했음. 꽤 잘 작동했음

- 데이터포인트가 매우 많을 때는, 각 픽셀이 커버하는 포인트 수를 세어 **밝기나 색상으로 강도(intensity)** 를 표현하는 게 좋음  
  전자공학의 **디지털 포스포(digital phosphor)** 방식과 유사함. 예시는 [이 링크](https://www.hit.bme.hu/~papay/edu/DSOdisp/gradient.htm) 참고
  - 좋은 제안임. 이런 **밀도 기반 렌더링**은 중첩된 데이터에 효과적임. WebGPU의 compute shader로 포인트를 그리드에 binning하고 셀별로 카운트한 뒤 강도로 렌더링할 수 있음.  
    특히 scatter plot에서 클러스터 구조를 드러내는 데 유용함. 아이디어 목록에 추가함  
  - 동의함. **로그 스케일 강도 히트맵**이 대규모 데이터셋(예: 1만 개 시리즈 라인 차트)에 적합함. 필요 시 세부로 drill-down 가능함

- **idle CPU 사용량 패치**를 완료했음.  
  1M 벤치마크 예제에 “Benchmark mode” 토글을 추가해, 벤치마크 기능을 유지하면서도 비활성 상태에서 효율적으로 동작하도록 함  
  FPS가 0으로 표시되어도 정상임 — 렌더할 게 없으면 프레임을 그리지 않음. 필요 시에는 즉시 최대 속도로 렌더됨  
  커뮤니티의 **열정적인 피드백**에 감동받았음

- 브라우저 기반 **Link Graph 분석 도구**를 개발 중임 ([webvetted.com/workbench](https://webvetted.com/workbench))  
  수천 개의 노드/엣지를 다루는 그래프를 시각화해야 하는데, 1M 포인트를 처리할 수 있다면 큰 도움이 될 것 같음
  - 프로젝트가 멋지다고 평가하며, ChartGPU는 현재 **2D 차트(라인, 바, 스캐터 등)** 에 초점을 맞추고 있다고 설명함  
    다만 WebGPU 렌더링 패턴은 그래프 시각화에도 잘 적용될 수 있음. scatter 렌더러가 이미 수천 개 인스턴스를 처리하므로, 엣지를 추가하는 것도 구조적으로 어렵지 않음  
    그래프 기능을 ChartGPU에 통합할지, 별도 **GraphGPU** 라이브러리로 분리할지 의견을 묻고 있음  
  - [Gridinsoft의 URL 스캐너](https://gridinsoft.com/online-virus-scanner/url/webvetted-com)에서 webvetted.com의 **신뢰도 목록**에 대해 문의함  
  - 매우 유용하다고 평가하며, **오늘 바로 통합**하겠다고 함  
  - 잠재적 사용자로서, 웹사이트에 제품 기능을 더 자세히 보여주는 페이지가 부족하다고 조언함. **제품 소개 강화**가 필요하다고 함

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

- TimeLine의 메인테이너임. ChartGPU의 **라이브 스트리밍 데모**([링크](https://chartgpu.github.io/ChartGPU/examples/live-streaming/index.html))가 생각보다 매끄럽지 않음  
  비교를 위해, 메인 스레드에서 2D 캔버스로 구현한 [이 데모](https://crisislab-timeline.pages.dev/examples/live-with-plugins/)가 훨씬 부드럽게 동작함
  - 라이브러리 전체가 **AI로 생성된 코드**처럼 보임.  
    관련 파일은 [webgpu-pro.md](https://github.com/ChartGPU/ChartGPU/blob/main/.cursor/agents/webgpu-pro.md)와 [webgpu-expert.md](https://github.com/ChartGPU/ChartGPU/blob/main/.claude/agents/webgpu-expert.md) 참고

- 1M 포인트 예제의 **슬라이더 버그**를 발견함 ([링크](https://chartgpu.github.io/ChartGPU/examples/million-points/index.html))  
  드래그 중 슬라이더가 커서 아래에 머물지 않고 **예상치 못한 거리로 이동**함
  - 두 번째로 같은 문제를 보고받았다고 함. Mac M1의 스크롤바 버그와 동일한 원인으로 보임  
    **데이터 줌 슬라이더의 좌표 매핑 문제**로, 우선순위를 높여 수정할 예정임

- 축하하지만, **1M 포인트는 금융 분야에서는 평범한 수준**임  
  현재 개발 중인 렌더링 엔진은 기존 1천만 포인트에서 **1억 포인트**까지 성능을 끌어올렸음  
  [데모 영상](https://x.com/TapeSurfApp/status/2009654004893339903?s=20) 참고

- Plotly는 이미 수년 전부터 WebGL로 **천만 개 이상의 포인트**를 처리할 수 있었음  
  비슷한 기능을 가진 라이브러리가 많음  
  [성능 데모](https://plotly.com/python/performance/) 참고