Merge branch 'master' of https://github.com/raysan5/raylib

examples/shaders/resources/shaders/glsl100/rounded_rectangle.fs

@@ -0,0 +1,76 @@
+// Note: SDF by Iñigo Quilez is licensed under MIT License
+
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+uniform vec4 rectangle; // Rectangle dimensions (x, y, width, height)
+uniform vec4 radius; // Corner radius (top-left, top-right, bottom-left, bottom-right)
+uniform vec4 color;
+
+// Shadow parameters
+uniform float shadowRadius;
+uniform vec2 shadowOffset;
+uniform float shadowScale;
+uniform vec4 shadowColor;
+
+// Border parameters
+uniform float borderThickness;
+uniform vec4 borderColor;
+
+// Create a rounded rectangle using signed distance field
+// Thanks to Iñigo Quilez (https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
+// And thanks to inobelar (https://www.shadertoy.com/view/fsdyzB) for shader
+// MIT License
+float RoundedRectangleSDF(vec2 fragCoord, vec2 center, vec2 halfSize, vec4 radius)
+{
+    vec2 fragFromCenter = fragCoord - center;
+
+    // Determine which corner radius to use
+    radius.xy = (fragFromCenter.y > 0.0) ? radius.xy : radius.zw;
+    radius.x  = (fragFromCenter.x < 0.0) ? radius.x  : radius.y;
+
+    // Calculate signed distance field
+    vec2 dist = abs(fragFromCenter) - halfSize + radius.x;
+    return min(max(dist.x, dist.y), 0.0) + length(max(dist, 0.0)) - radius.x;
+}
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
+
+    // Requires fragment coordinate varying pixels
+    vec2 fragCoord = gl_FragCoord.xy;
+
+    // Calculate signed distance field for rounded rectangle
+    vec2 halfSize = rectangle.zw*0.5;
+    vec2 center = rectangle.xy + halfSize;
+    float recSDF = RoundedRectangleSDF(fragCoord, center, halfSize, radius);
+
+    // Calculate signed distance field for rectangle shadow
+    vec2 shadowHalfSize = halfSize*shadowScale;
+    vec2 shadowCenter = center + shadowOffset;
+    float shadowSDF = RoundedRectangleSDF(fragCoord, shadowCenter, shadowHalfSize, radius);
+
+    // Caculate alpha factors
+    float recFactor = smoothstep(1.0, 0.0, recSDF);
+    float shadowFactor = smoothstep(shadowRadius, 0.0, shadowSDF);
+    float borderFactor = smoothstep(0.0, 1.0, recSDF + borderThickness)*recFactor;
+
+    // Multiply each color by its respective alpha factor
+    vec4 recColor = vec4(color.rgb, color.a*recFactor);
+    vec4 shadowCol = vec4(shadowColor.rgb, shadowColor.a*shadowFactor);
+    vec4 borderCol = vec4(borderColor.rgb, borderColor.a*borderFactor);
+
+    // Combine the colors varying the order (shadow, rectangle, border)
+    gl_FragColor = mix(mix(shadowCol, recColor, recColor.a), borderCol, borderCol.a);
+}

examples/shaders/resources/shaders/glsl120/rounded_rectangle.fs

