HTML Canvas로 기가 픽셀 데이터 시각화하기

문제 상황

• 27.5기가픽셀 병리 슬라이드의 AI 예측 결과를 웹에서 확대·축소·이동하며 탐색해야 하는 요구
• 빈번한 시점 이동과 다중 조직·구조·세포 레이어 표시 중 프레임 저하 최소화 필요

구조와 흐름

• React 기반 UI와 OpenSeadragon 기반 타일 슬라이드 뷰어 위에 Canvas 시각화 레이어 구성
• Tissue는 색상별 bitmap mask를 이미지로 전송한 뒤 픽셀 값을 분리해 마스크 생성
• Structure·Cell은 Polygon·Point 데이터를 MessagePack으로 전송하고 좌표 기반 인덱스에 적재

선택 이유

• Tissue 데이터는 이미지 코덱 압축, 브라우저 네이티브 디코딩, 이미지 뷰어 기반 디버깅 활용
• Tissue는 OffscreenCanvas 사전 렌더링과 ImageBitmap 합성으로 시점 변경 비용 절감
• Structure·Cell은 K-d 트리로 현재 뷰포트 요소만 조회해 픽셀 정밀도와 메모리 효율 확보

성능/운영 포인트

• 기가픽셀 Canvas 메모리 한계를 피하기 위한 Tissue downsampling 적용
• 저배율 Structure·Cell 미표시와 수 ms 수준의 뷰포트 내 요소 렌더링
• OffscreenCanvas와 웹 워커 활용으로 메인 UI 스레드 반응성 유지