kitware / vtk-js

Visualization Toolkit for the Web

VTK.js - The Visualization Toolkit for JavaScript

Introduction

VTK is an open-source software system for image processing, 3D graphics, volume rendering and visualization. VTK includes many advanced algorithms (e.g., surface reconstruction, implicit modelling, decimation) and rendering techniques (e.g., hardware-accelerated volume rendering, LOD control). The JavaScript implementation remains a subset of the actual C++ library but efforts will be made to easily port or compile native VTK code into WebAssembly to better blend both worlds. vtk.js is a true rewrite of VTK in plain JavaScript (ES6). Therefore not everything has been rewritten.

The origin of VTK is with the textbook "The Visualization Toolkit, an Object-Oriented Approach to 3D Graphics" originally published by Prentice Hall and now published by Kitware, Inc. (Third Edition ISBN 1-930934-07-6). VTK has grown (since its initial release in 1994) to a world-wide user base in the commercial, academic, and research communities.

vtk.js aims to be a subset of VTK and provide 3D rendering using WebGL (+WebGPU) for both geometry and volume rendering.

What is the difference with VTK/C++?

VTK.js is a complete rewrite of VTK/C++ using plain JavaScript (ES6). The focus of the rewrite, so far, has been the rendering pipeline for ImageData and PolyData, the pipeline infrastructure, and frequently used readers (obj, stl, vtp, vti). Some filters are also provided as demonstrations. We are not aiming for vtk.js to provide the same set of filters that is available in VTK/C++, but vtk.js does provide the infrastructure needed to define pipelines and filters.

We have also started to explore a path where you can compile some bits of VTK/C++ into WebAssembly and to enable them to interact with vtk.js. With such interaction, you can pick and choose what you need to extract from VTK and enable it inside your web application. VTK/C++ WebAssembly can even be used for rendering, and examples can be found in VTK repository. Additionally itk-wasm (which is ITK via WebAssembly) also provides proven implementations for several image filters and data readers. There are, however, some additional costs in terms of the size of the WebAssembly file that will have to be downloaded when visiting a VTK or ITK WebAssembly webpage; and we still have some work to do to streamline the vtk.js + VTK WebAssembly integrations.

In general if you want to stay in the pure JavaScript land, then vtk.js is perhaps the ideal solution for you. We welcome your feedback, including your contributions for new visualization filters, bug fixes, and examples.

On top of the rendering capabilities of vtk.js, the library provides helper classes to connect to a remote VTK/ParaView server to enable remote-rendering and/or synchronized C++/RenderWindow content with a local vtk.js RenderWindow by pushing the geometry from the server to the client and only involve rendering on the client side.

Using vtk.js

Requirements

In general VTK tries to be as portable as possible; the specific configurations below are known to work and tested.

vtk.js supports the following development environments:

• Node 14+
• NPM 7+

and we use @babel/preset-env with the defaults set of browsers target. But when built from source this could be adjusted to support any browser as long they provide WebGL.

Documentation

• High-level documentation
• API descriptions
• Examples

Feature requests and Bug reports

Submit an issue to report bugs or missing features in vtk.js.

Help and Support

• VTK/Web discourse forum is here to help you find existing questions or ask your own.
• Kitware offers advanced software R&D solutions and services. Find out how we can help with your next project.

License

VTK is distributed under the OSI-approved BSD 3-clause License. See Copyright.txt for details.

Contributing

See CONTRIBUTING.md for instructions on how to contribute.

vtk-js's Issues

string-replace-loader required to build, but not listed in dependencies

In a downstream project that builds against vtk-js, I'm seeing the following error:

ERROR in ./plugins/vtk_viewer/web_client/views/SurfaceView.js
Module not found: Error: Can't resolve 'string-replace-loader' in '/Users/zach/dev/girder'

It looks like string-replace-loader is supposed to be brought in transitively via kw-web-suite, however kw-web-suite is only listed in the devDependencies, not the dependencies.

Things required for build time should be listed in dependencies; devDependencies is for things that are required for development of vtk-js itself.

Consider new docs section for high-level concepts

This would be very helpful for those who are not already familiar with VTK. It could go in the "Overview" section and would explain things like what are mappers, actors, renderers, render windows, interactors, etc. Explaining these things could help open up vtk.js to a wider audience.

Filter example is broken: Report "no data to warp"

