# \[vtkjs\] Split view with linked camera - am I doing it right?

**URL:** https://discourse.vtk.org/t/vtkjs-split-view-with-linked-camera-am-i-doing-it-right/4642
**Category:** Web
**Created:** [November 12, 2020, 11:43am UTC](https://discourse.vtk.org/t/vtkjs-split-view-with-linked-camera-am-i-doing-it-right/4642 "2020-11-12T11:43:16Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![nicoco](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/n/7c8e57/32.png) [@nicoco](https://discourse.vtk.org/u/nicoco)
#### Post date: [November 12, 2020, 11:43am UTC](https://discourse.vtk.org/t/vtkjs-split-view-with-linked-camera-am-i-doing-it-right/4642/1 "2020-11-12T11:43:16Z")

</div>

Hello all,

I implemented a split view with linked cameras, similar to what paraview offers, using vtkjs. For this, I instantiated 2 `vtkFullScreenRenderWindow` with `div`s that span half the screen.

```auto
left = vtkFullScreenRenderWindow.newInstance();
right = vtkFullScreenRenderWindow.newInstance();

left.getContainer().style.width = "50%"
left.resize()

right.getContainer().style.width = "50%"
right.getContainer().style.left = "50%"
right.resize()

```

Then I bounded the events of their interactors to the other divs:

```auto
left.getInteractor().bindEvents(right.getContainer());
right.getInteractor().bindEvents(left.getContainer());

```

Finally, once the polydatas are mapped and their actors are added to each renderer, I initialize the camera this way:

```auto
left.getRenderer().resetCamera()
left.getRendererWindow().render()
right.setActivateCamera(left.getActiveCamera())
right.getRendererWindow().render()

```

This works but I was wondering if this is the proper way to achieve my split view with linked cameras or if there was something less _hackish_ available.

Also, I experience some weird (relatively minor) CameraClippingRange issues and was wondering if they could be related to my split view implementation.

Thanks in advance for your help and suggestions!

---

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [November 12, 2020, 2:39pm UTC](https://discourse.vtk.org/t/vtkjs-split-view-with-linked-camera-am-i-doing-it-right/4642/2 "2020-11-12T14:39:45Z")

</div>

I was doing split screen by using a single render window and setting the viewport properties of each renderer that I added to the render window.

> globeRenderer1.setLayer(0);  
> globeRenderer1.setActiveCamera(renCam);  
> globeRenderer1.setViewport(0.001, 0.01, 0.495, 0.99);
> 
> globeRenderer2.setLayer(0);  
> globeRenderer2.setActiveCamera(renCam);  
> globeRenderer2.setViewport(0.501, 0.01, 0.995, 0.99);
> 
> renderWindow.addRenderer(globeRenderer1);  
> renderWindow.addRenderer(globeRenderer2);

---

<div class="post-metadata">

### Author: ![nicoco](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/n/7c8e57/32.png) [@nicoco](https://discourse.vtk.org/u/nicoco)
#### Post date: [November 12, 2020, 3:14pm UTC](https://discourse.vtk.org/t/vtkjs-split-view-with-linked-camera-am-i-doing-it-right/4642/3 "2020-11-12T15:14:30Z")

</div>

> single render window

Oh I see, I did not realize that there was a `viewport` property I could use. I guess this is more resource-friendly than having two render windows. I will try to change my code accordingly and I’ll post here in case I run into trouble.