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

• 병리학 분야에서 디지털화된 슬라이드 이미지를 다루기 위해, 루닛은 웹 애플리케이션 기반의 툴을 제작하여 인공지능 엔진을 통해 분석된 결과를 시각화하여 확대/축소/이동이 가능하게 함.

• 효율적인 데이터 포맷을 선택하기 위해 이미지 포맷을 사용하며, 사용자가 시점을 이동할 때마다 Canvas 영역을 새로 그리기 위해 pre-rendering 기술을 활용함.

• Tissue 영역을 종류별로 OffscreenCanvas에서 시각화하여 메모리에 저장하고, 사용자가 선택한 Tissue들만 합성해 ImageBitmap 형태로 저장하여 화면상의 Canvas에 옮겨주는 방식으로 성능을 확보한다.

• Structure와 Cell의 시각화를 위해 MessagePack을 사용하여 데이터 포맷을 최적화하고, K-d 트리를 활용한 spatial indexing을 통해 효율적으로 화면에 표시되어야 하는 요소를 그린다.