How to make a Sprite appear round?

Questions
1

Hello all,

I am trying to make a Sprite appear round. Currently I am applying Texture to a round Mesh and then I make the mesh Billboarded, however I want to make the parent of the Mesh move and rotate and that is not supported. From the start I wanted to use Sprites for that as I imagine it would be more performant, so now is a great time to make the switch. However, I got stuck on making the Sprite render as a circle, instead of a square.

I am getting the source images from a server and ideally I would like to avoid to having the change the source images there. I come from Unity and there with the Image component, it is rather easy to achieve this effect by using a default ‘mask’ sprite. Is there something similar in Babylon? I checked the docs and the forum, but surprisingly couldn’t find anything, maybe I missed something.

Let me know if the question is clear enough or you would like me to cook up a Playground example to illustrate it better. Thanks in advance!

2

Hello and welcome to the Babylon community! :smiley:

Would a opacity texture be enough? Something like this? Babylon.js Playground (babylonjs-playground.com)

1 Like
3

Hello and thank you!

Unfortunately, this is not exactly what I mean. I would like to use Sprite, as it is always facing the camera by default. And using Billboardmode of Mesh is not going to work for me, as I want to move and rotate the parent of that Sprite / Mesh.

Here is a starting point with a playground of a very simple Sprite and SpriteManager implementation I am currently using. Goal is to make this Sprite appear round (if possible, without changing the source image)

4

There are quite a few ways to do this but here is a quick and dirty method.

2 Likes
5

Thank you, this works perfectly!