Looking for references/directions: Procedural Triangle Shader Fragment?

[creasso]

I’m trying to get a way to draw a filled triangle dynamically based on just PixelShader (UV) inputs.

I’ve found on Internet the Procedural Circle algorithm and some crazy fractals, but everytime I type “Triangle UV Rasterize” on Google I’m buried by docs where the author has access to VertexShader (Duh ), but it’s not my case here since this material is being designed to use on Slate/UMG where I’ll be constrained to render to a Quad.

If the algorythm it’s “portable” I think I could get it to work, as I did with the circle one:

I’m not a Math guy, but I think that is there already a way to make this, maybe I’m lost on vocabulary.

Any help will be greatly appreciated.

Thank you.

[creasso]

“Barycentric Coordinates!” Finally found the term (and the algorythm).
Special Thanks to P.Avery by post the code/question here: http://gamedev.stackexchange.com/questions/62651/finding-pixels-within-uv-coordinates

And yes, if we follow the formula correctly it works pretty well!

to future Searchs: HOW TO DRAW A FILL TRIANGLE ON MATERIAL

Just remember on pass your triangle Vertices Coordinates as UV positions.

Regards!

[Sergey_Zinoviev]

I’ve been working n the same task, needed to make a triangle material for UI, found more elegant solution using less nodes, and it is easy understandable. NOTE: in TexCoord you need to set U tiling to 0.25. You can also rotate it by changing masks.

[GrayscaleInt]

This is an old post, but wanted to share my two cents.

I generated the shape based on a “generator” found on Shadertoy: https://www.shadertoy.com/view/MlySzw

The code inside the Custom Node is something like this:

float PI = 3.141592f;
float2 TWO_PI = 6.28318f;

float2 center = 2.0f * (uv - centerOffset);

uv = center;
float a = atan2(uv.x, uv.y) + PI;
float r = TWO_PI / sides;
float d = cos(floor(0.5 + a / r) * r - a) * length(uv);
    
return smoothstep(0.41, 0.4, d);

Hope this helps anyone!
Cheers!