Using vtk.js in an angular app

Web
1

I am using Geometry viewer in my angular app. I embedded the html page inside my application without any imports. I want to extend the viewer capabilities so I wish to use vtk.js and build things from scratch.

I tried to look at the documentation but I couldn’t find any helpful guide. I installed the node modules in my angular app but have difficulty in importing and using it. Also is there any types support in vtk.js when using Typescript ?

2

We have very few types in vtk.js that have been defined using TypeScript.
This is something we would like to pursue but we keep having other priority that push that further back in time.

Regarding angular integration, and how to import it, I’m not sure what are the difficulties you are facing. The docs are mostly for general JS usage which should still be true for any framework.

Rules needs to be defined so vtk.js/Sources/** can be properly handled.
Those rules have been extracted in many format but most likely not the way Angular is expecting them. But they should give you enough to figure out what need to happen in your framework of predilection. You can look at them in that directory.

And here are the various example on how to use vtk.js from Sources

HTH,

Seb

3

Here is a Typescript file I created that utilizes vtk.js

1 Like
4

Thanks @Sebastien_Jourdain for your pointers. I have some experience with angular and no experience with js. I tried to read on modern web development with webpack. I tried to follow the es6_dependency example and was able to start a standalone project. Now I am trying to do the same in angular. I tried to create an angular component based on @Donny_Zimmerman example and when I build it I get the following error

ERROR in ./node_modules/vtk.js/Sources/Rendering/OpenGL/glsl/vtkVolumeVS.glsl 18:10
Module parse failed: Unexpected token (18:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| =========================================================================*/
| 
> attribute vec4 vertexDC;
| 
| varying vec3 vertexVCVSOutput;

(above is part of the error stack, let me know if you need complete error stack)

I created my typescript file as following

import { Component, OnInit } from '@angular/core';

import vtkConeSource from 'vtk.js/Sources/Filters/Sources/ConeSource';
import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';
import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';

@Component({
  selector: 'nse-geometry-viewer-es6',
  styleUrls: ['./geometry-viewer-es6.component.scss'],
  templateUrl: './geometry-viewer-es6.component.html'
})
export class GeometryViewerEs6Component implements OnInit {
  constructor() {}

  public ngOnInit() {
    const container = document.querySelector('#container');

    // VTK renderWindow/renderer
    const renderWindow = vtkRenderWindow.newInstance();
    const renderer = vtkRenderer.newInstance();
    renderWindow.addRenderer(renderer);

    // WebGL/OpenGL impl
    const openGLRenderWindow = vtkOpenGLRenderWindow.newInstance();
    openGLRenderWindow.setContainer(container);
    openGLRenderWindow.setSize(1000, 1000);
    renderWindow.addView(openGLRenderWindow);

    // Interactor
    const interactor = vtkRenderWindowInteractor.newInstance();
    interactor.setView(renderWindow);
    interactor.initialize();
    interactor.bindEvents(container);

    // Interactor style
    const trackball = vtkInteractorStyleTrackballCamera.newInstance();
    interactor.setInteractorStyle(trackball);

    // Pipeline
    const cone = vtkConeSource.newInstance();
    const actor = vtkActor.newInstance();
    const mapper = vtkMapper.newInstance();

    actor.setMapper(mapper);
    mapper.setInputConnection(cone.getOutputPort());
    renderer.addActor(actor);

    // Render
    renderer.resetCamera();
    renderWindow.render();
  }
}

I installed vtk.js from npm but I don’t know how to configure webpack for vtkjs (Do we need to replace @angular-devkit/build-angular with some custom webpack ?)

5

So the missing part is the registration of vtk.js rules within your angular/webpack infrastructure. And I don’t know how you can extends those rules within angular.

Vue.js has a chain mechanism for it. But That’s about what I know.

6

@Sebastien_Jourdain, I was able to use vtk.js in angular project with guidance from Forrest Li, here is the link from vtk.js github issues https://github.com/Kitware/vtk-js/issues/1003#issuecomment-676477880

Can we have this in documentation ?

It took me lot a time to get to this point and still I couldn’t figure it out on how to configure rules. Thanks to minimal reproduction from Forrest Li, I am now able to use it in my project. I feel it would be a good idea to have it in documentation.

I am open to contribute in ways possible to have this example in vtk.js documentation.

7

Thanks to @floryst , works with this example https://github.com/Kitware/vtk-js/issues/1003#issuecomment-676477880