Animated Outline Effects using shader!

Hello everyone!
I'm working on a game were player can be able to select buildings, so i'm trying to achieve an outline effect for 3d models in unity, i know there are tons of tutorials and solutions out there for creating outline effect around 3d models, but my requirement is something different i want to add texture over that solid colored outline,.and that texture should run clockwise directions along the edges of buildings.., I've tried everything in my knowledge still no solutions found! Any help appreciated.
please check the attached images to understand better..!

 

Creating an outline marquee that actually crawls like in the first example image you have is no small feat. It requires actually tracing the outline of an object and calculating the length of the shape. For an isometric or 2d game the best solution would likely be one done on the CPU by iterating over the edges and finding the outline, then generating a mesh from that, or created manually by hand.

However having a rotating starburst centered like in the second image is much more straightforward. Ignoring the specifics of generating the outline itself, if you can pass the center of the selection to the outline shader you can use that to calculate an on screen position, and then use screen space UVs to sample the texture. If your mesh's pivot is already nicely visually centered, you can also use that, but more likely you'll get better results if you pass the renderer's bounds center.

This site has a little bit old, but decent discussion on the use of screen space UVs.
https://realtimevfx.com/t/camera-facing-uvs/384/33

 

Thanks for the quick response @bgolus, yes rotating starburst was a good work around but not a complete solution. Because some models don't follow box/rectangular shape..the outline should exactly run/animate along the edges of selected model! "Done on cpu by iterating over edges and finding outline" sounds like a good idea, can you give me some tips on how to achieve that in 3D? Thanks in advance

 

It's a rather brute force approach to this problem. You'd need to take the 3D object and flatten it into screen space so you're working in 2D. Then iterate over the triangles to find the outer edge, likely by using some kind of 2D CSG or line intersection math, and build up the outline. Then you'll need to construct geometry to go around that outline. This is going to be slow, so it's not something you'll want to do in real time if it can be helped. If it absolutely needs to be done at runtime, make sure you only do it once and save the results and not every frame. If you can rotate the camera, or aren't actually intending to use an orthographic camera view, I'd say don't even bother going down this road as it's going to be very expensive.

 

thanks for the quick help @bgolus that's a same way i thought so ! it would definitely costs heavy,...i should change my mind, running lines towards a same direction could be a decent way isn't it?!

 

i tested one sprite outline shader, with added stripes effect, looks good enough for me:
https://unitycoder.com/blog/2018/12/20/marching-ants-selection-outline-shader/

 

Yeah, I was going to point out that most applications that use this kind of marquee (Photoshop, Gimp, etc) don't bother to do anything fancy and it's effectively a set of scrolling diagonal lines, not a true rotation around, because it is super hard to do. There's also a lot of edge cases with making a thick outline with that kind of texture flow: sharp interior corners and details smaller than the line width all make for a really ugly outline if you're trying to make a nice smooth dash. The diagonal lines approach avoids most of that. The only issue is on edges that match the diagonal line "flash".