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