Go to http://kitware.github.io/vtk-js/examples/Filter/index.html

Open the developer console

Move the slider

PointData Arrays not loaded

I have converted this unstructured grid file with vtkDataConverter (passing the -e option) to the following vtk-js format file

https://github.com/bilke/vtk-js-test/tree/master/dist/data/square_1e2_neumann_pcs_0_ts_1_t_1.000000.vtu

I then try to read it:

const reader = vtkHttpDataSetReader.newInstance({ enableArray: true, fetchGzip: true });
reader.setUrl(`./data/square_1e2_neumann_pcs_0_ts_1_t_1.000000.vtu`).then((reader, dataset) => {
  console.log('Metadata loaded with the geometry', dataset);

  reader.loadData().then((reader, dataset) =>{
    reader.getArrays().forEach(array => {
      console.log('-', array.name, array.location, ':', array.enable);
    });
  });
});

But unfortunately there are no point arrays defined (no console output and I also cannot map scalars to colors with one of the arrays). The index.json looks valid. Do you have any ideas what's wrong here?

Also reader.listArrays as stated in docs seems not to be a valid variable or function.

Volume rendering issue on NVIDIA GeForce GT 750M

On Macbook pro, the rendering have volume duplication.

is the naming "vkt-js" or "VTK-js"?

It's two different ways in the documenation

Zooming with mouse wheel

How do we zoom in/out of on canvas with the mouse wheel scrolling?

I realize you may not have implemented this yet but I want to at least raise an issue so you can put this on your radar to implement.

RenderWindow example?

In looking through the docs, all the examples I could find use the FullScreenRenderWindow. I'm trying to render to a specific element in the DOM, but couldn't easily find such an example. Does one exist? If not, how do I do that?

Tests failing locally

Using the current master, I'm seeing 14 failures when running tests on my local machine. Is anyone else seeing this?

I have attached the test summary output in case it helps, renamed so it could be uploaded here.

tests-md.txt

npm install vtk-js doesnt work

I tried install vtk-js, vtk.js (which documentation says ) but neither is found.
from https://kitware.github.io/vtk-js it says to install using
npm install vtk.js
but that package does not exist.

How to run web

I read the docs and execute $ npm install kw-web-suite --save-dev.But what should I do later?

Manipulators

running the example: https://kitware.github.io/vtk-js/examples/Manipulators.html#Source

When changing a setting I get:

ReferenceError: vtkDebugMacro is not defined
 /vtk-js/examples/Manipulators/Manipulators.js:1

How can I activate zoom via mousewheel?

HttpDataSetReader: can't load data from basic example

I use the the basic example in : intro_vtk_as_es6_dependency.html
The cone displays perfectly.

Then I replaced the index.js by the example from HttpDataSetReader in:
https://kitware.github.io/vtk-js/examples/HttpDataSetReader.html

I just replace the file path : (${__BASE_PATH__}/data/cow.vtp) by a path accessible to the webpack-dex-server in "dist" directory.

reader.setUrl(`data/cow2/cow.vtp/index.json`).then(() => {
  reader.loadData().then(() => {
    renderer.resetCamera();
    renderWindow.render();
  });
});

The file is found but an error is thrown:

MyWebApp.js:30017 Uncaught (in promise) TypeError: GEOMETRY_ARRAYS[dataset.vtkClass] is not a function
    at processDataSet (MyWebApp.js:30017)
    at MyWebApp.js:30093
    at <anonymous>

In the debuger of Chrome I found that 'dataset' has no attribute vtkClass. What I understand is that it should resolve to "vtkPolyData" this is why GEOMETRY_ARRAYS[dataset.vtkClass] is undefined and ... not a function.

The error is generated in
"xxxx\Sources\nodeExamples\vtkjst3\node_modules\vtk.js\Sources\IO\Core\HttpDataSetReader\index.js" at line 72 for vtk.js version 2.18.6

I tried a similar example with the same data last november and it works well.
Perhaps I am missing something very obvious.
I am very new in development with javascript and client/server applications.

Environment:

node v7.9.0
npm v3.10.9

"vtk.js": "^2.18.6"
kw-web-suite": "^2.2.1"

Any help will be appreciated.
Thanks

How to use attributes of class' 'Constants' ?

