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 라이브러리로 분리할지 의견을 묻고 있음
Hacker News 의견들
uPlot의 메인테이너임. 이번 프로젝트가 흥미로워서 곧 깊이 살펴볼 예정임
1M 데모를 잠깐 본 소감으로는,
[[0,1],[1,3],[2,2]]같은 데이터 포맷은 수백만 개의 작은 배열을 만들어야 하므로 컬럼 기반 데이터 구조로 바꾸는 게 좋음참고로 uPlot의 2M 데이터포인트 데모도 있음
LTTB 샘플링과 idle CPU 문제 모두 타당한 지적이며, 샘플링은 데모에서 기본 활성화되어 있지만 ‘sampling: none’으로 공정 비교 가능함. UI에 토글을 추가할 예정임.
정지 상태에서도 렌더 루프가 계속 도는 문제는 수정 가능함. 데이터 변경이나 인터랙션 시에만 렌더하도록 개선할 계획임
라인 차트의 경우, 인접 포인트 간 픽셀 단위 차이를 기준으로 적응형 샘플링을 하면 대부분의 포인트를 버려도 시각적으로 차이가 없음.
1000픽셀 폭의 차트에 100만 포인트를 그리는 건 비효율적임
데이터포인트가 매우 많을 때는, 각 픽셀이 커버하는 포인트 수를 세어 밝기나 색상으로 강도(intensity) 를 표현하는 게 좋음
전자공학의 디지털 포스포(digital phosphor) 방식과 유사함. 예시는 이 링크 참고
특히 scatter plot에서 클러스터 구조를 드러내는 데 유용함. 아이디어 목록에 추가함
idle CPU 사용량 패치를 완료했음.
1M 벤치마크 예제에 “Benchmark mode” 토글을 추가해, 벤치마크 기능을 유지하면서도 비활성 상태에서 효율적으로 동작하도록 함
FPS가 0으로 표시되어도 정상임 — 렌더할 게 없으면 프레임을 그리지 않음. 필요 시에는 즉시 최대 속도로 렌더됨
커뮤니티의 열정적인 피드백에 감동받았음
브라우저 기반 Link Graph 분석 도구를 개발 중임 (webvetted.com/workbench)
수천 개의 노드/엣지를 다루는 그래프를 시각화해야 하는데, 1M 포인트를 처리할 수 있다면 큰 도움이 될 것 같음
다만 WebGPU 렌더링 패턴은 그래프 시각화에도 잘 적용될 수 있음. scatter 렌더러가 이미 수천 개 인스턴스를 처리하므로, 엣지를 추가하는 것도 구조적으로 어렵지 않음
그래프 기능을 ChartGPU에 통합할지, 별도 GraphGPU 라이브러리로 분리할지 의견을 묻고 있음
인상적임. 가장 인상적인 데모 중 하나라고 느낌
캔들스틱용 라인 및 밴드 그리기 기능을 추가하면 좋겠음. 단순히 플로팅뿐 아니라 포인트를 강조할 수 있어야 함
예전에 비슷한 걸 직접 WebGPU로 만들려 했는데, 이번 프로젝트를 보고 직접 써보고 싶어짐
TimeLine의 메인테이너임. ChartGPU의 라이브 스트리밍 데모(링크)가 생각보다 매끄럽지 않음
비교를 위해, 메인 스레드에서 2D 캔버스로 구현한 이 데모가 훨씬 부드럽게 동작함
관련 파일은 webgpu-pro.md와 webgpu-expert.md 참고
1M 포인트 예제의 슬라이더 버그를 발견함 (링크)
드래그 중 슬라이더가 커서 아래에 머물지 않고 예상치 못한 거리로 이동함
데이터 줌 슬라이더의 좌표 매핑 문제로, 우선순위를 높여 수정할 예정임
축하하지만, 1M 포인트는 금융 분야에서는 평범한 수준임
현재 개발 중인 렌더링 엔진은 기존 1천만 포인트에서 1억 포인트까지 성능을 끌어올렸음
데모 영상 참고
Plotly는 이미 수년 전부터 WebGL로 천만 개 이상의 포인트를 처리할 수 있었음
비슷한 기능을 가진 라이브러리가 많음
성능 데모 참고