Shadertoy Rounded Rectangle

// GLSL Shader for Shadertoy: Rounded Rectangle with Outline // Creates a rounded rectangle with configurable radius, outline, and colors. // All parameters are defined within the mainImage function. // Function to compute the signed distance to a rounded rectangle. // p: current point coordinates (centered) // b: half-dimensions of the rectangle box // r: corner radius // Returns: Signed distance (negative inside, positive outside) float sdRoundedBox( vec2 p, vec2 b, float r ) { vec2 q = abs(p)-b+r; return length(max(q,0.0)) + min(max(q.x,q.y),0.0) - r; } void mainImage( out vec4 fragColor, in vec2 fragCoord ) { // --- Configurable Parameters --- vec2 resolution = iResolution.xy; // Rectangle Shape & Position vec2 rectCenter = vec2(0.0, 0.0); // Center of the screen vec2 rectSize = vec2(0.8, 0.4); // Rectangle dimensions (relative to screen height) float cornerRadius = 30.0; // Corner radius in pixels float outlineThickness = 8.0; // Outline thickness in pixels // Colors (RGBA format) vec4 rectColor = vec4(0.1, 0.4, 0.8, 0.7); // Inner rectangle color (semi-transparent blue) vec4 outlineColor = vec4(0.9, 0.9, 0.1, 1.0); // Outline color (opaque yellow) vec4 backgroundColor = vec4(0.2, 0.2, 0.2, 1.0); // Background color (opaque dark gray) // --- Coordinate Setup --- // Normalize coordinates: origin at center, y-axis range [-1, 1], aspect corrected. vec2 p = (2.0 * fragCoord - resolution) / resolution.y; // Adjust coordinates relative to the rectangle's center p -= rectCenter; // Convert pixel sizes to normalized units (relative to screen height) float normRadius = cornerRadius / resolution.y; float normOutlineThickness = outlineThickness / resolution.y; // Anti-aliasing width (approx 1 pixel wide transition) float aa = 1.0 / resolution.y; // --- SDF Calculation --- // Calculate the signed distance from the current point 'p' to the rounded rectangle boundary. // rectSize / 2.0 gives the half-dimensions needed by the SDF function. float dist = sdRoundedBox(p, rectSize / 2.0, normRadius); // --- Alpha Blending using Premultiplied Alpha --- // Calculate smooth coverage factors based on distance: // cover_inner: How much the inner rectangle covers this pixel (0 to 1) // cover_outer: How much the whole shape (rect + outline) covers this pixel (0 to 1) // cover_outline: How much only the outline covers this pixel (0 to 1) float cover_inner = smoothstep(aa, -aa, dist + normOutlineThickness); // 1 deep inside, 0 at inner edge float cover_outer = smoothstep(aa, -aa, dist); // 1 inside outline, 0 outside outline float cover_outline = cover_outer - cover_inner; // 1 on outline, 0 elsewhere // Premultiply input colors (color * alpha) vec4 rect_col_premul = vec4(rectColor.rgb * rectColor.a, rectColor.a); vec4 outline_col_premul = vec4(outlineColor.rgb * outlineColor.a, outlineColor.a); vec4 bg_col_premul = vec4(backgroundColor.rgb * backgroundColor.a, backgroundColor.a); // Blend premultiplied colors using coverage factors. // This performs alpha compositing correctly: Background -> Outline -> Inner Rectangle vec4 blended_premul = bg_col_premul * (1.0 - cover_outer) + // Background contribution where shape isn't outline_col_premul * cover_outline + // Outline contribution rect_col_premul * cover_inner; // Inner rectangle contribution // Unpremultiply the result (divide RGB by alpha) to get the final color. vec4 finalColor; if (blended_premul.a > 0.00001) { // If alpha is significant, divide RGB by alpha. finalColor = vec4(blended_premul.rgb / blended_premul.a, blended_premul.a); } else { // If alpha is essentially zero, output the background color with zero alpha // to avoid division by zero and maintain consistency. finalColor = vec4(backgroundColor.rgb, 0.0); } // Output the final color for the current fragment. fragColor = finalColor; } Shadertoy Rounded Rectangle

Loading Shadertoy... Copy the GLSL code into a new shader on Shadertoy.com to view.

// Paste RoundedRectangle.glsl code here