Minimap with functionality

Questions
1

Hi again,

I have another challenge that I’m facing. We want to improve our virtual tour functionality on this page:
https://leasing.skanska.ro/projects/equilibrium/spaces/8

As you can see if you activate the Virtual Tour view mode we created a svg minimap of the floor. What I’m trying to achieve is to swap out the svg with a real minimap of the current floor.
I’m using the same technique from here to create the minimap: https://www.babylonjs-playground.com/#1WROZH#124

What I’m struggling with:

  1. The background of the minimap, I want it to be transparent on the minimap camera, but keep it on the main camera
  2. Recreating the move to click on the new minimap
  3. Recreating the current position and the view angle on the new minimap

Can you help me with these issues?

Thanks,
Andrei

1 Like
2

Adding @Cedric to provide guidance

3

for 1 and 2, I don’t know yet! I can try things and I’ll you know if I find something.
Basically, for 1, maybe create a mesh with transparency or create a new scene.
for 3 I have more ideas: Get the camera view direction, set the Y component to 0 and normalize it. You will have the direction on X/Z axis. With a Math.atan2(z, x), you will get the angle. Append a quad with the rotation ontop of the minimap and that should be it. I can try to do a PG.

4

@theblackneko
here is a quick test with viewport, it solves point 1.

minimap | Babylon.js Playground

For point2, you can test raypicking, it should work with the minimap too.
Mesh Picking | Babylon.js Documentation

I’m trying to do 3 now

2 Likes
5

And with a box for the camera position in the minimap!

minimap | Babylon.js Playground

5 Likes
6

Thanks guys, it works wonderful!

The only downside I have now its that I have a scene with quite some elements and the second camera doubles the rendering of all the elements on each frame. @Cedric it’s something that I can do to render the minimap camera only when needed? Or is there anything else I can do to optimise this?

7

You can try to do a rendering of the minimap in a texture and only update that texture when needed. If you don’t have dynamic objects, then you don’t have to re-render.

1 Like
8

I have some objects that I show and hide based on some UI buttons. Can I render the view only on these actions or on the movement of the main camera?

9

You can refresh your minimap as you want. If the minimap scrolls but the content is static, maybe you can just change the UV or translate the minimap plane.

10

Any ideas on how to stop a camera rendering, and render just on request, or on need?

11

only render to a texture when you want a update in the minimap. You don’t have to update the texture every frame.

1 Like
12

If I render it to a texture, I will lose the ability to use ray-casting and move the camera to the targeted point. Is there a way to keep this functionality or an alternative way to achieve this ?

13

you can ray pick the quad used to display the minimap texture and then transform coordinates from minimap to world coordinates.

1 Like