I tried to access constants used in LandmarkTransform but without success. (Shame on me, I coded this class...). But I don't how to use 'Mode'. For information, I used the generated vtkjs lib.

const transform = vtkLandmarkTransform.newInstance();
transform.setMode(Mode.RIGID_BODY);
transform.setSourceLandmark(sourceLandmarks);
transform.setTargetLandmark(targetLandmark);
transform.update();

Actor Rotation

actor.RotateX(33)
VM6164:12 vtkProp3D::RotateX - NOT IMPLEMENTED

is there another way?

Integrate new data for test

I'm writting a test for createCubeFromRaw and I need to use 6 image data to create a skybox. For my own test, I put the files into Data folder and it worked well but I saw that this folder is on the .gitignore and I can't push it into vtkjs.
I tried to move it into my test folder but without success. Files are not found.

• OK : const path = ``${__BASE_PATH__}/Data/skybox/mountains/``;
• Not OK : const path = ``${__BASE_PATH__}/Sources/Rendering/OpenGL/Texture/test/skybox/mountains/px.vti``;

Where can I put the files in order to push it into vtkjs ?

Same reference when getting points from two differents vtkPoints

Hello,

I'm using two differents vtkPoints and I had to get points one by one from each. But when I get the point i on the first vtkPoints and then get a point on the second vtkPoints, then my first getting point has the same values as the second one. But the two vtkPoints are two differents objects.
For example :
data1 contains point (0, 0, 0)
data 2 contains point (1, 1, 1)

let p1 = data1.getPoint(0);
console.log(p1) will display (0, 0, 0)
let p2 = data2.getPoint(0);
console.log(p2) will display (1, 1, 1)
console.log(p1) will display (1, 1, 1)

The trick to do this is to make a deep copy of the output of getPoint() function but it's heavy.
Am I doing anything wrong or is it a bug ?

Test failed : PointSource

I don't know where I have to inform that with the current vtkjs version, tests failed. I think it's the PointSource test.

Regression dragging mouse

As noticed in the MR girder/girder#1951, the latest vtk-js version faces a regression when dragging the mouse over a dicom image with the dicom_viewer plugin in girder.

We get the following error:

