Labels as billboard

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Andrea

I need a Label that stays close to a 2D object, but does not became smaller/bigger when zoom is applied on camera.
is there an option to force the label to work as billboard?

As for now i can either place them on a canvas layer, but then I have to move them wherever the object moves, or I can place them as a child of the object, but they will not stay at the same size relatively to the camera.

Any suggestion?
Thanks in advance!

I’ve tried looking into this, as well. A quad MeshInstance set in billboard mode could be assigned the material of a Label (as accessed from its CanvasItem). But how to make this all work is unknown to me.

Ertain | 2019-11-02 17:13

:bust_in_silhouette: Reply From: SIsilicon

Here’s a solution you could try.

  1. Make a Viewport that has own_world set to true.
  2. Add a Label as a child to said viewport.
  3. Edit your label to have the text, font size and such all set up, and tweak the viewport size to fit it.
  4. Back in the 3D environment, add a Sprite3D and give it a custom SpatialMaterial.
  5. In the material, add a ViewportTexture that uses the viewport set up before.
  6. Set billboard mode to enable, and enable the fixed_scale and transparent flags and you should be good to go!

Note: This is all just on the top of my head. There’s a Godot demo that showcases 2D in 3D. You could take a look at that and expand on it.

thanks, could you point out which demo to look at?

Andrea | 2019-11-03 22:15

This one right here. (☞゚ヮ゚)☞ GUI in 3D Demo - Godot Asset Library
Oh and one more thing. To have transparency, the viewport needs to have transparent_bg enabled as well.

SIsilicon | 2019-11-04 00:35

The “billboard mode enabled” seems not to work on a 2D scene, even with a simple Sprite, I create a new CanvasItemMaterial, in next pass i create a new SpatialMaterial, and i set billboard mode enabled, and billboard keep as true.
Nothing happens, i havent find any object in which this combination works, could it be that having to pass through the canvasitemmaterial is breaking the billboard effect?

Andrea | 2019-11-04 18:36

I’m talking about a Sprite 3D node though. Unlike it’s 2D variant, a Sprite3D uses a SpatialMaterial to render.

SIsilicon | 2019-11-04 18:44

oh, i see… any idea on how to translate it for a 2D scene?

Andrea | 2019-11-04 19:42

Oh! I did not know that you wanted a billboard for 2d. I always see that term used when talking about 3D. xD

And I’m just noticing the tag that it’s a question on 2D. Hehe. I’ll have to think about my answer.

SIsilicon | 2019-11-04 20:02

:bust_in_silhouette: Reply From: dirkk0

Create a CanvasLayer with a Label.
Then you can use camera.unproject_position(get_global_transform().origin) to get the 2D coordinates to set the rect_position of the label.

There’s a demo showcasing how to set text in a 3D world without resorting to Viewports:

Calinou | 2021-03-21 10:30

yeah, this was one of my first solution i described in the original post (place them on a canvas layer and move the label around everyframe).
i suppose there is no built in system to do the 2D equivalent of “flag fixed size” in the spatial material.

Andrea | 2021-03-21 11:30