# How to reset or clear the renderer window?

**URL:** <https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228>\
**Category:** vtk.js\
**Tags:** vtkjs\
**Created:** [September 1, 2023, 8:13am UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228 "2023-09-01T08:13:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sunita](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunita/32/7519_2.png) [@sunita](https://discourse.vtk.org/u/sunita)\
**Post date:** [September 1, 2023, 8:13am UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/1 "2023-09-01T08:13:30Z")

</div>

Dear VTK users,

We are trying to reset or clear the renderer window using renderer.removeAllViewProps(). After execution it is not clearing the renderer window but it is clearing only after a mouse click on the window. We have three actors and we are trying to show one after the other which should reset the renderer window before showing a new actor.

How to perform this?

Thanks in advance. We will highly appreciate your help.

Best regards,  
Sunita

---

<div class="post-metadata">

**Author:** ![sunita](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunita/32/7519_2.png) [@sunita](https://discourse.vtk.org/u/sunita)\
**Post date:** [September 2, 2023, 12:35pm UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/2 "2023-09-02T12:35:36Z")

</div>

Dear Sebastien,

Could you please guide us.  
Your suggestion always been very helpful.

Thank you so much.

Best regards,  
Sunita

---

<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:** [September 3, 2023, 4:49am UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/3 "2023-09-03T04:49:15Z")

</div>

Just call `renderWindow.render()`.

---

<div class="post-metadata">

**Author:** ![sunita](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunita/32/7519_2.png) [@sunita](https://discourse.vtk.org/u/sunita)\
**Post date:** [September 4, 2023, 1:35pm UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/4 "2023-09-04T13:35:03Z")

</div>

Hi Sebastien,

We tried and its working. It clears the renderer window. But when showed it again, it loaded the data two times it seems. Doing this repeatedly 5 to 6 times it shows down the mouse movements.

We are not able to figure out where we are doing wrong?

Your help will be highly appreciated.

Thanks a lot.

Best regards,  
Sunita

Please find the details of the code as given below.

```
  // Load the rendering pieces we want to use (for both WebGL and WebGPU)
  import "@kitware/vtk.js/Rendering/Profiles/Geometry";
  import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
  import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
  import vtkXMLPolyDataReader from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
  import vtkOpenGLRenderWindow from "@kitware/vtk.js/Rendering/OpenGL/RenderWindow";
  import vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow";
  import vtkRenderWindowInteractor from 
  "@kitware/vtk.js/Rendering/Core/RenderWindowInteractor";
  import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
  import vtkInteractorStyleTrackballCamera from 
  "@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera";
  
  //
  const renderWindow = vtkRenderWindow.newInstance();
  const renderer = vtkRenderer.newInstance({ background: [0, 0, 0] });
  renderer.getActiveCamera().elevation(90);
  renderer.getActiveCamera().azimuth(0);
  renderer.getActiveCamera().setViewUp(0, 0, 1);
  
  renderWindow.addRenderer(renderer);
  //
  const openGLRenderWindow = vtkOpenGLRenderWindow.newInstance();
  //
  const container = document.getElementById("contain");
  openGLRenderWindow.setContainer(container);
  renderWindow.addView(openGLRenderWindow);
  //
  const { width, height } = container.getBoundingClientRect();
  openGLRenderWindow.setSize(width, height);
  //
  const interactor = vtkRenderWindowInteractor.newInstance();
  interactor.setView(openGLRenderWindow);
  interactor.bindEvents(container);
  //
  interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
  
  //
  function show_A(data) {
    //
    let br_reader = vtkXMLPolyDataReader.newInstance();
    br_reader.parseAsArrayBuffer(data);
    //
    let br_mapper = vtkMapper.newInstance();
    br_mapper.setInputConnection(br_reader.getOutputPort());
    //
    let br_actor = vtkActor.newInstance();
    br_actor.getProperty().setRepresentation(2);
    br_actor.getProperty().setOpacity(0.4);
    br_actor.getProperty().setColor(1, 1, 1);
    br_actor.setMapper(br_mapper);
    //
    renderer.addActor(br_actor);
    renderer.resetCamera();
    interactor.initialize();
  }
  
  //
  function show_B(data) {
    //
    let nr_reader = vtkXMLPolyDataReader.newInstance();
    nr_reader.parseAsArrayBuffer(data);
    //
    let nr_mapper = vtkMapper.newInstance();
    nr_mapper.setInputConnection(nr_reader.getOutputPort());
    //
    let nr_actor = vtkActor.newInstance();
    nr_actor.getProperty().setRepresentation(2);
    nr_actor.getProperty().setOpacity(0.6);
    nr_actor.getProperty().setColor(0, 1, 0);
    nr_actor.setMapper(nr_mapper);
    //
    renderer.addActor(nr_actor);
  }
  
  //
  function show_C(data) {
    //
    let ed_reader = vtkXMLPolyDataReader.newInstance();
    ed_reader.parseAsArrayBuffer(data);
    //
    let ed_mapper = vtkMapper.newInstance();
    ed_mapper.setInputConnection(ed_reader.getOutputPort());
    //
    let ed_actor = vtkActor.newInstance();
    ed_actor.getProperty().setRepresentation(2);
    ed_actor.getProperty().setOpacity(0.6);
    ed_actor.getProperty().setColor(1, 0, 0);
    ed_actor.setMapper(ed_mapper);
    //
    renderer.addActor(ed_actor);
  }
  
  //
  function show_D(data) {
    //
    let et_reader = vtkXMLPolyDataReader.newInstance();
    et_reader.parseAsArrayBuffer(data);
    //
    let et_mapper = vtkMapper.newInstance();
    et_mapper.setInputConnection(et_reader.getOutputPort());
    //
    let et_actor = vtkActor.newInstance();
    et_actor.getProperty().setRepresentation(2);
    et_actor.getProperty().setOpacity(0.6);
    et_actor.getProperty().setColor(1, 1, 0);
    et_actor.setMapper(et_mapper);
    //
    renderer.addActor(et_actor);
  }
  
  //
  function reader(file, res) {
    const reader = new FileReader();
    reader.onload = function onLoad(e) {
      if (res == "f1") {
        show_A(reader.result);
      } else if (res == "f2") {
        show_B(reader.result);
      } else if (res == "f3") {
        show_C(reader.result);
      } else if (res == "f4") {
        show_D(reader.result);
      } else {
        console.log("Wrong Image!!");
      }
    };
    reader.readAsArrayBuffer(file);
  }
  
  function converter(fileUrl, fileName) {
    return fetch(fileUrl)
      .then((response) => response.blob())
      .then((blob) => new File([blob], fileName, { type: blob.type }));
  }
  
  async function main() {
    let keyA = document.getElementById("keyA").value; // 1
    let keyB = document.getElementById("keyB").value; // 2
    let keyC = document.getElementById("keyC").value; // 3
    let keyD = document.getElementById("keyD").value; // 4
    let btnC = document.getElementById("btnC").value; // Btn
  
    const fileA = await converter(keyA, "A");
    const fileB = await converter(keyB, "B");
    const fileC = await converter(keyC, "C");
    const fileD = await converter(keyD, "D");
  
    if (btnC == 0) {
      // clear
    } else if (btnC == 1) {
      reader(fileA, "f1");
      reader(fileB, "f2");
      reader(fileC, "f3");
      reader(fileD, "f4");
    } else if (btnC == 2) {
      reader(fileA, "f1");
      reader(fileB, "f2");
    } else if (btnC == 3) {
      reader(fileA, "f1");
      reader(fileC, "f3");
    } else if (btnC == 4) {
      reader(fileA, "f1");
      reader(fileD, "f4");
    }
  }
  
  main();

```

---

<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:** [September 4, 2023, 4:14pm UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/5 "2023-09-04T16:14:52Z")

</div>

I don’t understand what you mean.

Also I’m not sure why in your code you have some `renderer.addActor(et_actor);` without `renderWindow.render()` call afterward. And maybe you also want a `renderer.resetCamera();` in between?

---

<div class="post-metadata">

**Author:** ![sunita](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunita/32/7519_2.png) [@sunita](https://discourse.vtk.org/u/sunita)\
**Post date:** [September 5, 2023, 12:06pm UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/6 "2023-09-05T12:06:50Z")

</div>

> [@Sebastien\_Jourdain](#):
>
> `renderWindow.render()`.

We have four vtp files which should be rendered simultaneously and they should come in the same renderer window. Its working fine. We want to show combination of vtp files such as (1+2 or 1+3 or 1+4 or 1+2+3+4) together. Here 1, 2, 3, and 4 are the vtp file’s number.

When we try to render a combination for the first time it works. However, after that for every other combinations, the 3D view becomes more brighter and also slows down the rendering.

We added separate actors according to the file in the same renderer window like br\_actor, nr\_actor, ed\_actor and et\_actor.

What could be the reason for this?

Thanks a lot.

Best regards,  
Sunita

---

<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:** [September 5, 2023, 3:42pm UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/7 "2023-09-05T15:42:04Z")

</div>

It sounds like you keep loading and adding the same mesh into the view more than once.  
How do you clean your VTK pipeline and manage life cycle?

---

<div class="post-metadata">

**Author:** ![sunita](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunita/32/7519_2.png) [@sunita](https://discourse.vtk.org/u/sunita)\
**Post date:** [September 6, 2023, 6:40am UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/8 "2023-09-06T06:40:35Z")

</div>

You have correctly identified the problem. We don’t know how to clean the VTK pipeline as we are very new to VTK. We have provided the whole code we are using. Your suggestion on this will be of great help to us. How to load data mesh only once and render or clear the combinations of vtp files multiple times on the renderer window?

Thank you so much.

Best regards,  
Sunita

---

<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:** [September 6, 2023, 3:36pm UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/9 "2023-09-06T15:36:15Z")

</div>

You can call removeActor or load all the data and toggle the various actor visibility properties.

---

<div class="post-metadata">

**Author:** ![sunita](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sunita/32/7519_2.png) [@sunita](https://discourse.vtk.org/u/sunita)\
**Post date:** [September 9, 2023, 3:17am UTC](https://discourse.vtk.org/t/how-to-reset-or-clear-the-renderer-window/12228/10 "2023-09-09T03:17:24Z")

</div>

Thank you so much Sebastien.

Finally it worked. We are calling the actors once and changing the visibility properties as needed.  
You have guided so wonderfully that in spite being very new to VTK we could solve all the problems.

Thanks again.

Best regards,  
Sunita