How to render 2D polygons in billboard mode with constant size on screen?

Hi all,

I need to implement icons that hover over ships in my game when you are too far to see the actual mesh, but the icons need to be a fixed size on the screen regardless of how far away you are. Here is a screen shot from a game called Sins of the Solar Empire that shows what I am trying to do:

All those red little shapes are just icons over distant ships. I think in babylon this could be accomplished with the utility layer, and even Babylon GUI, but I can’t really draw custom polygons in Babylon GUI, and I don’t think I can use square images because I want to be able to select a ship by clicking the icon, and when you zoom out they will be overlapping so shape will matter.

Does anyone here have any better ideas? I don’t know how to use the utility layer directly or if this sort of thing is even possible.

Thanks

1 Like

Just an idea, but not tested :

  • BABYLON.GUI relies on the DynamicTexture. You can access this DT and you can write or draw in it with the DT methods (actually it’s a html canvas with a 2d context under the hood)
  • BABYLON.GUI manages the displaying in the screen space so GUI elements can keep the same size regardless to the Z coordinates of the meshes they’re attached to.

So try to draw in the canvas2d of the GUI DynamicTexture directly. :slight_smile:

Agree with @jerome. But instead of writing directly you can rely on multilinear perhaps?
https://doc.babylonjs.com/how_to/gui#multiline

Some good suggestions here. I am not sure how to make solid shapes with multilines, though. That seems to just draw lines.

I guess you could create your control based of the Multiline code one : Babylon.js/multiLine.ts at master · BabylonJS/Babylon.js · GitHub

The MultiLinePoint is helping to draw at the desired position.

1 Like

I can even create a polygon control for you if you want.
Just let me know your dream API:)

1 Like

That is a very generous offer Deltakosh! I think just specifying a shape as an array of points around the origin would work, and then being able to control the scale and rotation. Anything inside the shape would be filled by a color.

Although, I think this idea is a bit limited. How, for instance, would we make more complicated shapes with holes in them or something?

On second thought, the only thing this would accomplish that an image control would not accomplish is limit where clicks are registered on the control. If we could enable image controls to only register clicks where the image’s alpha is > 0, that could be a more elegant solution. I can’t say whether that would be efficient though.

Thoughts?

Sounds like a good idea. So image control could come with a img.detectPickOnOpaqueOnly= true or something along this line.
When this option is true I can add an additional check to see if the pixel value has an alpha bigger than 0.

Seems reasonable?

1 Like

Yeah that seems like it would work just fine. Is it going to be difficult to check the relevant pixel of the image that corresponds to the point clicked? You would have to take rotation and scaling into account too.

Nope this is easy actually. Can you create an issue for this feature request on our repo? I’ll take care of it this week

Yeah I can do that. Thanks!

So, what was the solution you finally used?

adding @carolhmj our GUI expert

We don’t have a polygon container but we have the square and ellipse containers: The Babylon GUI | Babylon.js Documentation (babylonjs.com)

Is there any solution to that problem?
I happen to have the same. Ideally one could have another option in billboard : “scale invariant”.

For now what’s the solution?

Can you describe the problem a bit more detailed?