kitwaremedical / vtk.js-examples

These are a few examples for vtk.js

VTK.js examples

This repository contains VTK.js examples used in the VTK.js+OHIF tutorials. A link will be provided to the final slides (to be inserted).

Examples overview

There are a few examples in this repo. They are listed below:

• standalone.html: A self-contained example that renders a cone. Useful as a playground and prototyping.
• src/cone.js: Same result as standalone.html, but using a webpack build approach. Good base for further application development.
• src/cone-filter.js: Example that demonstrates VTK.js filters.
• src/volume.js: Example that demonstrates basic volume rendering without transfer functions. Refer to the transfer function volume example for a complete rendering example.
• src/volume-transfer.js: Example that demonstrates basic volume rendering with transfer functions.
• src/image-slicing.js: Example that demonstrates volume slicing and interaction.
• src/widgets.js: Example that demonstrates a volume cropping widget.

Building the examples

For standalone.html, no build instructions are required. Just load it up in your browser!

For the rest of the examples, you first must install the npm packages by running the following:

npm install

Once you've run that, you can now run one of the example projects:

• npm run dev:cone
• npm run dev:cone-filter
• npm run dev:volume
• npm run dev:volume-transfer
• npm run dev:image-slicing
• npm run dev:widgets

Running the above commands will use the webpack-dev-server, which will watch the transpiled files and reload the page whenever changes occur. Once run, you can see the results at http://localhost:8080/.

vtk.js-examples's Issues

Can't run the example

Hi, thank you so much for this great repo!
standalone.html works, but after the npm install (that said there were 157 vulnerabilities (4 low, 52 moderate, 79 high, 22 critical) ), I've tried both '''npm run dev:cone''' and '''npm run dev:image-slicing''' but had this block:
'''

[email protected] dev:cone
EXAMPLE=cone.js webpack-dev-server --mode=development

(node:5157) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
(node:5157) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/tesla/EsempioVtkGit/vtk.js-examples/dist
node:internal/crypto/hash:68
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/util/createHash.js:90:53)
at NormalModule._initBuildHash (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:386:16)
at handleParseError (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:434:10)
at /home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:466:5
at /home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:327:12
at /home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v21.5.0
'''

Do you think it depends on my version of nodeJs?

Thank you for the help

can not generate app.js

Hi there i am following the steps in the tutorial 2
And When I do 'npm run build',I got errors like this:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: webpack-dev-server --mode=production --progress
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tanghui/.npm/_logs/2020-03-16T01_54_04_855Z-debug.log

=======================

I have my index.js and the packages installed as required

please help thanks a lot!

Webpack dev server

Trying to run webpack dev server using the same config from the repository and get this error

Cannot find module 'webpack-cli/bin/config-yargs

Changing the webpack version is a recommended solution but I get compatibility issues with kw-web-suite

Windows7 Test，package.json config

{
"name": "vtkjs-example",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"build-webpack": "webpack --progress --colors --mode development",
"start": "webpack-dev-server --port 33333 --content-base ./dist",

"build": "webpack-dev-server --mode=production --progress  --port 33333",

"dev": "webpack-dev-server --mode=development  --port 33333",

"dev:cone": "set EXAMPLE=cone.js & webpack-dev-server --mode=development  --port 33333",
"dev:cone-filter": "set EXAMPLE=cone-filter.js & webpack-dev-server --mode=development  --port 33333",
"dev:volume": "set EXAMPLE=volume.js & webpack-dev-server --mode=development  --port 33333 --",
"dev:volume-transfer": "set EXAMPLE=volume-transfer.js & webpack-dev-server --mode=development  --port 33333",
"dev:image-slicing": "set EXAMPLE=image-slicing.js & webpack-dev-server --mode=development  --port 33333",
"dev:widgets": "set EXAMPLE=widgets.js & webpack-dev-server --mode=development  --port 33333"

},
"author": "",
"license": "BSD-3-Clause",
"dependencies": {
"vtk.js": "^13.10.0"
},
"devDependencies": {
"kw-web-suite": "^9.0.0",
"webpack": "^4.41.6"
}
}

Example on normal plane view

There is no example on how to set the view angle for the renderer or its active camera to align with X, Y or Z axis. Tried many methods from the camera and renderer and could not get it to work.

In general, more documentation of camera settings is much appreciated.

Thanks

Display color bar and coordinate grids

There is no example that has a color bar or coordinate axis. Is it possible to include an example that shows a color bar along with axis grids? Something like this example

Is it possible to use oulineFilter to display axis ticks along X, Y and Z?

how to build the example using webpack

hello, I am new here to study vtk.js. I have been using vtk CPP for a long time but I am not familiar with js. I wonder how to build the vtk.js example. I try to build but I was stuck in the version dependency and webpack error. Could anyone give me a detailed description? Thanks!