Shader Story

Patterns & Shapes: Square

fwidth() and saturate() are used here to create a crisp, antialiased square mask. Good for stylized shapes, UI masks, scanlines, or procedural transitions.

half2 uvOffset = abs((uv * 2.0) - 1.0) - edgeLength;
half2 aaEdge = 1.0 - (uvOffset / fwidth(uvOffset));
half col_output = saturate(min(aaEdge.x, aaEdge.y));

---

Visual demo

This pattern defines a square shape by measuring the offset of each fragment from the UV center. Using fwidth() ensures the edges stay consistent across varying screen resolutions and scale.

---

URP Shader Code

Shader "DecompiledArt/Patterns/Square/Square"
{
    Properties
    {
        _EdgeLength("EdgeLength", Range(0.0, 1.0)) = 0.5
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" "RenderPipeline" = "UniversalPipeline" }

        Pass
        {            
            ...
            

            half4 frag(Varyings IN) : SV_Target
            {
                half2 uvs = abs((IN.uvs.xy * 2) - 1) - _EdgeLength;
                uvs = 1 - uvs/fwidth(uvs);
                
                half col_output = saturate(min(uvs.x, uvs.y));

                return half4(col_output.xxx, 1.0);
            }


            ENDHLSL
        }
    }
}

URP Shader graph

---

🔗 Related Functions

Clamp/Saturate • Smoothstep • Abs

---

❤️ Support Shader Story

If this article helped you, consider supporting the project on Patreon - you'll get access to the related source files, reference cheat-sheets, and other exclusive resources:

Your support helps keep this library open, growing, and free for everyone.