vtk.js Renderer not showing Polydata

Web vtk.js
1

Hello everyone,
I am using vtk.js (imported as an external file) to add a mesh visualization section on my personal GitHub page. I’m working directly on my Github page so debugging is not very convenient.

The following example is working just fine:

<html>
<body>
<script type="text/javascript" src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
 var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
     background: [0, 0, 0],
     containerStyle: { width: '400px', height: "600px" } });
   var actor              = vtk.Rendering.Core.vtkActor.newInstance();
   var mapper             = vtk.Rendering.Core.vtkMapper.newInstance();
   var cone               = vtk.Filters.Sources.vtkConeSource.newInstance();
   var camera             = vtk.Rendering.Core.vtkCamera.newInstance();
   actor.setMapper(mapper);
   mapper.setInputConnection(cone.getOutputPort());
   var renderer = fullScreenRenderer.getRenderer();
   renderer.addActor(actor);
   renderer.resetCamera();
   var renderWindow = fullScreenRenderer.getRenderWindow();
   renderWindow.render();
  
 </script>
 </body>
 </html>

Capture
Capture1847×771 17 KB

However, when I try to visualize a mesh of my own, only a blank screen appears on my website.

<body>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">  
  var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
    background: [0, 0, 0],
    containerStyle: { width: '400px', height: "600px" } });
  var actor = vtk.Rendering.Core.vtkActor.newInstance();
 var mapper = vtk.Sources.Rendering.OpenGL.PolyDataMapper.newInstance();
  var reader = vtk.IO.Legacy.vtkPolyDataReader.newInstance();
  var camera             = vtk.Rendering.Core.vtkCamera.newInstance();
  const url              = '/assets/img/my_mesh.vtk';

  reader.setUrl(url);
  reader.update();
  mapper.setInputData(reader.getOutputData());
  actor.setMapper(mapper);  
  var renderer = fullScreenRenderer.getRenderer();
  renderer.addActor(actor);
  renderer.resetCamera(); 
  var renderWindow = fullScreenRenderer.getRenderWindow();
  renderWindow.render(); 
</script>
</body>
</html>

Capture_
Capture_1815×775 11.7 KB

Any help would be great!

Thanks in advance,
Fleur

2

Your mapper is not the correct one. Use the one you used for the Cone.

Also are you sure the vtk file you have is supported by vtk.js. The JS implementation is fairly limited and if you can, you should use the vtp format.

1 Like
3

Thank you for your answer!

Unfortunately, I still obtain the same result as before.

I did the following:
1-use vtkMapper instead of OpenGL.PolyDataMapper
2-convert my_mesh.vtk to a .vtp file (and checked it appears OK in Kitware Glance)
3-use vtkXMLPolyDataReader instead of vtkPolyDataReader

What am I missing?

My code:

<html>
<body>
<script type="text/javascript" src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">  
  var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
    background: [0, 0, 0],
    containerStyle: { width: '400px', height: "600px" } });
  var actor = vtk.Rendering.Core.vtkActor.newInstance();
  var mapper = vtk.Rendering.Core.vtkMapper.newInstance(); 
  var reader = vtk.IO.XML.vtkXMLPolyDataReader.newInstance();
  const url              = '/assets/img/my_mesh.vtp';

  reader.setUrl(url);
  mapper.setInputData(reader.getOutputData());
  actor.setMapper(mapper);  
  var renderer = fullScreenRenderer.getRenderer();
  renderer.addActor(actor);
  renderer.resetCamera(); 
  var renderWindow = fullScreenRenderer.getRenderWindow();
  renderWindow.render(); 
</script>
</body>
</html>
4

Are you sure that the vtp file get downloaded when you put /assets/img/my_mesh.vtp in the URL of your browser? Any console or network error ?

5

Actually I replaced mapper.setInputData(reader.getOutputData()); with
mapper.setInputConnection(reader.getOutputPort()); and now it works!

By the way, how can I add a range slider over the view so that the user can control the zoom more easily? I scrolled through the examples and did not find a zoom controller.

6

Ah, I missed that… Indeed since the data loading is deferred grabbing the dataset rather than connecting the reader to the rendering will lead to showing nothing due to bad timing.

Please ask your next question in another thread. Otherwise people will ignore it thinking it is rendering related.

1 Like