Adding "floating labels"

What could be the best way to add floating information labels to a skydome like that Sample Tour | Marzipano

I mean that icons with an ‘i’ that open a text/image/whatever with pretty nice styling. I was thinking about using Bootstrap for the labels, text frames and so but I cannot imagine how to place it and move them with the camera rotation.

Thank you!

Maybe using GUI?
https://doc.babylonjs.com/how_to/gui

It could be for some small things but obviously a dedicaded library like bootstrap can make it even easier/better, please do not take this like an attack, I really love Babylon, but obviously you cannot be the best in everything!

Also since Babylon uses a canvas it cannot render regular html with nice css and so (or at least I cannot imagine how).

Hi @Escobar
The demo you linked uses simple HTML.

The Babylon GUI can easily simulate this.
Quick sample; Babylon.js Playground

Another sample, this using Object.assign, allowing a more CSS-style approach.
https://playground.babylonjs.com/#GVBK5L#1

If you want to use HTML, use HTML, if you prefer or need everything to be within the canvas element, use GUI.

You can easily generate 2D coordinates from 3D coordinates to position your label on screen with HTML/CSS.

Have a look at this thread Check if a point is in front or behind the mesh and PG https://playground.babylonjs.com/#CUH660#3. In this PG, I draw in CSS two squares, given two 3D positions.

If you need that the “i” icons be transparent when they are behind something (which was the purpose of the thread), don’t do it as I did, copying the zbuffer is taxing to do each frame.

Do it as @Makc3d did in this thread How to create Sketchfab like annotations with Three.js? - Questions - three.js forum - it’s a 3js thread, but the technic is not specific.

To sum it up, use two “i” icons, one normal and one with transparency on + depth test false. Both will be drawn on each other. Where parts of the normal icon are not drawn (because behind something), the same part of the transparent one will still be drawn because the depth test is disabled.

1 Like

Thank you both but I was not only speaking about the button but the label that is open that can contain html, videos and so.