Cornerstone3D 란

HTML5 캔버스 요소를 지원하는 최신 웹 브라우저에서 의료 이미지를 시각화하기 위한 경량 자바스크립트 라이브러리

• JPEG Lossless와 같은 다양한 압축 형식을 포함한 모든 전송구문 렌더링
• 볼륨 슬라이스를 스트리밍하고 로드되는 동안 실시간으로 확인
• 전체 볼륨을 다시 로드할 필요없이 축상, 시상면 및 관상면과 같은 다른 방향에서 동일한 볼륨 - 최소 메모리 공간
• 볼륨에서 비스듬한 슬라이스 보기
• 동일한 볼륨의 서로 다른 블렌드 렌더링
• PET/CT 융합과 같은 여러 이미지 융합 및 오버레이
• 컬러 이미지를 렌더링하고 볼륨으로 렌더링
• GPU 렌더링을 사용할 수 없는 경우 CPU 렌더링으로 폴백
• 뷰포트에 대한 메타데이터 중 픽

 

WebGL 을 사용한 GPU 가속 렌더링

웹 표준을 사용하여 의료 이미지의 3D 렌더링을 가능하게 한다.

볼륨 스트리밍 같은 고급 기능은 SharedArrayBuffer 를 사용하여 공유 메모리를 생성하는 방식이며, 이는 지원되지 않는 브라우저가 있을 수 있다고 한다.

SharedArrayBuffer
고정된 길이의 원시 바이너리 데이터 버퍼를 표현하는데 사용되는 객체 ArrayBuffer와 유사하며 공유된 메모리상 뷰를 생성하는데 사용될 수 있고 분리될 수 없다.

 

Peer Library 인 Cornerstone3DTools

Cornerstone3D 에서 렌더링된 이미지와 상호 작용하는데 사용되는 숫자 조작 및 주석 도구 포함하고 있다.

• 마우스 바인딩을 사용하여 이미지 확대 및 축소
• 이미지를 원하는 방향으로 패닝
• 비스듬한 슬라이스에서도 모든 방향으로 이미지를 스크롤
• 이미지 창 수준 변경
• 이미지에 주석 기능
  • 모니터 해상도에 무관하게 최상의 품질로 표시되도록 SVG요소로 렌더링 처리
  • 이미지의 실제 물리적 공간에 저장되므로 여러 뷰포트에서 동일한 주석을 렌더링/수정 가능
  • 길이 도구를 사용하여 두 점 사이의 거리 측정
  • 도구 그룹을 사용하여 특정 뷰포트에서 특정 도구를 활성화
  • 양방향 선 도구를 사용하여 길이와 너비 측정
  • Rectangle/Elliptical ROI Tool 을 사용하여 관심영역의 평균, 표준편차 등 통계량 산출
  • 십자선을 이용하여 다른 뷰포트의 이미지에서 해당 지점을 찾고 참조선을 사용하여 슬라이스 검색
  • 특정 수정키를 누른 상태에서 활성화할 다른 도구 지정 가능
  • 맞춤 도구 만들기 가능
• Volume 뷰포트에서 3D의 labelmap으로 이미지의 분할 렌더링을 지원
  • 볼륨 뷰포트에서 분할을 레이블 맵으로 렌더링
  • 비스듬한 슬라이스에서 모든 방향으로 분할 보기
  • Labelmap 구성 변경
  • Rectangle, Ellipse 가위와 같은 도구를 사용하여 세그먼트 편집/그리기
  • 관심 영역의 레이블 맵에 특정 임계값 적용
• 여러 뷰포트 간 동기화를 지원

 

cornerstonejs → cornerstone3D 로 마이그레이션

https://www.cornerstonejs.org/docs/migrationGuides

Migration Guides | Cornerstone.js

 

사용되는 library

react-vtkjs-viewport

3D 컴퓨터 그래픽, 이미지 처리 및 시각화를 위한 오픈 소스 자바스크립트 라이브러리

OHIF Viewer

Open Health Imaging Foundation, The Cancer Imaging Archieve 및 NCI Imaging Data Commons와 같은 곳에서 사용되는 오픈 소스 이미지 뷰어이다. 공간과 설치가 필요 없는 확장 가능한 웹 이미징 프레임워크

 

 

Cornerstone 구성요소

Image

이미지 로드를 처리하지 않으면 cornerstone3D를 렌더링해줄 수 없다. 적절한 이미지 볼륨 로더를 등록해야 의도한대로 작동할 수 있다

• 이미지 로더 : cornerstoneWADOImageLoader
• 볼륨 로더 : cornerstoneStreamingImageVolumeLoader

 

메타 데이터

voi, suv 값 등과 같은 이미지의 속성을 제대로 표시하기 위한 데이터

적절한 메타데이터 공급자를 등록해야 코너스톤이 의도한 대로 작동한다.

 

이미지 스택 렌더링

뷰포트의 컨테이너로 사용될 element (HTMLDivElement) 와 이미지 경로가 있어야 이미지를 렌더링할 수 있다.

 

뷰포트

const content = document.getElementById('content');
const element = document.createElement('div');

element.style.width = '500px';
element.style.height = '500px';

content.appendChild(element);

 

Rendering Engine

const renderingEngineId = 'myRenderingEngine';
const renderingEngine = new RenderingEngine(renderingEngineId);

초기 뷰포트와 렌더링 엔진이 준비되면 api를 렌더링 엔진 내부에 생성할 수 있다.

const viewportId = 'CT_AXIAL_STACK';

const viewportInput = {
  viewportId,
  element,
  type: ViewportType.STACK,
};

renderingEngine.enableElement(viewportInput);

렌더링 엔진에 enableElement() 를 해주면 뷰포트 개체를 getViewport() 해줄 수 있고 이미지를 설정한 뒤

표시할 이미지의 인덱스를 선택해줄 수 있다.

const viewport = renderingEngine.getViewport(viewportId);

viewport.setStack(imageIds, 60);

viewport.render();