Uncaught TypeError: publicAPI.superHandleMouseMove is not a function
    at Object.publicAPI.handleAnimation (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:38098:15)
    at Object.<anonymous> (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:39450:44)
    at http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:2555:35
    at Array.forEach (native)
    at Object.publicAPI.(anonymous function) [as invokeAnimation] (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:2554:15)
    at Object.publicAPI.animationEvent (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:40709:17)
    at publicAPI.handleAnimation (http://localhost:8080/static/built/plugins/dicom_viewer/plugin.min.js:40541:15)
publicAPI.handleAnimation @ index.js:83
(anonymous) @ index.js:81
(anonymous) @ macro.js:577
publicAPI.(anonymous function) @ macro.js:577
publicAPI.animationEvent @ index.js:424
publicAPI.handleAnimation @ index.js:255

Using vtk.js in Electron app

I am currently trying to make an Electron app which will visualize data with vtk.js. But I have encountered a problem with importing vtk.js into my app. The exact error I am receiving, when using require('vtk.js'), is this:

D:\electron-quick-start\node_modules\vtk.js\Sources\index.js:1
(function (exports, require, module, __filename, __dirname, process, global) { import Common       from './Common';
                                                                               ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\electron-quick-start\main.js:10:13)
    at Module._compile (module.js:556:32)

So my question is - is it possible to use Electron and vtk.js together? I've tried using require('vtk') (Error: Cannot find module 'vtk'), import * from 'vtk' (SyntaxError: Unexpected token import) but nothing seems to work. I am able to run an Electron app and create Web app with vtk.js using Webpack so I don't think that there's something wrong with either of them.

VTK file support

Will there be support for other vtk files such as .vtu, .vtp or .vtm?

Clip, slice, contour and streamline filters

Is it possible to use clip, slice, contour and streamline filters with the current implementation? What will I have to do if not?

Texture as image doesn't work anymore

I don't know which commit does that but adding a texture (as an image) to an actor doesn't work anymore as we can see in the elevation example : https://kitware.github.io/vtk-js/examples/ElevationReader.html

Implement InterpolateScalarsBeforeMapping

It would be nice to have this feature working on the mapper.

Click/release button out of render window

• click into the viewer and maintain the click
• move the cursor outside of the viewer
• release the mouse button
• go back to the viewer
  It applies a rotation as if the cursor hadn't been released.

I think when the cursor is out of the viewer (renderwindow), it should considers that the mouse button have been release, is it right ? Then, if the mouse goes back into the render window, user has to click again to make a rotation.

Specify the subset of vtk that vtk.js covers.

First of all, this is awesome, congrats to put vtk at web scale with this project!

I am a half way developing a classic Itk4-Vtk7-Qt5 app, but I am tempted to drop Qt it and do it using vtk.js and electron ( or even without electron).

ITK provides itkImageToVTKImageFilter for converting itk images to vtk, and you already have that.
I am also using a vtkGraphLayoutView, and vtkImagePlaneWidget ( derived from vtkPolyDataSourceWidget). Are they currently supported in vtk.js?

Thanks, and sorry if it would be better to ask this in the vtk-users (or dev?) mail list.

Fix mtime issues in VolumeMapper

edge support

vtk-js does not work in ms edge

Consider alternative mechanism for vtk*Macro

The status quo is that these symbols (e.g. vtkErrorMacro) are string-replaced via a loader that runs before the babel loader during the build process, which was probably done to mimic the preprocessor behavior in C++. This seems unnecessary, though, since we can bind or configure those methods at runtime easily and skip the global find/replace of strings. This forces downstream users wishing to build vtkjs with webpack to replicate these loader rules in their own configurations.

Generally speaking, I think in a javascript environment, we should probably try to avoid mimicking the behavior of the C++ preprocessor since it's counterintuitive to JS developers and breaks with the normal mechanics of the module system.

How to embed (multiple) render windows

Is it possible to embed (multiple) vtk-js visualizations into a single web page? If yes, how to do that?

We would like to replace static images in the documentation of our simulation software with interactive vtk-js visualizations. See this page for an example.

Rendering does not update when calling vtkTexture.setImage() with different image

The old image texture seems to stick around for ever.

Set coordinates values into vtkActor2D's constructor caused crash

When I try to create a vtkActor2D new instance, it crashed.

The constructor of the vtkActor2D set two values to a vtkCoordinate instance :

model.positionCoordinate2 = vtkCoordinate.newInstance();
model.positionCoordinate2.setCoordinateSystemToNormalizedViewport();
model.positionCoordinate2.setValue(0.5, 0.5);

But the value setter of the vtkCoordinate has to take 3 values :

  macro.setGetArray(publicAPI, model, [
    'value',
  ], 3);

So if it takes a different number, it crashes. I think that it has to depend on the coordinateSystem property of the vtkCoordinate, hasn't it ? Or did I miss anything ?

move // FIXME's to issues

• // FIXME !!! getInputAlgorithm / getInput
• // FIXME apply tranform
• and more

These comments are contextless (e.g. what is supposed to be fixed) and only useful for people who wrote the code. I would suggest that pull requests with FIXME's should not be accepted. Adding the ESLint Rule no-warning-comments would alleviate this in the future.

SetRepresentation for Surface with edges

You have three available enum values via SetRepresentation:
Surface, Points, Wireframe.

e.g.. actor.getProperty().setRepresentation(rep_value);

How would I turn on edges in surface representation?

CenterOfRotation vs FocalPoint

It does not seem possible currently to have separate focal point from center of rotation. This might be nice to have eventually.

no fullscreen. renderwindow in div

how can I set the renderwindow to a div in my DOM?

Scrolling through slices with InteractorStyleImage

This is similar to issue 232, but I'm running into an issue scrolling through the slices with InteractorStyleImage. Using this example as a guide but loading the ‘LIDC2.vti’ example volume, I can get various slices to show up on loading with mapper.setZSclice(), but am then unable to scroll through. Here's a bit of my setup code:

    const mapper = vtkImageMapper.newInstance();
    const actor = vtkImageSlice.newInstance();
    actor.setMapper(mapper);

    const iStyle = vtkInteractorStyleImage.newInstance();
    iStyle.setInteractionMode('IMAGE_SLICING');
    renderWindow.getInteractor().setInteractorStyle(iStyle);

I'm on a mac, and as I understand it, 'ctl+drag' should allow me to scroll through the slices in the volume, but ctl+drag doesn't seem to do anything, while command+drag fires a window/level event. If I switch InteractionMode to 'IMAGE3D' and press shit+drag I get the expected rotation event, so I'm unsure if its an issue with my setup or something within the code itself. It seems to appear across all browsers as well.

(almost) all links in CONTRIBUTING.md are dead

Points a lot to Documentation/dev/git which doesn't exist anymore? @jourdain

Change zSlice of vtkImageMapper

I try to move zSlice of a vtkImageMapper but without success.
Here's the code I use :

mapper.setInputData(data);
mapper.setUseCustomExtents(true);
const extent = data.getExtent();
mapper.setCustomDisplayExtent(extent[0], extent[1], extent[2], extent[3]);
mapper.setZSlice(50);

Instead of display a slice, the camera zoom on the first slice of the volume.
Did I miss anything to make it works well ?
For info : Used data is "${BASE_PATH}/data/volume/LIDC2.vti"
Here is the slice 0

And here the slice 50 I tried to change but it makes just a zoom

Cannot run examples with the current version of Webpack

When I run an example, I get the following error:
Error: Cannot find module '../config/webpack.loaders.js'

It seems like there's a compatibility issue with the current version of Webpack.

vtkCalculator uses eval()

ESLint complains about this line in vtkCalculator https://github.com/Kitware/vtk-js/blob/master/Sources/Filters/General/Calculator/index.js#L24.

1. "Function" is misspelled as "Funtion" resolved in 43316fb
2. new Function() uses eval() 👎
3. space missing after first comma in argument list resolved in 43316fb

Surface + Edges representation

Would this be difficult to achieve?

Wireframe representation shader compilation error

I have a simple visualization. When switching to wireframe representation it renders one image but when I e.g. rotate the view the object disappears. Looking at the Java Script console I can see that the vtkPolyDataFS.glsl shader can not be compiled with the following error:

': ERROR: 0:101: 'texture1' : undeclared identifier 
ERROR: 0:101: 'tcoordVCVSOutput' : undeclared identifier 
ERROR: 0:101: 'st' :  field selection requires structure or vector on left hand side 
ERROR: 0:101: 'texture2D' : no matching overloaded function found 
ERROR: 0:101: '=' :  cannot convert from 'const float' to 'highp 4-component vector of float'

Do you have an idea what's wrong here? You can find the source of the visualization here. Thanks!

glTF support

Not sure if it makes sense for vtk.js but please consider the use of glTF:

https://en.wikipedia.org/wiki/GlTF
https://www.khronos.org/gltf
https://github.com/KhronosGroup/glTF

it should help to load and process 3d data faster

Set Active scalars to a polydata

I'm trying to load a file and display rgb colors to points by using scalars (as this example : http://www.vtk.org/Wiki/VTK/Examples/Cxx/PolyData/ColoredPoints).
When I tried to set scalars or just active scalars to the polydata's point data, the mesh dissapears. The mesh exists, the array exists too.
Did I miss anything ?

reader.loadData().then(() => {
	const mesh = reader.getOutputData();
	if(mesh.getPointData().getNumberOfArrays() !== 0)
	{
		const rgbArray = mesh.getPointData().getArrayByIndex(0);
		rgbArray.setName('Colors');
		mesh.getPointData().setScalars(rgbArray);
		mesh.getPointData().setActiveScalars('Colors');
	}
	mapper.setInputData(mesh);
	renderer.resetCamera();
	renderWindow.render();
});

Thanks

interaction with actors - mouse events - performance

Is it possible to fire events e.g. when the user clicked on an actor or the mouse is over an actor?

This is possible in vtk but not in vtk-js?

Please help me！！

What should I do when I am finished?
I didn't know how to use it even though I read the document.
How can I show it on a web page as an example?
Do I need to use webpack?

insure -> ensure

a few instances of this one is a method name, definitely supposed to be ensure right?

https://github.com/Kitware/vtk-js/search?utf8=%E2%9C%93&q=insure

OBJ Reader appends "index.obj" to URLs

My OBJ file lives at a URL that does not end in ".obj", and this is causing the reader to append "index.obj" to the end of the URL. This was unexpected behavior to me, is there a way to instruct the reader not to add this to the URL?

how does the cow.vtp is generated

I have get the vtk volume render data by the vtk software,but i donnot konw how to use the vtk.js library to show it in the web broswer,and how the .gz data is generate is generated