vtk.js

vtk.js


vtk 原理文档

<h1>1.关于vtk</h1> <p>vtk是一个3D计算机图形学、图象处理及可视化工具包。</p> <h1>2.vtk可处理的数据类型</h1> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=eb7f543c0a367b8ebfc868bf52c588b1&amp;amp;file=file.png" alt="" /></p> <h1>3.vtk使用流程</h1> <p>数据渲染时的流程:source→filter→mapper→actor→render→renderwindow→interactor</p> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9560450a45a2632259858d58bfa497e5&amp;amp;file=file.png" alt="" /></p> <ul> <li>Source(数据源):各个类型的图像数据。</li> <li>Filter(过滤器):对原始数据做一些操作,例如三角化、提取轮廓等。</li> <li>Mapper(映射器):把不同的数据类型,转成图形数据。</li> <li>Actor(演员):执行渲染mapper的对象。</li> <li>Render(渲染器):用于渲染图像。</li> <li>RenderWindow(窗口):可以理解成用于成像的一个平面。</li> <li>Interactor(交互):用于获取渲染窗口上发生的鼠标,键盘事件,提供了独立于平台的与渲染窗口进行交互的机制</li> </ul> <h1>4.相机(camera)</h1> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=3d20663494bc3e16cd7502bbc1796620&amp;amp;file=file.png" alt="" /></p> <p>从图可以看出与相机投影相关的因素主要有:</p> <p><strong>相机位置</strong>:即相机所在的位置,用方法vtkCamera.setPosition()设置。</p> <p><strong>相机焦点</strong>:用方法vtkCamera.setFocusPoint()设置,默认的焦点位置在世界坐标系的原点。</p> <p><strong>朝上方向</strong>:即哪个方向为相机朝上的方向。就好比我们直立看东西,方向为头朝上,看到的东西也是直立的,如果我们倒立看某个东西,这时方向为头朝下,看到的东西当然就是倒立的。相机位置、相机焦点和朝上方向三个因素确定了相机的实际方向,即确定相机的视图。</p> <p><strong>投影方向</strong>:相机位置到相机焦点的向量方向即为投影方向。</p> <p><strong>投影方法</strong>:确定Actor是如何映射到像平面的。vtkCamera定义了两种投影方法,一种是正交投影(OrthographicProjection),也叫平行投影(Parallel Projection),即进入相机的光线与投影方向是平行的。另一种是透视投影(PerspectiveProjection),即所有的光线相交于一点。</p> <p><strong>视角</strong>:透视投影时需要指定相机的视角(View Angle),默认的视角大小为30º,可以用方法vtkCamera.setViewAngle()设置。</p> <p><strong>前后裁剪平面</strong>:裁剪平面与投影方向相交,一般与投影方向也是垂直的。裁剪平面主要用于评估Actor与相机距离的远近,只有在前后裁剪平面之间的Actor才是可见的。裁剪平面的位置可以用方法vtkCamera.setClippingRange()设置。</p> <p>如果你想获取vtkRenderer里默认的相机,可以用方法vtkRenderer.getActiveCamera()。</p> <h1>5.坐标系</h1> <p>计算机图形学里常用的坐标系统主要有四种,分别是:Model坐标系统、World坐标系统、View坐标系统和Display坐标系统,以及两种表示坐标点的方式:以屏幕像素值为单位和归一化坐标值(各坐标轴取值都为[-1, 1])。它们之间的关系如图所示。</p> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=c82d8bb0e04fcbac2fcc6e1a8bedf950&amp;amp;file=file.png" alt="" /></p> <p>Model坐标系统是定义模型时所采用的坐标系统,通常是局部的笛卡尔坐标系。例如,我们要定义一个表示球体的Actor,一般的做法是将该球体定义在一个柱坐标系统里。使用的比较少。</p> <p>World坐标系统是放置Actor的三维空间坐标系,Actor其中的一个功能就是负责将模型从Model坐标系统变换到World坐标系统。每一个模型可以定义有自己的Model坐标系统,但World坐标系只有一个,每一个Actor必须通过放缩、旋转、平移等操作将Model坐标系变换到World坐标系。World坐标系同时也是相机和光照所在的坐标系统。</p> <p>View坐标系统表示的是相机所看见的坐标系统。X、Y、Z轴取值为[-1, 1],X、Y值表示像平面上的位置,Z值表示到相机的距离。相机负责将World坐标系变换到View坐标系。</p> <p>Display坐标系统跟View坐标系统类似,但是各坐标轴的取值不是[-1, 1],而是使用屏幕像素值。屏幕上显示的不同窗口的大小会影响View坐标系的坐标值[-1, 1]到Display坐标系的映射。可以把不同的渲染场景放在同一个窗口进行显示,例如,在一个窗口里,分为左右两个渲染场景,这左右的渲染场景(vtkRenderer)就是不同的视口(Viewport)。例子Viewport演示了把一个窗口分为四个视口,用vtkRenderer.setViewport()来设置视口的范围(取值为[0, 1])。</p>

页面列表

ITEM_HTML