vtk（visualization toolkit）发布了全新的8.0版本，并一同发布了基于浏览器WebGL的可视化工具vtk.js。之前我参与的基于vtk的项目都是在Qt框架下使用C++编写，比较繁琐，开发效率较低。现在可以用JavaScript来做可视化的项目，开发效率较之前应该会有较大程度的提高。

1、下面使用vtk.js完成一个hello world程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>  
<script type="text/javascript">  
    const cone = vtk.Filters.Sources.vtkConeSource.newInstance();  
    const mapper = vtk.Rendering.Core.vtkMapper.newInstance();  
    const actor = vtk.Rendering.Core.vtkActor.newInstance();  
    mapper.setInputConnection(cone.getOutputPort());  
    actor.setMapper(mapper);  
  
    const fullRender = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();  
    const render = fullRender.getRenderer();  
    render.addActor(actor);  
    render.resetCamera();  
  
    const renderWindow = fullRender.getRenderWindow();  
    renderWindow.render();  
</script>

首先引入vtk.js，然后与vtk类似，先导入椎体数据源，然后将数据传入mapper，再将actor与mapper绑定。之后vtk.js有一个全新的类vtkFullScreenRenderWindow，该类将在浏览器全屏显示窗口。从vtkFullScreenRenderWindow类获取render，将actor加入到render内，再次通过vtkFullScreenRenderWindow获取window，调用window的render()方法开始渲染。
vtkjspic
非常简单！

2、使用webpack打包

node版本要求8.0+，npm版本5.0+，在项目文件夹下

1
npm init

然后安装vtk.js及vtk所属Kitware基金会的开发套件kw-web-suite

1
2
npm install vtk.js --save  
npm install kw-web-suite --save-dev

修改package.json

1
2
3
4
5
6
7
8
9
10
{  
    ...  
    "scripts": {  
      "build": "webpack",  
      "build:release": "webpack -p",  
      "start": "webpack-dev-server --content-base ./dist",  
      "commit": "git cz",  
      "semantic-release": "semantic-release"  
    }  
}

创建webpack.config.js如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require('path');  
const webpack = require('webpack');  
const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;  
  
const entry = path.join(__dirname, './src/index.js');  
const sourcePath = path.join(__dirname, './src');  
const outputPath = path.join(__dirname, './dist');  
  
module.exports = {  
    mode: 'development',  
    entry,  
    output: {  
        path: outputPath,  
        filename: 'app.js'  
    },  
    module: {  
        rules: [  
            { test: entry, loader: 'expose-loader?app' },  
            { test: /\.html$/, loader: 'html-loader' },  
        ].concat(vtkRules)  
    },  
    resolve: {  
        module: [  
            path.resolve(__dirname, 'node_modules'),  
            sourcePath  
        ]  
    }  
};

入口文件是src下的index.js，出口文件是dist文件夹下的app.js。
src文件夹下index.js如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import vtkConseSource from 'vtk.js/Sources/Filters/Sources/ConeSource';  
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';  
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';  
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';  
  
const cone = vtkConseSource.newInstance();  
const mapper = vtkMapper.newInstance();  
const actor = vtkActor.newInstance();  
mapper.setInputConnection(cone.getOutputPort());  
actor.setMapper(mapper);  
  
const fullRender = vtkFullScreenRenderWindow.newInstance();  
const render = fullRender.getRenderer();  
render.addActor(actor);  
render.resetCamera();  
  
const renderWindow = fullRender.getRenderWindow();  
renderWindow.render();

注意这里引入模块的路径与1中脚本方式直接调用的路径类似，但最后的vtkConeSource、vtkMapper、vtkActor等需将vtk去掉。
index.html如下

1
<script src="app.js"></script>

打包

1
npm run build

报错：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
configuration.resolve has an unknown property ‘module’. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, concord?, unsafeCache?, useSyncFileSystemCalls? }
Options for the resolver
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vtk@1.0.0 build: webpack
npm ERR! Exit status 1
错误原因在于webpack.config.js文件没有配置对，最后一项modules错写为module，改正后重新生成，成功。
启动开发服务器

1
npm start

打开http://localhost:8080/即为绘制结果。
完整程序见我的github。