The title sums up the question. Basically trying to implement a performant minimap, as posted here: Most performant method to implement static minimap?
If I can insert an image into a viewport, that would be great and cut down draw calls, etc. But I would also need to overlay the user marker png on top of the viewport and have the coordinates line up so that the user marker icon appears consistent in the viewport to where the user is in the scene.
Looking at the Viewport class, it doesn’t seem that there is a way to insert an image, but I am wondering if there is a hidden way to do this (code that is not exposed in the documentation, etc.). Thanks!
A viewport is really matching the opengl notion of viewport only defining the size of the rendered content not the content itself.
You could use a Layer for this like here: https://playground.babylonjs.com/#0LYEC3#2
The pg also highlights techniques to hide meshes depending of the camera active with layerMask
But be careful layer !======== layerMask
Thank you for the suggestion, @sebavan. I actually do already have an implementation like this in my test app. However, I am trying to minimize the draw calls, and, it seems, because there are now two cameras being employed in the canvas, the draw calls are doubled because I am rendering each material both times. What I am trying to do, because I don’t want the minimap to move around, is take a screenshot of the floorplan via the top-down camera, and then place that screenshot inside an img tag or some other UI element, and then have the user marker icon rotate and translate based on the babylon coordinates, but those babylon coordinates are difficult if not impossible to convert into pixel coordinates in HTML. So I’m trying to see if there is a happy medium that babylon offers. Thanks!
Edit: OH! I see what you mean with the layer now. Let me try that out. Thanks!
2 Likes
Hi @johntdaly7 just checking in, do you have any further questions? 