Cornerstone3D源码-必备的 vtk.js 知识点

一、数据与 Actor（必须熟）

• vtkImageData

  • 在哪里用：

    • ImageVolume、StreamingImageVolume（体数据）
    • StackViewport 的 createVTKImageData（2D Stack）

  • 必须会：

    • 概念：一个规则网格（dimensions / spacing / origin / direction）

    • 常用 API：

      • vtkImageData.newInstance()
      • setDimensions / setSpacing / setOrigin / setDirection
      • getPointData().setScalars(...) / getPointData().getScalars()

    • 理解：怎么把解码后的 TypedArray 像素挂进 imageData，以及这些信息如何影响世界坐标。

• vtkImageSlice + vtkImageMapper（2D 图像渲染）

  • 在哪里用：StackViewport 的 _createVTKImageData / createActorMapper

  • 必须会：

    • 如何用 vtkImageMapper.setInputData(imageData)，再用 vtkImageSlice.setMapper(mapper)
    • 这是 Cornerstone3D 2D Stack（单张/多张切片） 的基础渲染单元。

• vtkVolume + vtkVolumeMapper / 自定义 mapper

  • 在哪里用：

    • RenderingEngine/vtkClasses/vtkSharedVolumeMapper.js
    • createVolumeMapper.ts / createVolumeActor.ts

  • 必须会：

    • vtkVolume.newInstance() + volume.setMapper(mapper)

    • volume 渲染依赖：

      • ColorTransferFunction（灰度/伪彩）
      • PiecewiseFunction（不透明度）
      • BlendMode（MIP、平均、合成等）

二、渲染管线（必须熟）

• vtkRenderWindow / vtkRenderer / vtkRenderWindowInteractor

  • 在哪里用：

    • vtkOffscreenMultiRenderWindow.js
    • vtkStreamingOpenGLRenderWindow.js

  • 必须会：

    • 一个 RenderWindow 可以有多个 Renderer，Cornerstone3D 把“一个 viewport = 一个 renderer”
    • renderer.addActor(...) / renderer.setViewport(...)（决定渲染区域）
    • 最终通过 renderWindow.render() 触发渲染。

• vtkOpenGLRenderWindow / 自定义 vtkStreamingOpenGLRenderWindow

  • 在哪里用：RenderingEngine/vtkClasses 下的所有自定义 OpenGL 相关类

  • 需要理解：

    • 为何 Cornerstone3D 使用“离屏渲染 + 拷贝到 HTML canvas”的方式
    • ViewNodeFactory 如何用自定义 mapper / texture（vtkStreamingOpenGLVolumeMapper、vtkStreamingOpenGLTexture）

三、相机与坐标系统（很重要）

• Camera 概念（视点、焦点、viewPlaneNormal、viewUp）

  • 在哪里用：

    • Viewport.ts（大量 camera 操作）
    • BaseVolumeViewport / VolumeViewport（MPR、斜切等）

  • 必须会：

    • viewPlaneNormal / viewUp 对「切片方向」「视角」的意义
    • 滚动切片 / 同步视图，本质上都是 camera 的平移（focalPoint + position）

• 坐标变换：Index ↔ World ↔ Canvas

  • 在哪里用：

    • utilities/transformWorldToIndex.ts
    • transformCanvasToIJK.ts / transformIJKToCanvas.ts
    • vtkMatrixBuilder（来自 @kitware/vtk.js/Common/Core/MatrixBuilder）

  • 必须会：

    • ijk（体素索引） → world（mm） → canvas（屏幕像素）大致是怎么串起来的
    • 这直接影响你如何做拾取、测量、同步等高级功能。

四、传输函数与渲染属性（做体渲染必备）

• vtkColorTransferFunction / vtkPiecewiseFunction

  • 在哪里用：

    • utilities/createLinearRGBTransferFunction.ts
    • utilities/createSigmoidRGBTransferFunction.ts
    • utilities/applyPreset.ts
    • utilities/colormap.ts

  • 必须会：

    • 如何创建和配置：

      • vtkColorTransferFunction.newInstance()
      • .addRGBPoint(x, r, g, b) / .setRange(...)
      • vtkPiecewiseFunction.newInstance() / .addPoint(x, opacity)

    • 概念：灰度值 → 颜色，灰度值 → 不透明度，是如何控制窗宽窗位、MIP 等显示效果的。

• Blend / Rendering 参数

  • 在哪里用：

    • enums/BlendModes.ts（映射 vtk 的 BlendMode）
    • createVolumeMapper.ts 中的 setSampleDistance / setMaximumSamplesPerRay

  • 要能读懂：

    • 不同 blend mode（合成方式）的大致含义
    • sampleDistance 对画质与性能的影响。

五、工具类与杂项（按需掌握）

• vtkMatrixBuilder / vtkMath / vtkPlane 等数学与几何工具

  • 在哪里用：Viewport.ts、utilities/getSliceRange.ts、getPlaneCubeIntersectionDimensions.ts

  • 用来：

    • 计算交点、包围盒、切片范围等
    • 做相机/平面相关的运算（比如 volume 的切片数、scroll 范围）

• Widget / Glyph / Actor2D 等（当前 Cornerstone3D 自己的 overlay 和工具多用 SVG/HTML，不是 vtk widget，所以可以后读）

六、建议的学习顺序（结合这个库）

1. 数据与 Actor：
   从 ImageVolume、StackViewport 入手，搞清楚 vtkImageData + vtkImageSlice / vtkVolume 的关系。

2. 渲染管线：
   看 vtkOffscreenMultiRenderWindow.js、ContextPoolRenderingEngine.ts，理解「一个 RenderWindow + 多 Renderer」的布局。

3. 相机与坐标：
   重点读 Viewport.ts 里关于 camera、坐标转换的部分（再配合 transformWorldToIndex.ts 等 utilities）。

4. 传输函数与 VOI：
   看 createVolumeActor.ts + utilities/colormap.ts + createSigmoidRGBTransferFunction.ts，理解 VOI/窗宽窗位在 vtk 里如何落地。

5. 按需深入：

   • 如果你主要改 2D/Stack 功能：多看 StackViewport + 相关工具（scroll、Annotation 等）
   • 如果你主要改 3D/MPR/体渲染：多看 BaseVolumeViewport / VolumeViewport / vtkStreamingOpenGL* 相关类