Need Help Creating Animated Border Effect Around A Quad

Hi all,

I’d like to preface that I’m a novice when it comes to shaders.

I’m attempting to create an animated border effect around a quad that loops around (a desired flame or wavy effect).

The object in question that will have this shader material is a child quad of a parent quad with 2 sides to render a card front and card back. I’m using URP to create shaders using the shader-graph in 2022 version of unity.

Desired effect:

Around the quad will be a adjustable border in thickness, that has a flame-like wavy effect that is stretching and manipulating the UV (before fading) to make the card look like it has a flame effect.

I’ve admittedly tried to get ChatGPT to help me with nodes and set ups, but it’s not guiding me to the desired effect I want.

You can see my set up below.

I understand it’s a bit hard to truly conceptualize what I’m after so I’ll try to illustrate my thoughts so the person(s) that are able to help will at least know what I’m after~

(So as you can see this author of this card design has illustrated a way to have a cool outline around the card, and am wondering how this effect (animated) could be achieved using shader graph). A fading animated glow outline is all that I need, it doesn’t have to actually emulate flames.

And yes this is actually the assets I’m working with currently on my project.

Current setup.

Main thing I wish to have is simply a fiery effect on the edges of child quad, that fades away after 1/4th of a second (adjustable) to simulate fire. Down below is my current set up… but some of the nodes are applying rotation and stuff… cause initially I wanted to have it loop around the quad and pulsate the effect depending on the positioning…

(PS. Sorry if this is all too complex… if it’s difficult to help at least a guide in the right direction would be extremely helpful.)

There are multiple ways to tackle this problem and solution depends on how you structure your card, because you could make meshes on top of each other, additional border mesh or even use just single quad to represent the whole card.

In case of border mesh, depending on how you create your UV you can structure your shader in various ways to animate, “rotate” (loop) the effect or whatever else you need.
I am going to assume you have quad below card, in this case this tutorial might help you understand some principles: https://youtu.be/IHAEL6g7ZnI?feature=shared&t=377

Alternative option is to take some kind of mask (distance field) - it can come from texture, uv or vertext color, then you can subtract noise or texture to get aura/flame effect.
I made some mask from UV here as example:

2 Likes

Thanks a lot! That is exactly what I was after.

Check out that result with some texture rendered with colour.

It turned out really nice, better than I first envisioned!

I’m curious; if I follow this formula, would it be possible to do other cool effects using the same method, say like a twirling/spiral effect as well?

Happy new years!
Brandon

2 Likes

Yes, nothing stops you to spin UV (noise/texture), include additional masks or use it as alpha output.
The only problem with default quad is that UV is stretched on V axis, because typical card is “longer” than “wider”, so effect might look a bit off.

Glad it works for you, happy new year!