How to get started - ParaView Animated Scene to vtk.js

Web
1

Hello, I’m new to vtk.js and js development in general. I’m trying to lear on my own and I’m looking for some guidance on rendering an Animated Scene (.vtkjs) exported from ParaView.

I’m on Chrome, and I’ve tried to follow several examples but I could not succeed: once I build and my js app, in the browser I only see the typical ParaView background and no 3D mesh.

To make this question more general, I’d pick the available dataset from the alduin-dragon.vtkjs example. Can you please guide me step-by-step on how to reproduce the same viewport in the website? I guess I could revet-engineer all that, but I’d like to think that a beginner would be offered some tutorial guidance :slight_smile:

Assume all I have is: Chrome, npm installed, the alduin-dragon.vtkjs file and the js snipped from the tutorial. How do I go from here to a beautiful viewport on localhost:8080?

2

Do you have any error in the console ?
What command line did you type to get the scene example working ?

3

Thanks for the reply Julien. Here’s what I did:

  1. npm install @kitware/vtk.js
  2. Created a folder structure like this:
    my-project/ ├── dist/ ├── node_modules/ ├── src/ │ ├── index.js │ └── index.html ├── .babelrc ├── package.json └── webpack.config.js
    Where:
  • index.js is copy-paste from one of the example pages in the vtk repo and it has (with a proper path for the .vtkjs file):
import '@kitware/vtk.js/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/All';

// Force DataAccessHelper to have access to various data source
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';
import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';

import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkHttpSceneLoader from '@kitware/vtk.js/IO/Core/HttpSceneLoader';

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------

const sceneImporter = vtkHttpSceneLoader.newInstance({
  renderer,
  fetchGzip: true,
});
sceneImporter.setUrl(`/path/to/alduin-dragon.vtkjs`);
sceneImporter.onReady(() => {
  renderWindow.render();
});
  • index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VTK.js Example</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
  • webpack.config.js is:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    contentBase: './dist',
  },
};
  • babelrc is:
{
    "presets": ["@babel/preset-env"]
  }
  • package.json is:
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack"
  },
  "dependencies": {
    "@kitware/vtk.js": "^21.0.0",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "css-loader": "^5.1.3",
    "file-loader": "^6.2.0",
    "style-loader": "^2.0.0"
  }
}

then I ran:

npm install
npm start
4

The path tree is not rendered correctly, so here it is:
image

5

The console shows this error:
Cannot GET /path/to/webapp/data/scene/alduin-dragon.vtkjs/index.json

This is useful! I don’t have index.json and I don’t know where to get it from:

  • the Export Temporal Scene function from Paraview does not generate it
  • the vtk-js-datasets GitHub repo has index.json only in temporal dataset. For the vtkjs files there nothing but vtkjs files:
    image
    image662×1098 52.7 KB
6

You should drop the fetchGzip: true line in your script. That enables a different fetch mechanism (hence the request to index.json).