# vtk.js Renderer not showing Polydata

**URL:** https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822
**Category:** vtk.js
**Created:** [June 26, 2023, 4:55pm UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822 "2023-06-26T16:55:24Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![fleurgaudfernau](https://discourse.vtk.org/user_avatar/discourse.vtk.org/fleurgaudfernau/32/7355_2.png) [@fleurgaudfernau](https://discourse.vtk.org/u/fleurgaudfernau)
#### Post date: [June 26, 2023, 4:55pm UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822/1 "2023-06-26T16:55:24Z")

</div>

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:

```auto
<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](https://discourse.vtk.org/uploads/default/original/2X/1/11df74ccbd74a15c238116a8c5e69b7e18e95e8f.png)

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

```auto
<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_](https://discourse.vtk.org/uploads/default/original/2X/0/062a3ae2e809993a6ed09c707f3c5fbf40911b24.png)

Any help would be great!

Thanks in advance,  
Fleur

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [June 27, 2023, 2:44am UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822/2 "2023-06-27T02:44:06Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![fleurgaudfernau](https://discourse.vtk.org/user_avatar/discourse.vtk.org/fleurgaudfernau/32/7355_2.png) [@fleurgaudfernau](https://discourse.vtk.org/u/fleurgaudfernau)
#### Post date: [June 27, 2023, 10:04am UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822/3 "2023-06-27T10:04:20Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [June 27, 2023, 3:10pm UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822/4 "2023-06-27T15:10:27Z")

</div>

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 ?

---

<div class="post-metadata">

### Author: ![fleurgaudfernau](https://discourse.vtk.org/user_avatar/discourse.vtk.org/fleurgaudfernau/32/7355_2.png) [@fleurgaudfernau](https://discourse.vtk.org/u/fleurgaudfernau)
#### Post date: [June 27, 2023, 3:23pm UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822/5 "2023-06-27T15:23:58Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [June 27, 2023, 10:45pm UTC](https://discourse.vtk.org/t/vtk-js-renderer-not-showing-polydata/11822/6 "2023-06-27T22:45:31Z")

</div>

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.