@@ -0,0 +1,74 @@
+// Note: SDF by Iñigo Quilez is licensed under MIT License
+
+#version 120
+
+// Input vertex attributes (from vertex shader)
+varying vec2 fragTexCoord;
+varying vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+uniform vec4 rectangle; // Rectangle dimensions (x, y, width, height)
+uniform vec4 radius; // Corner radius (top-left, top-right, bottom-left, bottom-right)
+uniform vec4 color;
+
+// Shadow parameters
+uniform float shadowRadius;
+uniform vec2 shadowOffset;
+uniform float shadowScale;
+uniform vec4 shadowColor;
+
+// Border parameters
+uniform float borderThickness;
+uniform vec4 borderColor;
+
+// Create a rounded rectangle using signed distance field
+// Thanks to Iñigo Quilez (https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
+// And thanks to inobelar (https://www.shadertoy.com/view/fsdyzB) for shader
+// MIT License
+float RoundedRectangleSDF(vec2 fragCoord, vec2 center, vec2 halfSize, vec4 radius)
+{
+    vec2 fragFromCenter = fragCoord - center;
+
+    // Determine which corner radius to use
+    radius.xy = (fragFromCenter.y > 0.0) ? radius.xy : radius.zw;
+    radius.x  = (fragFromCenter.x < 0.0) ? radius.x  : radius.y;
+
+    // Calculate signed distance field
+    vec2 dist = abs(fragFromCenter) - halfSize + radius.x;
+    return min(max(dist.x, dist.y), 0.0) + length(max(dist, 0.0)) - radius.x;
+}
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture2D(texture0, fragTexCoord);
+
+    // Requires fragment coordinate varying pixels
+    vec2 fragCoord = gl_FragCoord.xy;
+
+    // Calculate signed distance field for rounded rectangle
+    vec2 halfSize = rectangle.zw*0.5;
+    vec2 center = rectangle.xy + halfSize;
+    float recSDF = RoundedRectangleSDF(fragCoord, center, halfSize, radius);
+
+    // Calculate signed distance field for rectangle shadow
+    vec2 shadowHalfSize = halfSize*shadowScale;
+    vec2 shadowCenter = center + shadowOffset;
+    float shadowSDF = RoundedRectangleSDF(fragCoord, shadowCenter, shadowHalfSize, radius);
+
+    // Caculate alpha factors
+    float recFactor = smoothstep(1.0, 0.0, recSDF);
+    float shadowFactor = smoothstep(shadowRadius, 0.0, shadowSDF);
+    float borderFactor = smoothstep(0.0, 1.0, recSDF + borderThickness)*recFactor;
+
+    // Multiply each color by its respective alpha factor
+    vec4 recColor = vec4(color.rgb, color.a*recFactor);
+    vec4 shadowCol = vec4(shadowColor.rgb, shadowColor.a*shadowFactor);
+    vec4 borderCol = vec4(borderColor.rgb, borderColor.a*borderFactor);
+
+    // Combine the colors varying the order (shadow, rectangle, border)
+    gl_FragColor = mix(mix(shadowCol, recColor, recColor.a), borderCol, borderCol.a);
+}

examples/shaders/resources/shaders/glsl330/rounded_rectangle.fs

