how to make a material mask with gradient borders?

Hi, I’m trying to make a simple mask that has gradient edges so my plane object blends in better with whatever’s behind it, but I’m not so familiar with texture nodes. I made this image on photoshop, but I wanted to recreate this with nodes so it would probably be cheaper, and better quality as I wouldn’t rely on bitmap resolution that would result in pixel bands and artifacts etc, and I’d have more control in real time.

How can I make such thing?

ps.: this is not related to my other recent thread here in this section, it’s a different thing.

Same pseudo code I gave you but it has issues.
you can’t expect UV code to do the curved vignetting offset without major manipulation.

Start by duplicating your previews code

Instead of multiplying the ceiled uv-1 value by itself, clamp the value. Feed it to the break float 2 > add > clamp. Base color it to preview. That should be half.

As almost always 1- inverts. So start with that feeding the subtract node of the UV into it.

copy the node set from the first mask.
Plug the -1 node into the subtract.

Add another add node after the clamp and mix the 2. Clamp it again. Better be safe.
Feed to a lerp and that’s that.

Remember that the whole thing only works because you set your UV tile to 2 and your offset to .5
if you change those values .5 is no longer the proper offset.

It would be .5 × scale-1 to have it dynamic.
the assumption is that the uv is always split and each tile needs a count of .5 within it.

You can do this with a distance function that returns the distance of a box, that will give you a linear gradient that you can control the roundness of the corners and the distance of the gradient from, then to smooth it out you just pipe the result through a smoothstep.

As with all things distance field related, Inigo Quilez has an example of this already:…unctions2d.htm

For the box specifically, you’re in luck because he even has a fantastic video describing the math behind it: Deriving the SDF of a Box - YouTube

I’m probably doing something wrong, but this is the result I got. the edges aren’t completely transparent and there are some straight lines where a vertical gradient meets a horizontal, instead of a nice round corner.

This definitely looks like what I’m looking for, but unfortunately I don’t think I can translate his math into unreal nodes. could you try to elaborate a bit please? thanks!

The lines are expected. It’s just what the math does.

You aren’t intersecting precise values like adding .5 and .5…
You get a value of 1 by adding the masks much sooner than you anticipate.
Almost to the point that if you isolate values at .99 it should look rounded until you get to the line where there is no intersection

you could take that slim rounded line and mess with it by other means. / not sure what offhand.

sorry but I’m kinda lost now. I do realize the engine is doing the math I’m telling it to do, but I’m clueless on how to proceed, on what should I do instead.

gave it a quick try, hope this helps

not a bad result considering the masks involved.

@op, if you want to learn the math involved (obviously PI derived)
drop in a radial gradient node, double click it to open the function, and have a look at the math.

It’s not too complex and you could use what you observe to produce a secondary mask to blend in that lessens the effect further.

Note that instruction count is probably going to be too much for what you get quality wise.

You would likely be better off stretching a starting 256px texture over the area and manipulating the values it provides via math to increase/decrease the banding effect.

1 texture sample and 5 or 6 instructions is better than 120 or so to get to the same thing…

Adjust bias/scale to change the falloff distance and the corner size, the box corner position will need to be adjusted to keep it all within the 0-1 uv space. You could do this automatically with more math but I’m not going to bother trying to set that up

Does this have to be bound strictly to shader? What about a mesh quad with enough vertices to host the color.

wow, this is brilliant, those params give me exact the kind of control I need. thank you so much!

and thanks everyone who helped