【vtk.js学习笔记（1）】vtk.js环境搭建

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

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

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

非常简单！

2、使用webpack打包

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

npm init

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

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

修改package.json

{
    ...
    "scripts": {
      "build": "webpack",
      "build:release": "webpack -p",
      "start": "webpack-dev-server --content-base ./dist",
      "commit": "git cz",
      "semantic-release": "semantic-release"
    }
}

创建webpack.config.js如下

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如下

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如下

打包

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! [email protected] build: `webpack`
npm ERR! Exit status 1

错误原因在于webpack.config.js文件没有配置对，最后一项modules错写为module，改正后重新生成，成功。

启动开发服务器

npm start

打开http://localhost:8080/即为绘制结果。

完整程序见我的github。