@@ -0,0 +1,77 @@
+// Note: SDF by Iñigo Quilez is licensed under MIT License
+
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec2 fragTexCoord;
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform vec4 colDiffuse;
+
+// Output fragment color
+out vec4 finalColor;
+
+uniform vec4 rectangle; // Rectangle dimensions (x, y, width, height)
+uniform vec4 radius; // Corner radius (top-left, top-right, bottom-left, bottom-right)
+uniform vec4 color;
+
+// Shadow parameters
+uniform float shadowRadius;
+uniform vec2 shadowOffset;
+uniform float shadowScale;
+uniform vec4 shadowColor;
+
+// Border parameters
+uniform float borderThickness;
+uniform vec4 borderColor;
+
+// Create a rounded rectangle using signed distance field
+// Thanks to Iñigo Quilez (https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
+// And thanks to inobelar (https://www.shadertoy.com/view/fsdyzB) for shader
+// MIT License
+float RoundedRectangleSDF(vec2 fragCoord, vec2 center, vec2 halfSize, vec4 radius)
+{
+    vec2 fragFromCenter = fragCoord - center;
+
+    // Determine which corner radius to use
+    radius.xy = (fragFromCenter.y > 0.0) ? radius.xy : radius.zw;
+    radius.x  = (fragFromCenter.x < 0.0) ? radius.x  : radius.y;
+
+    // Calculate signed distance field
+    vec2 dist = abs(fragFromCenter) - halfSize + radius.x;
+    return min(max(dist.x, dist.y), 0.0) + length(max(dist, 0.0)) - radius.x;
+}
+
+void main()
+{
+    // Texel color fetching from texture sampler
+    vec4 texelColor = texture(texture0, fragTexCoord);
+
+    // Requires fragment coordinate in pixels
+    vec2 fragCoord = gl_FragCoord.xy;
+
+    // Calculate signed distance field for rounded rectangle
+    vec2 halfSize = rectangle.zw*0.5;
+    vec2 center = rectangle.xy + halfSize;
+    float recSDF = RoundedRectangleSDF(fragCoord, center, halfSize, radius);
+
+    // Calculate signed distance field for rectangle shadow
+    vec2 shadowHalfSize = halfSize*shadowScale;
+    vec2 shadowCenter = center + shadowOffset;
+    float shadowSDF = RoundedRectangleSDF(fragCoord, shadowCenter, shadowHalfSize, radius);
+
+    // Caculate alpha factors
+    float recFactor = smoothstep(1.0, 0.0, recSDF);
+    float shadowFactor = smoothstep(shadowRadius, 0.0, shadowSDF);
+    float borderFactor = smoothstep(0.0, 1.0, recSDF + borderThickness)*recFactor;
+
+    // Multiply each color by its respective alpha factor
+    vec4 recColor = vec4(color.rgb, color.a*recFactor);
+    vec4 shadowCol = vec4(shadowColor.rgb, shadowColor.a*shadowFactor);
+    vec4 borderCol = vec4(borderColor.rgb, borderColor.a*borderFactor);
+
+    // Combine the colors in the order (shadow, rectangle, border)
+    finalColor = mix(mix(shadowCol, recColor, recColor.a), borderCol, borderCol.a);
+}

examples/shaders/shaders_rounded_rectangle.c

