Making " unit selection circle" like in RPG games

What is the suggested way to create a selection outline like one you have in RTS games?
The immediate solution i can think of is attaching a plane to object with transparent texture.

But I’ve seen some that “stick to terrain”, instead of being occluded by it. It is more advanced than that for sure.

I’d suggest looking at projection textures. You can tell a light to project a texture down onto your scene. That way the the texture will look like it’s mapped onto your terrain wherever your character is. So to achieve what you’d want, you’d have a light that projects a texture of a “selection circle.” Then you could move that light on top of whichever character was selected.

Here’s some documentation on projection textures:
https://doc.babylonjs.com/babylon101/lights#projection-texture

Here’s an example playground from that documentation:

This video also walks through the technique as well:

This is a fantastic idea for a future video btw! I might do one on this very subject down the road! Thanks for the idea!

Hope this helps!

Ok so this thread definitely got me thinking that we for sure need a video on this subject. Too much cool stuff to cover.

So I went ahead and made a playground of how I would go about doing this. I’ll record a video in the coming weeks.

https://playground.babylonjs.com/#D4AERS#7

The gist of what’s happening here is that I am using this texture as a projection texture.
selectionCircle

I create a scene with a groundplane from a heightmap as in this example:
https://doc.babylonjs.com/babylon101/height_map

I then create 4 boxes, give them different colors, and give them random positions on the ground. Note that there’s a tricky bit in here where I raycast to figure out the height of the ground, to place each box on “top” of the ground.

I create a spotlight and give it the green circle texture as a projection texture, then whenever you pick a mesh that is NOT the ground (so one of the boxes), the light will shift to project over that box.

Note that the texture I’m using is a green circle with black around it. The black masks out the light projection. So the light will only project the green circle.

I know that’s a lot to digest, but hopefully it’s helpful in answering you question.

Again, I’ll do a video on this in the coming weeks!

Thanks for the awesome question!

Cheers!

Took me a little while but I finally made an “official” video for this as promised!

Really cool! How nice of you to mention my humble persona.
I see an immediate application to that solution also for magic effects like auras or so.

Is it possible to set less transparency for the projection texture? so it becomes more like emissive green.

not really. You would need a custom shader to do this :frowning:

Is there a simple example? This is how it should kinda look:

selection circle

I would think that you could manually modify a copy of that projection texture to contain the desired transparency, couldn’t you?

I found an example on ShaderToy but I don’t know how to apply on ground (heightmap) of multiple moving units:

Edit: Here how far I got in my PG:

Edit2: Got it, just use setArray3 for unit positions.