VTK.js blank screen

Web
1

I am trying to get the VTK.js examples to work in my Django Project and the webpack produces the js code (attached). However, when I load this code in my html template I get a blank (responsive) window. Any idea what I am missing here?

Hope you can help!

Jord
app.js (1.0 MB)

2

Hard to tell without seeing how you bind your view to your html and what you are doing. Having your app running somewhere could help, but having the code could be easier too.

3

Hi Sebastien,

Thanks for your reply! I use django-webpack-loader (GitHub - django-webpack/django-webpack-loader: Transparently use webpack with django). My index.js:

import 'regenerator-runtime/runtime';
import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';

// --- Set up our renderer ---

const container = document.querySelector('#container');

// We use the wrapper here to abstract out manual RenderWindow/Renderer/OpenGLRenderWindow setup
const genericRenderWindow = vtkGenericRenderWindow.newInstance();
genericRenderWindow.setContainer(container);
genericRenderWindow.resize();

const renderer = genericRenderWindow.getRenderer();
const renderWindow = genericRenderWindow.getRenderWindow();

// --- Set up the cone actor ---

const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();

// this generates a cone
const coneSource = vtkConeSource.newInstance({
  height: 1.0,
});

// the mapper reads in the cone polydata
// this sets up a pipeline: coneSource -> mapper
mapper.setInputConnection(coneSource.getOutputPort());

// tell the actor which mapper to use
actor.setMapper(mapper);

// --- Add actor to scene ---

renderer.addActor(actor);

// --- Reset camera and render the scene ---

renderer.resetCamera();
renderWindow.render();

// --- Expose globals so we can play with values in the dev console ---
global.renderWindow = renderWindow;
global.renderer = renderer;
global.coneSource = coneSource;
global.actor = actor;
global.mapper = mapper;

webpack config:

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var vtkRules = require('@kitware/vtk.js/Utilities/config/dependency.js').webpack.core.rules;

module.exports = {
  context: __dirname,
  entry: './assets/js/index',
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ].concat(vtkRules),
  },
  output: {
      path: path.resolve('./assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'})
  ]

}

and html:

{% extends "base_generic.html" %}
{% load render_bundle from webpack_loader %}

{% block content %}

<div id="container">
    {% render_bundle 'main' %}
</div>

{% endblock %}
4

It might be due to the fact that you are not loading a profile assuming you are using vtk.js 17+.

See breacking changes

5

That solved my problem, thanks!