So I’m trying to implement a floorplan minimap for my scene. I want to be able to use the minimap in a static way in that the minimap “camera” does not follow the user but instead just shows the entire floorplan, always looking straight down with the same orientation, all the time. The only element of the minimap that is not static is the user’s marker icon, denoting the user’s position and y rotation in the scene.
I first tried implementing this with two FreeCameras and 2 corresponding viewports. One camera was static while the other was the main camera that is used to move around. The user marker mesh was parented under the dynamic FreeCamera, and so the user marker mesh was updated on the static FreeCamera’s viewport by utilizing layer masks. This worked really well from a UX perspective, especially because it enabled clicking on the floor mesh to navigate via the minimap camera.
However, this method seemed to cut the frame-rate in half and just about doubled the draw calls. I tried freezing the mesh world matrix for every mesh besides the user marker mesh, but this did not have noticeable improvement to the performance in this sense.
Thus, I am now interested in implementing the minimap in a more performant way, and so I am looking into grabbing a screenshot of the top-down camera’s viewport, and then saving that image as an “img” in HTML, and then overlaying the user’s orientation marker as an img on top of that. However, I am running into issues with converting the scene x, y coordinates to pixel coordinates, much less in a way that is consistent with the scale change.
Has anyone implemented an HTML version of a minimap before? Would you mind sharing your approach and best practices? Any playgrounds would be appreciated as well. OR, instead, if you know of a way to improve the performance of 2 camera viewports as the implementation of the minimap, so that the drawcalls aren’t really increased much and the fps does not get cut in half, then please share!!
Thanks for any help and advice in advance.