Add shaders_rounded_rectangle example
This commit is contained in:
Anstro Pleuton
parent
d48b8afbb5
commit
c1e3641bae
14 changed files with 1464 additions and 15 deletions
|
|
@ -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 \
|
||||
|
|
|
|||
|
|
@ -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 \
|
||||
|
|
|
|||
|
|
@ -199,6 +199,7 @@ 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
|
||||
|
||||
|
|
@ -206,13 +207,13 @@ Examples using raylib audio functionality, including sound/music loading and pla
|
|||
|
||||
| ## | 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
|
||||
|
||||
|
|
@ -220,12 +221,12 @@ Examples showing raylib misc functionality that does not fit in other categories
|
|||
|
||||
| ## | 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!
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
// 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)
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get 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 sdf = roundedRectangleSDF(fragCoord, center, halfSize, radius);
|
||||
|
||||
// Calculate anti-aliased factor
|
||||
float aa = 1.0 - antiAlias(0.0, -sdf);
|
||||
|
||||
gl_FragColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
// 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 float borderThickness;
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle's border
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
float sdf = roundedRectangleSDF(fragCoord, center, halfSize, radius);
|
||||
|
||||
// Calculate anti-aliased factor
|
||||
float aa = antiAlias(borderThickness, -sdf) * (1.0 - antiAlias(0.0, -sdf));
|
||||
|
||||
gl_FragColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
// 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)
|
||||
|
||||
// Shadow parameters
|
||||
uniform float shadowRadius;
|
||||
uniform float shadowPower;
|
||||
uniform vec2 shadowOffset;
|
||||
uniform float shadowScale;
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle's shadow
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
|
||||
vec2 shadowHalfSize = halfSize*shadowScale;
|
||||
vec2 shadowCenter = center + shadowOffset;
|
||||
float sdf = roundedRectangleSDF(fragCoord, shadowCenter, shadowHalfSize, radius);
|
||||
|
||||
float aa = easestep(shadowRadius, 0.0, sdf, shadowPower);
|
||||
|
||||
gl_FragColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
// 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)
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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,
|
||||
vec4 rectangle,
|
||||
vec4 radius
|
||||
)
|
||||
{
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle
|
||||
float sdf = roundedRectangleSDF(fragCoord, rectangle, radius);
|
||||
|
||||
// Calculate anti-aliased factor
|
||||
float aa = 1.0 - antiAlias(0.0, -sdf);
|
||||
|
||||
gl_FragColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
// 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 float borderThickness;
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle's border
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
float sdf = roundedRectangleSDF(fragCoord, center, halfSize, radius);
|
||||
|
||||
// Calculate anti-aliased factor
|
||||
float aa = antiAlias(borderThickness, -sdf) * (1.0 - antiAlias(0.0, -sdf));
|
||||
|
||||
gl_FragColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
// 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)
|
||||
|
||||
// Shadow parameters
|
||||
uniform float shadowRadius;
|
||||
uniform float shadowPower;
|
||||
uniform vec2 shadowOffset;
|
||||
uniform float shadowScale;
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle's shadow
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
|
||||
vec2 shadowHalfSize = halfSize*shadowScale;
|
||||
vec2 shadowCenter = center + shadowOffset;
|
||||
float sdf = roundedRectangleSDF(fragCoord, shadowCenter, shadowHalfSize, radius);
|
||||
|
||||
float aa = easestep(shadowRadius, 0.0, sdf, shadowPower);
|
||||
|
||||
gl_FragColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
// 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)
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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,
|
||||
vec4 rectangle,
|
||||
vec4 radius
|
||||
)
|
||||
{
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle
|
||||
float sdf = roundedRectangleSDF(fragCoord, rectangle, radius);
|
||||
|
||||
// Calculate anti-aliased factor
|
||||
float aa = 1.0 - antiAlias(0.0, -sdf);
|
||||
|
||||
finalColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
// 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 float borderThickness;
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle's border
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
float sdf = roundedRectangleSDF(fragCoord, center, halfSize, radius);
|
||||
|
||||
// Calculate anti-aliased factor
|
||||
float aa = antiAlias(borderThickness, -sdf) * (1.0 - antiAlias(0.0, -sdf));
|
||||
|
||||
finalColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
// 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)
|
||||
|
||||
// Shadow parameters
|
||||
uniform float shadowRadius;
|
||||
uniform float shadowPower;
|
||||
uniform vec2 shadowOffset;
|
||||
uniform float shadowScale;
|
||||
|
||||
// TODO: Remove anti-aliasing?
|
||||
|
||||
// Anti-alias using easing function for smmoth edges
|
||||
uniform float aaPower;
|
||||
uniform float aaDistance;
|
||||
|
||||
// Ease in-out
|
||||
float ease(float x, float p)
|
||||
{
|
||||
if (x < 0.5)
|
||||
{
|
||||
return 1.0/pow(0.5, p - 1.0)*pow(x, p);
|
||||
}
|
||||
else
|
||||
{
|
||||
return 1.0 - 1.0/pow(0.5, p - 1.0)*pow(1.0 - x, p);
|
||||
}
|
||||
}
|
||||
|
||||
// Smoothstep with easing
|
||||
float easestep(float edge0, float edge1, float x, float p)
|
||||
{
|
||||
float t = clamp( (x - edge0)/(edge1 - edge0), 0.0, 1.0 );
|
||||
return ease(t, p);
|
||||
}
|
||||
|
||||
// Anti-alias on edge for x
|
||||
float antiAlias(float edge, float x)
|
||||
{
|
||||
return easestep(edge + aaDistance*0.5, edge - aaDistance*0.5, x, aaPower);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Get fragment coordinate in pixels
|
||||
vec2 fragCoord = gl_FragCoord.xy;
|
||||
|
||||
// Calculate signed distance field for rounded rectangle's shadow
|
||||
vec2 halfSize = rectangle.zw*0.5;
|
||||
vec2 center = rectangle.xy + halfSize;
|
||||
|
||||
vec2 shadowHalfSize = halfSize*shadowScale;
|
||||
vec2 shadowCenter = center + shadowOffset;
|
||||
float sdf = roundedRectangleSDF(fragCoord, shadowCenter, shadowHalfSize, radius);
|
||||
|
||||
float aa = easestep(shadowRadius, 0.0, sdf, shadowPower);
|
||||
|
||||
finalColor = texelColor*colDiffuse*fragColor
|
||||
*vec4(1.0, 1.0, 1.0, aa);
|
||||
}
|
||||
208
examples/shaders/shaders_rounded_rectangle.c
Normal file
208
examples/shaders/shaders_rounded_rectangle.c
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
/*******************************************************************************************
|
||||
*
|
||||
* raylib [shaders] example - Rounded Rectangle
|
||||
*
|
||||
* Example complexity rating: [★★☆☆] 2/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
|
||||
|
||||
//------------------------------------------------------------------------------------
|
||||
// Program main entry point
|
||||
//------------------------------------------------------------------------------------
|
||||
int main(void)
|
||||
{
|
||||
// Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
const int screenWidth = 800;
|
||||
const int screenHeight = 450;
|
||||
|
||||
SetConfigFlags(FLAG_MSAA_4X_HINT); // Enable Multi Sampling Anti Aliasing 4x (if available)
|
||||
InitWindow(screenWidth, screenHeight, "raylib [shaders] example - Rounded Rectangle");
|
||||
|
||||
// Shader loading
|
||||
//--------------------------------------------------------------------------------------
|
||||
// Load the rectangle shader which will draw the rectangle with rounded corners
|
||||
Shader rectangleShader = LoadShader(TextFormat("resources/shaders/glsl%i/base.vs", GLSL_VERSION),
|
||||
TextFormat("resources/shaders/glsl%i/rounded_rectangle.fs", GLSL_VERSION));
|
||||
|
||||
// Organized into an array for easy access
|
||||
int rectangleShaderLocs[4] = {
|
||||
GetShaderLocation(rectangleShader, "rectangle"), // vec4, rectangle bounds (x, y, width, height, NOTE: Y axis is flipped)
|
||||
GetShaderLocation(rectangleShader, "radius"), // vec4, radius corners (top-left, top-right, bottom-left, bottom-right)
|
||||
GetShaderLocation(rectangleShader, "aaPower"), // float, anti-aliasing power
|
||||
GetShaderLocation(rectangleShader, "aaDistance") // float, anti-aliasing distance
|
||||
};
|
||||
|
||||
// Load the rectangle shadow shader which will draw the rectangle's shadow
|
||||
Shader rectangleShadowShader = LoadShader(TextFormat("resources/shaders/glsl%i/base.vs", GLSL_VERSION),
|
||||
TextFormat("resources/shaders/glsl%i/rounded_rectangle_shadow.fs", GLSL_VERSION));
|
||||
|
||||
int rectangleShadowShaderLocs[8] = {
|
||||
GetShaderLocation(rectangleShadowShader, "rectangle"), // vec4, rectangle bounds (x, y, width, height)
|
||||
GetShaderLocation(rectangleShadowShader, "radius"), // vec4, radius corners (top-left, top-right, bottom-left, bottom-right)
|
||||
GetShaderLocation(rectangleShadowShader, "shadowRadius"), // float, shadow radius
|
||||
GetShaderLocation(rectangleShadowShader, "shadowPower"), // float, shadow power
|
||||
GetShaderLocation(rectangleShadowShader, "shadowOffset"), // vec2, shadow offset (NOTE: Y axis is flipped)
|
||||
GetShaderLocation(rectangleShadowShader, "shadowScale"), // float, shadow scale
|
||||
GetShaderLocation(rectangleShadowShader, "aaPower"), // float, anti-aliasing power
|
||||
GetShaderLocation(rectangleShadowShader, "aaDistance") // float, anti-aliasing distance
|
||||
};
|
||||
|
||||
// Load the rectangle border shader which will draw the rectangle's border
|
||||
Shader rectangleBorderShader = LoadShader(TextFormat("resources/shaders/glsl%i/base.vs", GLSL_VERSION),
|
||||
TextFormat("resources/shaders/glsl%i/rounded_rectangle_border.fs", GLSL_VERSION));
|
||||
|
||||
int rectangleBorderShaderLocs[5] = {
|
||||
GetShaderLocation(rectangleBorderShader, "rectangle"), // vec4, rectangle bounds (x, y, width, height)
|
||||
GetShaderLocation(rectangleBorderShader, "radius"), // vec4, radius corners (top-left, top-right, bottom-left, bottom-right)
|
||||
GetShaderLocation(rectangleBorderShader, "borderThickness"), // float, border thickness
|
||||
GetShaderLocation(rectangleBorderShader, "aaPower"), // float, anti-aliasing power
|
||||
GetShaderLocation(rectangleBorderShader, "aaDistance") // float, anti-aliasing distance
|
||||
};
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Set parameters
|
||||
//--------------------------------------------------------------------------------------
|
||||
// Set 4 radius values for the rounded corners in pixels (top-left, top-right, bottom-left, bottom-right)
|
||||
SetShaderValue(rectangleShader, rectangleShaderLocs[1], (float[]){ 5.0f, 10.0f, 15.0f, 20.0f }, SHADER_UNIFORM_VEC4);
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[1], (float[]){ 5.0f, 10.0f, 15.0f, 20.0f }, SHADER_UNIFORM_VEC4);
|
||||
SetShaderValue(rectangleBorderShader, rectangleBorderShaderLocs[1], (float[]){ 5.0f, 10.0f, 15.0f, 20.0f }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
// Set shadow parameters (in pixels)
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[2], (float[]){ 20.0f }, SHADER_UNIFORM_FLOAT); // Shadow radius
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[3], (float[]){ 1.5f }, SHADER_UNIFORM_FLOAT); // Shadow power
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[4], (float[]){ 0.0f, -5.0f }, SHADER_UNIFORM_VEC2); // Shadow offset
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[5], (float[]){ 0.95f }, SHADER_UNIFORM_FLOAT); // Shadow scale
|
||||
|
||||
// Set border parameters (in pixels)
|
||||
SetShaderValue(rectangleBorderShader, rectangleBorderShaderLocs[2], (float[]){ 5.0f }, SHADER_UNIFORM_FLOAT); // Border thickness
|
||||
|
||||
// Set anti-aliasing (power and distance) parameters for all shaders
|
||||
SetShaderValue(rectangleShader, rectangleShaderLocs[2], (float[]){ 1.5f }, SHADER_UNIFORM_FLOAT);
|
||||
SetShaderValue(rectangleShader, rectangleShaderLocs[3], (float[]){ 1.0f }, SHADER_UNIFORM_FLOAT);
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[6], (float[]){ 1.5f }, SHADER_UNIFORM_FLOAT);
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[7], (float[]){ 1.0f }, SHADER_UNIFORM_FLOAT);
|
||||
SetShaderValue(rectangleBorderShader, rectangleBorderShaderLocs[3], (float[]){ 1.5f }, SHADER_UNIFORM_FLOAT);
|
||||
SetShaderValue(rectangleBorderShader, rectangleBorderShaderLocs[4], (float[]){ 1.0f }, SHADER_UNIFORM_FLOAT);
|
||||
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
SetTargetFPS(60);
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Main game loop
|
||||
while (!WindowShouldClose()) // Detect window close button or ESC key
|
||||
{
|
||||
// Draw
|
||||
//----------------------------------------------------------------------------------
|
||||
BeginDrawing();
|
||||
|
||||
ClearBackground(RAYWHITE);
|
||||
|
||||
// NOTE: Draw rectangle's shadow first using shader
|
||||
DrawRectangleLines(30, 50, 150, 100, DARKGRAY);
|
||||
DrawText("Rectangle shadow shader", 30, 35, 10, DARKGRAY);
|
||||
|
||||
Rectangle rec = { 50, 70, 110, 60 };
|
||||
|
||||
// Flip Y axis to match shader coordinate system
|
||||
rec.y = GetScreenHeight() - rec.y - rec.height;
|
||||
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[0], (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
BeginShaderMode(rectangleShadowShader);
|
||||
DrawRectangle(0, 0, GetScreenWidth(), GetScreenHeight(), DARKBLUE);
|
||||
EndShaderMode();
|
||||
|
||||
// Draw rectangle box with rounded corners using shader
|
||||
DrawRectangleLines(30, 180, 150, 100, DARKGRAY);
|
||||
DrawText("Rounded rectangle shader", 30, 165, 10, DARKGRAY);
|
||||
|
||||
rec = (Rectangle){ 50, 200, 110, 60 };
|
||||
rec.y = GetScreenHeight() - rec.y - rec.height;
|
||||
|
||||
SetShaderValue(rectangleShader, rectangleShaderLocs[0], (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
BeginShaderMode(rectangleShader);
|
||||
DrawRectangle(0, 0, GetScreenWidth(), GetScreenHeight(), BLUE);
|
||||
EndShaderMode();
|
||||
|
||||
// Draw rectangle's border using shader
|
||||
DrawRectangleLines(30, 310, 150, 100, DARKGRAY);
|
||||
DrawText("Rectangle border shader", 30, 295, 10, DARKGRAY);
|
||||
|
||||
rec = (Rectangle){ 50, 330, 110, 60 };
|
||||
rec.y = GetScreenHeight() - rec.y - rec.height;
|
||||
|
||||
SetShaderValue(rectangleBorderShader, rectangleBorderShaderLocs[0], (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
BeginShaderMode(rectangleBorderShader);
|
||||
DrawRectangle(0, 0, GetScreenWidth(), GetScreenHeight(), SKYBLUE);
|
||||
EndShaderMode();
|
||||
|
||||
// Draw one more rectangle with all three combined
|
||||
//--------------------------------------------------------------------------------------------------
|
||||
DrawRectangleLines(210, 50, 560, 360, DARKGRAY);
|
||||
DrawText("Rectangle all three combined", 210, 35, 10, DARKGRAY);
|
||||
|
||||
rec = (Rectangle){ 240, 80, 500, 300 };
|
||||
rec.y = GetScreenHeight() - rec.y - rec.height;
|
||||
|
||||
// Draw shadow
|
||||
SetShaderValue(rectangleShadowShader, rectangleShadowShaderLocs[0], (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
BeginShaderMode(rectangleShadowShader);
|
||||
DrawRectangle(0, 0, GetScreenWidth(), GetScreenHeight(), DARKBLUE);
|
||||
EndShaderMode();
|
||||
|
||||
// Draw rectangle
|
||||
SetShaderValue(rectangleShader, rectangleShaderLocs[0], (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
BeginShaderMode(rectangleShader);
|
||||
DrawRectangle(0, 0, GetScreenWidth(), GetScreenHeight(), BLUE);
|
||||
EndShaderMode();
|
||||
|
||||
// Draw border
|
||||
SetShaderValue(rectangleBorderShader, rectangleBorderShaderLocs[0], (float[]){ rec.x, rec.y, rec.width, rec.height }, SHADER_UNIFORM_VEC4);
|
||||
|
||||
BeginShaderMode(rectangleBorderShader);
|
||||
DrawRectangle(0, 0, GetScreenWidth(), GetScreenHeight(), SKYBLUE);
|
||||
EndShaderMode();
|
||||
//--------------------------------------------------------------------------------------------------
|
||||
|
||||
DrawText("(c) Rounded rectangle SDF by Iñigo Quilez. MIT License.", GetScreenWidth() - 300, GetScreenHeight() - 20, 10, BLACK);
|
||||
|
||||
EndDrawing();
|
||||
//----------------------------------------------------------------------------------
|
||||
}
|
||||
|
||||
// De-Initialization
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
// Unload shader
|
||||
UnloadShader(rectangleShader);
|
||||
UnloadShader(rectangleShadowShader);
|
||||
UnloadShader(rectangleBorderShader);
|
||||
|
||||
CloseWindow(); // Close window and OpenGL context
|
||||
//--------------------------------------------------------------------------------------
|
||||
|
||||
return 0;
|
||||
}
|
||||
BIN
examples/shaders/shaders_rounded_rectangle.png
Normal file
BIN
examples/shaders/shaders_rounded_rectangle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in a new issue