기본 설명
모든 Component는 "모듈"에 있다.
- vtk.js/Common: 데이터 모델 클래스 및 핵심 유틸리티 포함
- vtk.js/Filters: 데이터 변환 또는 생성을 위한 필터 포함
- vtk.js/Interaction: 상호작용 코드
- vtk.js/IO: file type들에 대한 reading/writing
- vtk.js/Rendering: WebGL 및 WebGPU를 포함한 모든 렌더링 컴포넌트
개별 컴포넌트는 다음과 같은 방법으로 임포트한다.
import vtkRenderWindow from “@kitware/vtk.js/Rendering/Core/RenderWindowvtk.js에서는 ES6 문법을 지원하므로 위와 같이 import할 수 있다.
아키텍처
렌더링 관련 아키텍처에 대한 전체적 설명
import "@kitware/vtk.js/Rendering/Profiles/Geometry"; // 다양한 프로필 클래스를 등록한다. 이 외에도 profiles에 여럿 사용가능한 프로필이 있다.
import "@kitware/vtk.js/Rendering/Misc/RenderingAPIs"; // WebGL와 WebGPU backends를 등록한다.위 import문들은 필수적인 초기화를 수행한다.
- WebGL 및 WebPGU를 백엔드로 등록
- 여러 프로필 클래스들을 등록
렌더링과 관련하여 사용 가능한 몇몇 프로필들
- All : 모든 프로필
- Geometry : Geometry rendering만을 위한 프로필
- Volume : Volume rendering만을 위한 프로필
- Glyph : Glyph rendering만을 위한 프로필
위 이미지를 바탕으로 렌더링의 전체적인 구조를 다음과 같이 간단히 설명한다.
- RenderWindow
- 윈도우 데스크탑에서 draw를 수행한다
- RenderWindow는 Renderer를 1개 이상을 가질 수 있다. (1…*)
- RenderWindow는 interactor를 무조건 1개 가져야 한다.
- Renderer
- Renderwinodw 범위 안에서 물체를 그린다
- Renderer는 Camera, Lights, prop를 가질 수 있으며 RenderWindow에 붙게 된다.
- Renderer는 Camera를 무조건 1개 가져야 한다.
- Rendere는 Lights를 0개 이상 가질 수 있다.
- Camera
- Scene을 보는 위치를 결정한다.
- Scene의 조명 방식을 정한다.
- Prop
- vtkActor와 vtkVolume은 Prop에 포함되며 중요한 서브클래스이다.
- Propdms Property를 무조건 1개 가져야 한다.
- Prop은 Mapper를 무조건 1개 가져야 한다.
- Property
- 어떻게 보이는지를 결정한다.
- Mapper
- 데이터처리 파이프라인에 연결한다.
- LookupTable을 무조건 1개 가져야한다.
- LookupTable
- 어떤 공간에 어떤 색상을 표현할지를 나타낸다.
- Interactor
- UI(마우스, 키보드) 이벤트를 처리한다.
RenderWindow설명
RenderWindow는 많은 Renderer를 가질 수 있으며, 웹페이지는 여러 개의 RenderWinodw를 가질 수 있다. 각 렌더창에는 고유한 WebGL 컨텍스트가 있다.
const renderwindow = vtkRenderWindow.newInstance();
const renderer = vtkRenderer.newInstance();
renderwindow.addRenderer(renderer);
// picks webgl or webgpu
// WebGL또는 WebGPu 구현은 실제 렌더링을 수행합니다.
const apiSpecificRenderWindow = renderWindow.newAPISpecificView();
apiSpecificRenderWindow.setContainer(e1); // js에서 event수행시 e1으로 이벤트정보를 받아온다.
renderWindow.addView(apiSpecificRenderWindow);
RenderWindow와 같은 렌더링 컴포넌트는 추상적이므로, 실제 렌더링은 WeGL 또는 WebGPU 구현체가 실제 렌더링을 수행한다.
Interaction
RenderWindow의 interactor가 처리하는 상호작용이다. 캔버스에서 마우스, 키보드, 터치의 이벤트를 수신한다.
// Create interactor and bind
const interactor = vtkRenderWindowInteractor.newInstance();
interactor.setInteractorStyle(
vtkInteractorStyleTrackballCamera.newInstance()
);
interactor.setView(apiSpecificRenderWindow);
interactor.initialize();
interactor.bindEvents(e1);
Interaction과 관련된 것은 다음과 같이 간단히 설명한다.
- interactor : vtk.js에서 상호작용을 처리하기 위한 기본 인터페이스
- interactorStyle : 상호작용을 의미 있는 Scene변경으로 변환하는 인터랙션 클래스
- 예시 interactino style로는 'InteractorStyleTrackballCamera' 또는 'InteractorStyleImage'와 같은 것들이 있다.
- InteractorStyleTrackballCamera는 초점을 중심으로 카메라를 회전한다.
- InteractorStyleImage는 3D 이미지를 슬라이스하며 windowing 및 leveling을 수행한다.
Source와 Filter
function createConePipeline() {
const coneSource = vtkConeSource.newInstance(); // 지정된 지점을 중심으로 지정된 방향을 가리키는 원뿔 생성
const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();
actor.setMapper(mapper);
mapper.setInputConnection(coneSource.getOutputPort());
renderer.addActor(actor);
return { coneSource, mapper, actor };
}
소스
소스는 몇 가지 입력 매개변수가 주어지면 데이터를 생성한다. 예) Cone, Sphere, Cylinder
vtk.js 깃허브에서 소스 코드를 살펴보면, point, triangle cells등이 모여있고 transformation 적용 내용도 들어가있다.
필터
필터는 입력 데이터를 변환하고 변환된 출력을 생성한다. 예) blur, decimate, cut
"필터"는 다른 컴포넌트에서 데이터를 수신하고 어떤 방식으로든 데이터를 수정한 다음, 다른 컴포넌트에서 사용할 수 있도록 수정된 데이터를 출력으로 전달하는 VTK 컴포넌트다.
coneSource는 필터에 속하는데, 이 내용은 공식문서의 코드를 보면 확인할 수 있다.
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
const cone = vtkConeSource.newInstance({ height: 2, radius: 1, resolution: 80 });
const polydata = cone.getOutputData();coneSource를 사용하기 위해 import할 때 Filters에 속하는 것을 볼 수 있으며, getOutputData()를 통해 다른 컴포넌트에서 사용할 수 있도록 데이터를 출력으로 전달이 가능하다. 즉, ConeSource는 필터이다.
필터의 입력과 출력
필터의 입력과 출력은 다음과 같이 설정가능하다.
- setInputData(data, port = 0)
- getOutputData(port = 0)
필터의 연결
mapper는 데이터 처리 파이프라인과 연결할 떄 사용한다고 했다.
mapper.setInputConnection(coneSource.getOutputPort());
여러 필터를 함께 연결 가능하다.
- setInputConnection(conn, port = 0)
마지막에 데이터를 요청하면 파이프라인이 트리거된다.
- getOutputPort(port = 0)
Actor와 Mapper
function createConePipeline() {
const coneSource = vtkConeSource.newInstance(); // 지정된 지점을 중심으로 지정된 방향을 가리키는 원뿔 생성
const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();
actor.setMapper(mapper);
mapper.setInputConnection(coneSource.getOutputPort());
renderer.addActor(actor);
return { coneSource, mapper, actor };
}Actor와 Mapper를 코드와 함께 보기 위해 다시 createConePipeline() 함수를 들고왔다.
actor.setMapper(mapper);
mapper.setInputConnection(coneSource.getOutputPort());
renderer.addActor(actor);Actor는 Prop에 속하며 actor는 Mapper를 가지는 것을 위 이미지에서 확인할 수 있다.
- Mapper는 데이터를 WebGL/WebGPU 프리미티브로 변환하는 작업을 처리한다.
- Actor는 scene object를 나타내며 renderer에 추가된다.
프로퍼티
const pipeline = createConePipeline();
pipeline.actor.getProperty().setColor(1, 0, 1);프로퍼티는 액터 렌더링에 대해 다양한 것들을 컨트롤한다.
- Lighting: 디퓨즈, 앰비언트, 스페큘러 등
- Opacity, culling, representation
Data types
ConeSource의 출력은 vtkPolyData이다.
Poly data
- PolyData는 표면 메시의 structure이다.
- 이는 point들의 배열 데이터, 셀, 데이터셋 자체를 담을 수 있다.
- 즉, PolyData는 포인트와 셀로 구성되며 포인트는 물리적 공간의 좌표를 의미하고 셀은 토폴로지를 정의하는 점의 집합이다.
- 예) lines, triangles, polygons, tetrahedra
참고링크
ImageData
ImageData는 grid에서 구조화된 데이터로 표현되며, 슬라이스 또는 볼륨으로 렌더링될 수 있다.
- Orientation
- Origin
- Spacing
- Exten
렌더링 관련 아키텍처 요약
function createConePipeline() {
const coneSource = vtkConeSource.newInstance();
const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();
actor.setMapper(mapper);
mapper.setInputConnection(coneSource.getOutputPort());
renderer.addActor(actor);
return { coneSource, mapper, actor };
}다시 한 번 이미지 및 코드와 함께 렌더링 아키텍처를 살펴보자.
- data 및 filter 역할을 하는 ConeSource가 주어진다.
- 이에 대한 출력을 coneSource의 출력으로 받아오며 이는 vtkPolyData타입이다.
- vtkPolyData는 표면 메시를 표현하는 structure이다.
- polyData를 mapper와 연결시켜 데이터를 WebGL/WebGPU 프리미티로 변환하는 작업을 수행한다.
- Actor는 mapper를 가지고 있는 상태이고, mapper를 통해 데이터 변환 작업이 수행되었다면 렌더링할 준비가 완료된 것이다.
- 마지막으로 Actor에 property값을 설정해준 뒤에 renderWinodw에서 render() 명령을 내려준다.