Multiviews are not working, what am I doing wrong?

Questions
1

Hi!

I am working on task to add a picture-in-picture screen to my project. I want the pip to render the view of a second camera in the scene → I want to render from an additional camera on a separate canvas, while the main camera renders on the main canvas used to instantiate the engine.

I followed the steps from the demo here - Using Multiple Canvases | Babylon.js Documentation, but the main view seems frozen and does not respond to interaction. It seems like the main view is not rendered → the render loop with the main camera is being ignored.

I have reproduced the issue in this PG. (the view registration happens at the end of the code) - https://playground.babylonjs.com/#387GIV#1. There are no errors being thrown, and I am not sure what is going wrong. Pease help :slight_smile:

2

Hello! Just to check, is a second canvas required? Because if you’d just like to render on top of an original canvas, a viewport would be a much faster way of doing it. If you do need a second canvas, then there is a few things to keep in mind: first, the canvas used to create the engine should not be displayed directly, so you’d have to create two extra canvases: one to be the main one, and another for the PIP. Second, if the canvases are of different sizes, it will require a resize operation every frame, which can be expensive.

2 Likes
3

Ahh that must be what I have been doing wrong! I will try it out with separate canvases.

I did try it out with a viewport first. I wanted to try out a separate canvas for two reasons

  • Using a viewport means the scene.activeCamera variable does not refer to the main camera anymore. The codebase is quite large and has many references to scene.activeCamera. I wanted to avoid this change if possible. I wanted to see if the approach with using a separate canvas maybe avoids this problem.
  • Using a separate canvas means that I can make the PIP responsive with the other html elements on my page, which I prefer :slight_smile: The two canvases do differ in size, I will check how much performance is impacted; I do not intend to have more than one additional canvas.

Thank you :slight_smile:

1 Like