[example] Add shaders_rounded_rectangle example

examples/Makefile

@@ -646,7 +646,8 @@ SHADERS = \
     shaders/shaders_texture_tiling \
     shaders/shaders_texture_waves \
     shaders/shaders_write_depth \
-    shaders/shaders_vertex_displacement
+    shaders/shaders_vertex_displacement \
+    shaders/shaders_rounded_rectangle.c
 
 AUDIO = \
     audio/audio_mixed_processor \

examples/Makefile.Web

@@ -526,7 +526,8 @@ SHADERS = \
     shaders/shaders_texture_tiling \
     shaders/shaders_texture_waves \
     shaders/shaders_vertex_displacement \
-    shaders/shaders_write_depth
+    shaders/shaders_write_depth \
+    shaders/shaders_rounded_rectangle
 
 AUDIO = \
     audio/audio_mixed_processor \

examples/README.md

@@ -199,33 +199,34 @@ Examples using raylib shaders functionality, including shaders loading, paramete
 | 138 | [shaders_write_depth](shaders/shaders_write_depth.c) | <img src="shaders/shaders_write_depth.png" alt="shaders_write_depth" width="80"> | ⭐️⭐️☆☆ | 4.2 | 4.2 | [Buğra Alptekin Sarı](https://github.com/BugraAlptekinSari) |
 | 139 | [shaders_basic_pbr](shaders/shaders_basic_pbr.c) | <img src="shaders/shaders_basic_pbr.png" alt="shaders_basic_pbr" width="80"> | ⭐️⭐️⭐️⭐️ | 5.0 | 5.1-dev | [Afan OLOVCIC](https://github.com/_DevDad) |
 | 140 | [shaders_lightmap](shaders/shaders_lightmap.c) | <img src="shaders/shaders_lightmap.png" alt="shaders_lightmap" width="80"> | ⭐️⭐️⭐️☆ | 4.5 | 4.5 | [Jussi Viitala](https://github.com/nullstare) |
+| 141 | [shaders_rounded_rectangle](shaders/shaders_rounded_rectangle.c) | <img src="shaders/shaders_rounded_rectangle.png" alt="shaders_rounded_rectangle" width=80> | ⭐️⭐️☆☆ | 5.5 | 5.5 | [Anstro Pleuton](https://github.com/anstropleuton) |
 
 ### category: audio
 
 Examples using raylib audio functionality, including sound/music loading and playing. This functionality is provided by raylib [raudio](../src/raudio.c) module. Note this module can be used standalone independently of raylib, check [raudio_standalone](others/raudio_standalone.c) example.
 
 | ## | example  | image  | difficulty<br>level | version<br>created | last version<br>updated | original<br>developer |
 |----|----------|--------|:-------------------:|:------------------:|:-----------------------:|:----------------------|
-| 141 | [audio_module_playing](audio/audio_module_playing.c) | <img src="audio/audio_module_playing.png" alt="audio_module_playing" width="80"> | ⭐️☆☆☆ | 1.5 | 3.5 | [Ray](https://github.com/raysan5) |
-| 142 | [audio_music_stream](audio/audio_music_stream.c) | <img src="audio/audio_music_stream.png" alt="audio_music_stream" width="80"> | ⭐️☆☆☆ | 1.3 | 4.2 | [Ray](https://github.com/raysan5) |
-| 143 | [audio_raw_stream](audio/audio_raw_stream.c) | <img src="audio/audio_raw_stream.png" alt="audio_raw_stream" width="80"> | ⭐️⭐️⭐️☆ | 1.6 | 4.2 | [Ray](https://github.com/raysan5) |
-| 144 | [audio_sound_loading](audio/audio_sound_loading.c) | <img src="audio/audio_sound_loading.png" alt="audio_sound_loading" width="80"> | ⭐️☆☆☆ | 1.1 | 3.5 | [Ray](https://github.com/raysan5) |
-| 145 | [audio_mixed_processor](audio/audio_mixed_processor.c) | <img src="audio/audio_mixed_processor.png" alt="audio_mixed_processor" width="80"> | ⭐️⭐️⭐️⭐️ | 4.2 | 4.2 | [hkc](https://github.com/hatkidchan) |
-| 146 | [audio_stream_effects](audio/audio_stream_effects.c) | <img src="audio/audio_stream_effects.png" alt="audio_stream_effects" width="80"> | ⭐️⭐️⭐️⭐️ | 4.2 | 5.0 | [Ray](https://github.com/raysan5) |
-| 147 | [audio_sound_multi](audio/audio_sound_multi.c) | <img src="audio/audio_sound_multi.png" alt="audio_sound_multi" width="80"> | ⭐️⭐️☆☆ | 4.6 | 4.6 | [Jeffery Myers](https://github.com/JeffM2501) |
+| 142 | [audio_module_playing](audio/audio_module_playing.c) | <img src="audio/audio_module_playing.png" alt="audio_module_playing" width="80"> | ⭐️☆☆☆ | 1.5 | 3.5 | [Ray](https://github.com/raysan5) |
+| 143 | [audio_music_stream](audio/audio_music_stream.c) | <img src="audio/audio_music_stream.png" alt="audio_music_stream" width="80"> | ⭐️☆☆☆ | 1.3 | 4.2 | [Ray](https://github.com/raysan5) |
+| 144 | [audio_raw_stream](audio/audio_raw_stream.c) | <img src="audio/audio_raw_stream.png" alt="audio_raw_stream" width="80"> | ⭐️⭐️⭐️☆ | 1.6 | 4.2 | [Ray](https://github.com/raysan5) |
+| 145 | [audio_sound_loading](audio/audio_sound_loading.c) | <img src="audio/audio_sound_loading.png" alt="audio_sound_loading" width="80"> | ⭐️☆☆☆ | 1.1 | 3.5 | [Ray](https://github.com/raysan5) |
+| 146 | [audio_mixed_processor](audio/audio_mixed_processor.c) | <img src="audio/audio_mixed_processor.png" alt="audio_mixed_processor" width="80"> | ⭐️⭐️⭐️⭐️ | 4.2 | 4.2 | [hkc](https://github.com/hatkidchan) |
+| 147 | [audio_stream_effects](audio/audio_stream_effects.c) | <img src="audio/audio_stream_effects.png" alt="audio_stream_effects" width="80"> | ⭐️⭐️⭐️⭐️ | 4.2 | 5.0 | [Ray](https://github.com/raysan5) |
+| 148 | [audio_sound_multi](audio/audio_sound_multi.c) | <img src="audio/audio_sound_multi.png" alt="audio_sound_multi" width="80"> | ⭐️⭐️☆☆ | 4.6 | 4.6 | [Jeffery Myers](https://github.com/JeffM2501) |
 
 ### category: others
 
 Examples showing raylib misc functionality that does not fit in other categories, like standalone modules usage or examples integrating external libraries.
 
 | ## | example  | image  | difficulty<br>level | version<br>created | last version<br>updated | original<br>developer |
 |----|----------|--------|:-------------------:|:------------------:|:-----------------------:|:----------------------|
-| 148 | [rlgl_standalone](others/rlgl_standalone.c) | <img src="others/rlgl_standalone.png" alt="rlgl_standalone" width="80"> | ⭐️⭐️⭐️⭐️ | 1.6 | 4.0 | [Ray](https://github.com/raysan5) |
-| 149 | [rlgl_compute_shader](others/rlgl_compute_shader.c) | <img src="others/rlgl_compute_shader.png" alt="rlgl_compute_shader" width="80"> | ⭐️⭐️⭐️⭐️ | 4.0 | 4.0 | [Teddy Astie](https://github.com/tsnake41) |
-| 150 | [easings_testbed](others/easings_testbed.c) | <img src="others/easings_testbed.png" alt="easings_testbed" width="80"> | ⭐️⭐️⭐️☆ | 2.5 | 3.0 | [Juan Miguel López](https://github.com/flashback-fx) |
-| 151 | [raylib_opengl_interop](others/raylib_opengl_interop.c) | <img src="others/raylib_opengl_interop.png" alt="raylib_opengl_interop" width="80"> | ⭐️⭐️⭐️⭐️ | 3.8 | 4.0 | [Stephan Soller](https://github.com/arkanis) |
-| 152 | [embedded_files_loading](others/embedded_files_loading.c) | <img src="others/embedded_files_loading.png" alt="embedded_files_loading" width="80"> | ⭐️⭐️☆☆ | 3.0 | 3.5 | [Kristian Holmgren](https://github.com/defutura) |
-| 153 | [raymath_vector_angle](others/raymath_vector_angle.c) | <img src="others/raymath_vector_angle.png" alt="raymath_vector_angle" width="80"> | ⭐️⭐️☆☆ | 1.0 | 4.6 | [Ray](https://github.com/raysan5) |
+| 149 | [rlgl_standalone](others/rlgl_standalone.c) | <img src="others/rlgl_standalone.png" alt="rlgl_standalone" width="80"> | ⭐️⭐️⭐️⭐️ | 1.6 | 4.0 | [Ray](https://github.com/raysan5) |
+| 150 | [rlgl_compute_shader](others/rlgl_compute_shader.c) | <img src="others/rlgl_compute_shader.png" alt="rlgl_compute_shader" width="80"> | ⭐️⭐️⭐️⭐️ | 4.0 | 4.0 | [Teddy Astie](https://github.com/tsnake41) |
+| 151 | [easings_testbed](others/easings_testbed.c) | <img src="others/easings_testbed.png" alt="easings_testbed" width="80"> | ⭐️⭐️⭐️☆ | 2.5 | 3.0 | [Juan Miguel López](https://github.com/flashback-fx) |
+| 152 | [raylib_opengl_interop](others/raylib_opengl_interop.c) | <img src="others/raylib_opengl_interop.png" alt="raylib_opengl_interop" width="80"> | ⭐️⭐️⭐️⭐️ | 3.8 | 4.0 | [Stephan Soller](https://github.com/arkanis) |
+| 153 | [embedded_files_loading](others/embedded_files_loading.c) | <img src="others/embedded_files_loading.png" alt="embedded_files_loading" width="80"> | ⭐️⭐️☆☆ | 3.0 | 3.5 | [Kristian Holmgren](https://github.com/defutura) |
+| 154 | [raymath_vector_angle](others/raymath_vector_angle.c) | <img src="others/raymath_vector_angle.png" alt="raymath_vector_angle" width="80"> | ⭐️⭐️☆☆ | 1.0 | 4.6 | [Ray](https://github.com/raysan5) |
 
 As always contributions are welcome, feel free to send new examples! Here is an [examples template](examples_template.c) to start with!
 

examples/examples_template.c

@@ -56,7 +56,9 @@
 
 /*******************************************************************************************
 *
-*   raylib [core] example - Basic window
+*   raylib [<module>] example - <name>
+*
+*   Example complexity rating: [★☆??] ?/4
 *
 *   Example originally created with raylib 5.5, last time updated with raylib 5.5
 *
@@ -81,7 +83,7 @@ int main(void)
     const int screenWidth = 800;
     const int screenHeight = 450;
 
-    InitWindow(screenWidth, screenHeight, "raylib [core] example - basic window");
+    InitWindow(screenWidth, screenHeight, "raylib [<module>] example - <name>");
 
     // TODO: Load resources / Initialize variables at this point
 

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

@@ -0,0 +1,81 @@
+// 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,79 @@
+// 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,82 @@
+// 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);
+}