@@ -0,0 +1,238 @@
+/*******************************************************************************************
+*
+*   raylib [shaders] example - Rounded Rectangle
+*
+*   Example complexity rating: [★★★☆] 3/4
+*
+*   Example originally created with raylib 5.5, last time updated with raylib 5.5
+*
+*   Example contributed by Anstro Pleuton (@anstropleuton) and reviewed by Ramon Santamaria (@raysan5)
+*
+*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
+*   BSD-like license that allows static linking with closed source software
+*
+*   Copyright (c) 2025-2025 Anstro Pleuton (@anstropleuton)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#if defined(PLATFORM_DESKTOP)
+    #define GLSL_VERSION            330
+#else   // PLATFORM_ANDROID, PLATFORM_WEB
+    #define GLSL_VERSION            100
+#endif
+
+//------------------------------------------------------------------------------------
+// Declare custom Structs
+//------------------------------------------------------------------------------------
+
+// Rounded rectangle data
+typedef struct {
+    Vector4 cornerRadius; // Individual corner radius (top-left, top-right, bottom-left, bottom-right)
+
+    // Shadow variables
+    float shadowRadius;
+    Vector2 shadowOffset;
+    float shadowScale;
+
+    // Border variables
+    float borderThickness; // Inner-border thickness
+
+    // Shader locations
+    int rectangleLoc;
+    int radiusLoc;
+    int colorLoc;
+    int shadowRadiusLoc;
+    int shadowOffsetLoc;
+    int shadowScaleLoc;
+    int shadowColorLoc;
+    int borderThicknessLoc;
+    int borderColorLoc;
+} RoundedRectangle;
+
+//------------------------------------------------------------------------------------
+// Module Functions Declaration
+//------------------------------------------------------------------------------------
+
+// Create a rounded rectangle and set uniform locations
+static RoundedRectangle CreateRoundedRectangle(Vector4 cornerRadius, float shadowRadius, Vector2 shadowOffset, float shadowScale, float borderThickness, Shader shader);
+
+// Update rounded rectangle uniforms
+static void UpdateRoundedRectangle(RoundedRectangle rec, Shader shader);
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+int main(void)
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    const int screenWidth = 800;
+    const int screenHeight = 450;
+
+    const Color rectangleColor = BLUE;
+    const Color shadowColor = DARKBLUE;
+    const Color borderColor = SKYBLUE;
+
+    InitWindow(screenWidth, screenHeight, "raylib [shaders] example - Rounded Rectangle");
+
+    // Load the shader
+    Shader shader = LoadShader(TextFormat("resources/shaders/glsl%i/base.vs", GLSL_VERSION),
+                               TextFormat("resources/shaders/glsl%i/rounded_rectangle.fs", GLSL_VERSION));
+
+    // Create a rounded rectangle
+    RoundedRectangle roundedRectangle = CreateRoundedRectangle(
+        (Vector4){ 5.0f, 10.0f, 15.0f, 20.0f },     // Corner radius
+        20.0f,                                      // Shadow radius
+        (Vector2){ 0.0f, -5.0f },                   // Shadow offset
+        0.95f,                                      // Shadow scale
+        5.0f,                                       // Border thickness
+        shader                                      // Shader
+    );
+
+    // Update shader uniforms
+    UpdateRoundedRectangle(roundedRectangle, shader);
+
+    SetTargetFPS(60);
+    //--------------------------------------------------------------------------------------
+
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        // Draw
+        //----------------------------------------------------------------------------------
+        BeginDrawing();
+
+            ClearBackground(RAYWHITE);
+
+            // Draw rectangle box with rounded corners using shader
+            Rectangle rec = { 50, 70, 110, 60 };
+            DrawRectangleLines(rec.x - 20, rec.y - 20, rec.width + 40, rec.height + 40, DARKGRAY);
+            DrawText("Rounded rectangle", rec.x - 20, rec.y - 35, 10, DARKGRAY);
+
+            // Flip Y axis to match shader coordinate system
+            rec.y = screenHeight - rec.y - rec.height;
+            SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
+
+            // Only rectangle color
+            SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { rectangleColor.r/255.0f, rectangleColor.g/255.0f, rectangleColor.b/255.0f, rectangleColor.a/255.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
+
+            BeginShaderMode(shader);
+                DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
+            EndShaderMode();
+
+
+
+            // Draw rectangle shadow using shader
+            rec = (Rectangle){ 50, 200, 110, 60 };
+            DrawRectangleLines(rec.x - 20, rec.y - 20, rec.width + 40, rec.height + 40, DARKGRAY);
+            DrawText("Rounded rectangle shadow", rec.x - 20, rec.y - 35, 10, DARKGRAY);
+
+            rec.y = screenHeight - rec.y - rec.height;
+            SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
+
+            // Only shadow color
+            SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { shadowColor.r/255.0f, shadowColor.g/255.0f, shadowColor.b/255.0f, shadowColor.a/255.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
+
+            BeginShaderMode(shader);
+                DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
+            EndShaderMode();
+
+
+
+            // Draw rectangle's border using shader
+            rec = (Rectangle){ 50, 330, 110, 60 };
+            DrawRectangleLines(rec.x - 20, rec.y - 20, rec.width + 40, rec.height + 40, DARKGRAY);
+            DrawText("Rounded rectangle border", rec.x - 20, rec.y - 35, 10, DARKGRAY);
+
+            rec.y = screenHeight - rec.y - rec.height;
+            SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
+
+            // Only border color
+            SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { 0.0f, 0.0f, 0.0f, 0.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { borderColor.r/255.0f, borderColor.g/255.0f, borderColor.b/255.0f, borderColor.a/255.0f }, SHADER_UNIFORM_VEC4);
+
+            BeginShaderMode(shader);
+                DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
+            EndShaderMode();
+
+
+
+            // Draw one more rectangle with all three colors
+            rec = (Rectangle){ 240, 80, 500, 300 };
+            DrawRectangleLines(rec.x - 30, rec.y - 30, rec.width + 60, rec.height + 60, DARKGRAY);
+            DrawText("Rectangle with all three combined", rec.x - 30, rec.y - 45, 10, DARKGRAY);
+
+            rec.y = screenHeight - rec.y - rec.height;
+            SetShaderValue(shader, roundedRectangle.rectangleLoc, (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
+
+            // All three colors
+            SetShaderValue(shader, roundedRectangle.colorLoc, (float[]) { rectangleColor.r/255.0f, rectangleColor.g/255.0f, rectangleColor.b/255.0f, rectangleColor.a/255.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.shadowColorLoc, (float[]) { shadowColor.r/255.0f, shadowColor.g/255.0f, shadowColor.b/255.0f, shadowColor.a/255.0f }, SHADER_UNIFORM_VEC4);
+            SetShaderValue(shader, roundedRectangle.borderColorLoc, (float[]) { borderColor.r/255.0f, borderColor.g/255.0f, borderColor.b/255.0f, borderColor.a/255.0f }, SHADER_UNIFORM_VEC4);
+
+            BeginShaderMode(shader);
+                DrawRectangle(0, 0, screenWidth, screenHeight, WHITE);
+            EndShaderMode();
+
+            DrawText("(c) Rounded rectangle SDF by Iñigo Quilez. MIT License.", screenWidth - 300, screenHeight - 20, 10, BLACK);
+
+        EndDrawing();
+        //----------------------------------------------------------------------------------
+    }
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    UnloadShader(shader); // Unload shader
+
+    CloseWindow();        // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}
+
+//------------------------------------------------------------------------------------
+// Module Functions Definitions
+//------------------------------------------------------------------------------------
+
+// Create a rounded rectangle and set uniform locations
+RoundedRectangle CreateRoundedRectangle(Vector4 cornerRadius, float shadowRadius, Vector2 shadowOffset, float shadowScale, float borderThickness, Shader shader)
+{
+    RoundedRectangle rec;
+    rec.cornerRadius = cornerRadius;
+    rec.shadowRadius = shadowRadius;
+    rec.shadowOffset = shadowOffset;
+    rec.shadowScale = shadowScale;
+    rec.borderThickness = borderThickness;
+
+    // Get shader uniform locations
+    rec.rectangleLoc = GetShaderLocation(shader, "rectangle");
+    rec.radiusLoc = GetShaderLocation(shader, "radius");
+    rec.colorLoc = GetShaderLocation(shader, "color");
+    rec.shadowRadiusLoc = GetShaderLocation(shader, "shadowRadius");
+    rec.shadowOffsetLoc = GetShaderLocation(shader, "shadowOffset");
+    rec.shadowScaleLoc = GetShaderLocation(shader, "shadowScale");
+    rec.shadowColorLoc = GetShaderLocation(shader, "shadowColor");
+    rec.borderThicknessLoc = GetShaderLocation(shader, "borderThickness");
+    rec.borderColorLoc = GetShaderLocation(shader, "borderColor");
+
+    UpdateRoundedRectangle(rec, shader);
+
+    return rec;
+}
+
+// Update rounded rectangle uniforms
+void UpdateRoundedRectangle(RoundedRectangle rec, Shader shader)
+{
+    SetShaderValue(shader, rec.radiusLoc, (float[]){ rec.cornerRadius.x, rec.cornerRadius.y, rec.cornerRadius.z, rec.cornerRadius.w }, SHADER_UNIFORM_VEC4);
+    SetShaderValue(shader, rec.shadowRadiusLoc, &rec.shadowRadius, SHADER_UNIFORM_FLOAT);
+    SetShaderValue(shader, rec.shadowOffsetLoc, (float[]){ rec.shadowOffset.x, rec.shadowOffset.y }, SHADER_UNIFORM_VEC2);
+    SetShaderValue(shader, rec.shadowScaleLoc, &rec.shadowScale, SHADER_UNIFORM_FLOAT);
+    SetShaderValue(shader, rec.borderThicknessLoc, &rec.borderThickness, SHADER_UNIFORM_FLOAT);
+}