I’m trying to render a preview of a second free cam that the user can control. At first I was looking into the Viewport Class, but there are a couple of issues I’m running up against.
First, there doesn’t seem to be a way to add a background so that you don’t see the meshes inside the other fullscreen viewport. Check out this playground: https://playground.babylonjs.com/#4JXV32#111.
If you rotate the main camera so the large boxes are behind the mini viewport, you can still see those large boxes behind the mini viewport’s boxes. Also, the camera gizmo doesn’t seem to show up anymore once the camera2 is attached to a viewport, so I can’t let the user control the camera.
The second approach is more complex, but uses a RenderTargetTexture to save the secondary camera to an image data string and force that into a <img /> tag because I couldn’t find a way to render a texture to Babylon’s GUI layer (is that possible?) Here is the playground: https://playground.babylonjs.com/#4JXV32#113
I found a way to optimize it with the render target texture’s refreshRate, but generally it seems that Viewports are much more performant. But maybe I am missing something and doing too much conversions?
Oh nice, that did work! The only downside I’m notice is that moving the camera up in the active cameras means the viewport minimap renders behind the larger viewport. So idk if it’s possible to get the camera gizmo and the minimap viewport to overlay above the fullscreen viewport at the same time. The layer was a great pointer though. I love the performance of this approach, but the flexibility to style the image approach is very appealing as well.
I guess we could use the GUI layer and move the minicam viewport above some design images to the correct position and that could potentially resolve that qualm though.
Hi,
I’m not too sure what you want to achieve exactly. Do you want to have controls on the minimap?
Else, for your ordering of cameras, may be this topic and PG can be of help:
Hey @mawa, We don’t need any controls on the minimap. Maybe I described it incorrectly. Think of it less like a minimap and more like a “render view.” It is a free camera that user can move wherever they want and it won’t show gizmos inside its viewport, only the mesh contents of the scene will be rendered.
Right now, what @carolhmj shared is pretty much almost exactly what I need. Here’s an update I made showcasing the main blocker: https://playground.babylonjs.com/#4JXV32#117 If you rotate the camera around, you’ll notice that the render preview viewport is behind the main viewport, but if you flip lines 24 and 25 so that it is above, the camera gizmo and gizmo manager disappear. That’s the core issue right now.
! I have to keep in mind that different things can be applied to different cameras and to look for that in the future.