# registerView question

**URL:** <https://forum.babylonjs.com/t/registerview-question/28781>\
**Category:** Questions\
**Created:** [March 26, 2022, 8:36am UTC](https://forum.babylonjs.com/t/registerview-question/28781 "2022-03-26T08:36:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [March 26, 2022, 8:36am UTC](https://forum.babylonjs.com/t/registerview-question/28781/1 "2022-03-26T08:36:39Z")

</div>

repro: [Babylon.js Playground](https://playground.babylonjs.com/#YICJXI)

This stemmed from my integrating multi-view in my own app. The top portion are codes of the default playground. Pls comment and uncomment `engine.registerView(canvas2, camera2);`. Observe that the default canvas view is affected by the position of camera2. I’m not 100% sure how multi-view is supposed to work. I was expecting canvas2 to show camera2’s view while the default canvas remains unaltered.

Is this wai ?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 27, 2022, 12:40pm UTC](https://forum.babylonjs.com/t/registerview-question/28781/2 "2022-03-27T12:40:02Z")

</div>

Yup it is exepected as in this case the main canvas is a working canvas only. From the doc:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/b/bb02ec68b1800aec9a2e5b41877927bfe41d078e.png)

[Using Multiple Canvases | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/scene/multiCanvas) There is also some tricks in the doc to help with perfs and such

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [March 28, 2022, 4:08am UTC](https://forum.babylonjs.com/t/registerview-question/28781/3 "2022-03-28T04:08:12Z")

</div>

ok, so that was what the working canvas warning meant. hmm…its time for me to ask for help!

This is what I want:

[![](https://www.newstatesman.com/wp-content/uploads/sites/2/2021/09/100596-theme-hospital-screenshot.png) ](https://www.newstatesman.com/wp-content/uploads/sites/2/2021/09/100596-theme-hospital-screenshot.png)

This is a ss of a retro game: theme hospital. The top right ui displays the a patient’s location and stats in 2d.

This is what I have now, using multiview:

 ![registerView](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/4/243ff93c76d6f7fbe1fc3327b27cd1bd4b93890b.jpeg)

The bottom left blue bordered view uses multi-view. It allows the user to spy on their AI character assets via camera tracking and following. The ui is toggleable and movable. The perf in ffox dropped from somewhere around 50fps to 30fps from the moment the view was enabled. In Chrome, its a little better (60fps to 45fps). How can I achieve the spy effect w/o the perf hit ? Should I be using multi-view ? or is there a better recommendation ?

---

<div class="post-metadata">

**Author:** ![nazmouse22](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nazmouse22/32/21957_2.png) [@nazmouse22](https://forum.babylonjs.com/u/nazmouse22)\
**Post date:** [March 28, 2022, 5:30am UTC](https://forum.babylonjs.com/t/registerview-question/28781/4 "2022-03-28T05:30:08Z")

</div>

So if I get the idea right… **What about the camera that renders a specific region of the game into a RenderTexture**?

You basically make the camera draw into a texture that resides in a GPU so you avoid all the heavy instructions on CPU that get dispatched when you render into different contexts, in your case - canvases, so no need for _OS → browser sandbox → webgl → canvas_ etc. thus performance improve

Here’s a good example of it [https://playground.babylonjs.com/#69DRZ1](https://playground.babylonjs.com/#69DRZ1) , you just need 2 cameras rendering and pick an optimal RenderTexture resolution so you don’t take more GPU memory than you need

You can read more about it here: [https://doc.babylonjs.com/divingDeeper/postProcesses/renderTargetTextureMultiPass](https://doc.babylonjs.com/divingDeeper/postProcesses/renderTargetTextureMultiPass)

_Edit._  
On top of that you also get an ability to apply various post processing to your render texture such as black and white effect or blur or whatever you like, really, you can even rebuild the depth and do something with it in RT so the possibilities are endless 🙂

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [March 28, 2022, 8:44am UTC](https://forum.babylonjs.com/t/registerview-question/28781/5 "2022-03-28T08:44:43Z")

</div>

Hey, RTT is a nice idea! So I mocked up a quick test: [https://playground.babylonjs.com/#YICJXI#3](https://playground.babylonjs.com/#YICJXI#3)

On chrome, it still doesn’t feel smooth. There is the occasional stickiness when panning the camera, guessing `DumpData` is consuming bandwidth. It could work if there was a blazing fast way of getting the pixel data from the RTT every frame.

edit: ehehe, found a faster way: [https://playground.babylonjs.com/#YICJXI#4](https://playground.babylonjs.com/#YICJXI#4)

---

<div class="post-metadata">

**Author:** ![nazmouse22](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nazmouse22/32/21957_2.png) [@nazmouse22](https://forum.babylonjs.com/u/nazmouse22)\
**Post date:** [March 28, 2022, 2:03pm UTC](https://forum.babylonjs.com/t/registerview-question/28781/6 "2022-03-28T14:03:26Z")

</div>

Oh you don’t need an extra canvas anymore, like I mentioned above rendering to the canvas is the expensive part because of moving data back and forth so yeah it looks like your 2nd playground is the one 🙂

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 28, 2022, 4:19pm UTC](https://forum.babylonjs.com/t/registerview-question/28781/7 "2022-03-28T16:19:19Z")

</div>

I would totally remove the second canvas to help perf as the gui part occludes most of the game 🙂

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [March 29, 2022, 4:11am UTC](https://forum.babylonjs.com/t/registerview-question/28781/8 "2022-03-29T04:11:29Z")

</div>

For completeness and for future users who might stumble upon the same need, I present [moving dude](https://playground.babylonjs.com/#11BH6Z#766) PG. So far, works well in ffox and Chrome. Marking as solved, thanks everyone for helping !
