From d4743183d40c6044ce6fa39e2a52919a32912cda Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Tue, 19 May 2020 14:23:28 +0200 Subject: Draft first working version of `iced_glow` :tada: --- glow/src/shader/quad.frag | 67 +++++++++++++++++++++++++++++++++++++++++++++++ glow/src/shader/quad.vert | 47 +++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+) create mode 100644 glow/src/shader/quad.frag create mode 100644 glow/src/shader/quad.vert (limited to 'glow/src/shader') diff --git a/glow/src/shader/quad.frag b/glow/src/shader/quad.frag new file mode 100644 index 00000000..d9e74664 --- /dev/null +++ b/glow/src/shader/quad.frag @@ -0,0 +1,67 @@ +#version 450 + +layout(origin_upper_left) in vec4 gl_FragCoord; +layout(location = 0) in vec4 v_Color; +layout(location = 1) in vec4 v_BorderColor; +layout(location = 2) in vec2 v_Pos; +layout(location = 3) in vec2 v_Scale; +layout(location = 4) in float v_BorderRadius; +layout(location = 5) in float v_BorderWidth; + +layout(location = 0) out vec4 o_Color; + +float distance(in vec2 frag_coord, in vec2 position, in vec2 size, float radius) +{ + // TODO: Try SDF approach: https://www.shadertoy.com/view/wd3XRN + vec2 inner_size = size - vec2(radius, radius) * 2.0; + vec2 top_left = position + vec2(radius, radius); + vec2 bottom_right = top_left + inner_size; + + vec2 top_left_distance = top_left - frag_coord; + vec2 bottom_right_distance = frag_coord - bottom_right; + + vec2 distance = vec2( + max(max(top_left_distance.x, bottom_right_distance.x), 0), + max(max(top_left_distance.y, bottom_right_distance.y), 0) + ); + + return sqrt(distance.x * distance.x + distance.y * distance.y); +} + +void main() { + vec4 mixed_color; + + // TODO: Remove branching (?) + if(v_BorderWidth > 0) { + float internal_border = max(v_BorderRadius - v_BorderWidth, 0); + + float internal_distance = distance( + gl_FragCoord.xy, + v_Pos + vec2(v_BorderWidth), + v_Scale - vec2(v_BorderWidth * 2.0), + internal_border + ); + + float border_mix = smoothstep( + max(internal_border - 0.5, 0.0), + internal_border + 0.5, + internal_distance + ); + + mixed_color = mix(v_Color, v_BorderColor, border_mix); + } else { + mixed_color = v_Color; + } + + float d = distance( + gl_FragCoord.xy, + v_Pos, + v_Scale, + v_BorderRadius + ); + + float radius_alpha = + 1.0 - smoothstep(max(v_BorderRadius - 0.5, 0), v_BorderRadius + 0.5, d); + + o_Color = vec4(mixed_color.xyz, mixed_color.w * radius_alpha); +} diff --git a/glow/src/shader/quad.vert b/glow/src/shader/quad.vert new file mode 100644 index 00000000..2d2ebc3d --- /dev/null +++ b/glow/src/shader/quad.vert @@ -0,0 +1,47 @@ +#version 450 + +layout(location = 0) uniform mat4 u_Transform; +layout(location = 1) uniform float u_Scale; + +layout(location = 0) in vec2 i_Pos; +layout(location = 1) in vec2 i_Scale; +layout(location = 2) in vec4 i_Color; +layout(location = 3) in vec4 i_BorderColor; +layout(location = 4) in float i_BorderRadius; +layout(location = 5) in float i_BorderWidth; + +layout(location = 0) out vec4 o_Color; +layout(location = 1) out vec4 o_BorderColor; +layout(location = 2) out vec2 o_Pos; +layout(location = 3) out vec2 o_Scale; +layout(location = 4) out float o_BorderRadius; +layout(location = 5) out float o_BorderWidth; + +const vec2 positions[4] = vec2[]( + vec2(0.0, 0.0), + vec2(0.0, 1.0), + vec2(1.0, 0.0), + vec2(1.0, 1.0) +); + +void main() { + vec2 v_Pos = positions[gl_VertexID]; + vec2 p_Pos = i_Pos * u_Scale; + vec2 p_Scale = i_Scale * u_Scale; + + mat4 i_Transform = mat4( + vec4(p_Scale.x + 1.0, 0.0, 0.0, 0.0), + vec4(0.0, p_Scale.y + 1.0, 0.0, 0.0), + vec4(0.0, 0.0, 1.0, 0.0), + vec4(p_Pos - vec2(0.5, 0.5), 0.0, 1.0) + ); + + o_Color = i_Color; + o_BorderColor = i_BorderColor; + o_Pos = p_Pos; + o_Scale = p_Scale; + o_BorderRadius = i_BorderRadius * u_Scale; + o_BorderWidth = i_BorderWidth * u_Scale; + + gl_Position = u_Transform * i_Transform * vec4(v_Pos, 0.0, 1.0); +} -- cgit From d77492c0c37dec1207049b340a318e263cb96b82 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 21 May 2020 01:01:47 +0200 Subject: Avoid relying `origin_upper_left` It seems to cause considerable glitches when resizing. --- glow/src/shader/quad.frag | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'glow/src/shader') diff --git a/glow/src/shader/quad.frag b/glow/src/shader/quad.frag index d9e74664..17e7216f 100644 --- a/glow/src/shader/quad.frag +++ b/glow/src/shader/quad.frag @@ -1,6 +1,7 @@ #version 450 -layout(origin_upper_left) in vec4 gl_FragCoord; +layout(location = 2) uniform float u_Screen_Height; + layout(location = 0) in vec4 v_Color; layout(location = 1) in vec4 v_BorderColor; layout(location = 2) in vec2 v_Pos; @@ -31,12 +32,14 @@ float distance(in vec2 frag_coord, in vec2 position, in vec2 size, float radius) void main() { vec4 mixed_color; + vec2 fragCoord = vec2(gl_FragCoord.x, u_Screen_Height - gl_FragCoord.y); + // TODO: Remove branching (?) if(v_BorderWidth > 0) { float internal_border = max(v_BorderRadius - v_BorderWidth, 0); float internal_distance = distance( - gl_FragCoord.xy, + fragCoord, v_Pos + vec2(v_BorderWidth), v_Scale - vec2(v_BorderWidth * 2.0), internal_border @@ -54,7 +57,7 @@ void main() { } float d = distance( - gl_FragCoord.xy, + fragCoord, v_Pos, v_Scale, v_BorderRadius -- cgit From 60dcfc354e844757d2291bf44cb21c624bc270c2 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 21 May 2020 19:07:33 +0200 Subject: Draft `triangle` pipeline in `iced_glow` --- glow/src/shader/triangle.frag | 8 ++++++++ glow/src/shader/triangle.vert | 13 +++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 glow/src/shader/triangle.frag create mode 100644 glow/src/shader/triangle.vert (limited to 'glow/src/shader') diff --git a/glow/src/shader/triangle.frag b/glow/src/shader/triangle.frag new file mode 100644 index 00000000..e39c45e7 --- /dev/null +++ b/glow/src/shader/triangle.frag @@ -0,0 +1,8 @@ +#version 450 + +layout(location = 0) in vec4 i_Color; +layout(location = 0) out vec4 o_Color; + +void main() { + o_Color = i_Color; +} diff --git a/glow/src/shader/triangle.vert b/glow/src/shader/triangle.vert new file mode 100644 index 00000000..cfa4e995 --- /dev/null +++ b/glow/src/shader/triangle.vert @@ -0,0 +1,13 @@ +#version 450 + +layout(location = 0) uniform mat4 u_Transform; + +layout(location = 0) in vec2 i_Position; +layout(location = 1) in vec4 i_Color; + +layout(location = 0) out vec4 o_Color; + +void main() { + gl_Position = u_Transform * vec4(i_Position, 0.0, 1.0); + o_Color = i_Color; +} -- cgit From 6f71a8e3d5e47ab05653315b0d44b35af6a20338 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Fri, 22 May 2020 05:52:11 +0200 Subject: Use `get_uniform_location` for wider compatibility --- glow/src/shader/quad.frag | 28 ++++++++++++++-------------- glow/src/shader/quad.vert | 34 +++++++++++++++++----------------- glow/src/shader/triangle.frag | 9 +++++---- glow/src/shader/triangle.vert | 8 ++++---- 4 files changed, 40 insertions(+), 39 deletions(-) (limited to 'glow/src/shader') diff --git a/glow/src/shader/quad.frag b/glow/src/shader/quad.frag index 17e7216f..cea36bdc 100644 --- a/glow/src/shader/quad.frag +++ b/glow/src/shader/quad.frag @@ -1,15 +1,15 @@ -#version 450 +#version 330 -layout(location = 2) uniform float u_Screen_Height; +uniform float u_ScreenHeight; -layout(location = 0) in vec4 v_Color; -layout(location = 1) in vec4 v_BorderColor; -layout(location = 2) in vec2 v_Pos; -layout(location = 3) in vec2 v_Scale; -layout(location = 4) in float v_BorderRadius; -layout(location = 5) in float v_BorderWidth; +in vec4 v_Color; +in vec4 v_BorderColor; +in vec2 v_Pos; +in vec2 v_Scale; +in float v_BorderRadius; +in float v_BorderWidth; -layout(location = 0) out vec4 o_Color; +out vec4 o_Color; float distance(in vec2 frag_coord, in vec2 position, in vec2 size, float radius) { @@ -22,8 +22,8 @@ float distance(in vec2 frag_coord, in vec2 position, in vec2 size, float radius) vec2 bottom_right_distance = frag_coord - bottom_right; vec2 distance = vec2( - max(max(top_left_distance.x, bottom_right_distance.x), 0), - max(max(top_left_distance.y, bottom_right_distance.y), 0) + max(max(top_left_distance.x, bottom_right_distance.x), 0.0), + max(max(top_left_distance.y, bottom_right_distance.y), 0.0) ); return sqrt(distance.x * distance.x + distance.y * distance.y); @@ -32,11 +32,11 @@ float distance(in vec2 frag_coord, in vec2 position, in vec2 size, float radius) void main() { vec4 mixed_color; - vec2 fragCoord = vec2(gl_FragCoord.x, u_Screen_Height - gl_FragCoord.y); + vec2 fragCoord = vec2(gl_FragCoord.x, u_ScreenHeight - gl_FragCoord.y); // TODO: Remove branching (?) if(v_BorderWidth > 0) { - float internal_border = max(v_BorderRadius - v_BorderWidth, 0); + float internal_border = max(v_BorderRadius - v_BorderWidth, 0.0); float internal_distance = distance( fragCoord, @@ -64,7 +64,7 @@ void main() { ); float radius_alpha = - 1.0 - smoothstep(max(v_BorderRadius - 0.5, 0), v_BorderRadius + 0.5, d); + 1.0 - smoothstep(max(v_BorderRadius - 0.5, 0.0), v_BorderRadius + 0.5, d); o_Color = vec4(mixed_color.xyz, mixed_color.w * radius_alpha); } diff --git a/glow/src/shader/quad.vert b/glow/src/shader/quad.vert index 2d2ebc3d..d37b5c8d 100644 --- a/glow/src/shader/quad.vert +++ b/glow/src/shader/quad.vert @@ -1,7 +1,7 @@ -#version 450 +#version 330 -layout(location = 0) uniform mat4 u_Transform; -layout(location = 1) uniform float u_Scale; +uniform mat4 u_Transform; +uniform float u_Scale; layout(location = 0) in vec2 i_Pos; layout(location = 1) in vec2 i_Scale; @@ -10,12 +10,12 @@ layout(location = 3) in vec4 i_BorderColor; layout(location = 4) in float i_BorderRadius; layout(location = 5) in float i_BorderWidth; -layout(location = 0) out vec4 o_Color; -layout(location = 1) out vec4 o_BorderColor; -layout(location = 2) out vec2 o_Pos; -layout(location = 3) out vec2 o_Scale; -layout(location = 4) out float o_BorderRadius; -layout(location = 5) out float o_BorderWidth; +out vec4 v_Color; +out vec4 v_BorderColor; +out vec2 v_Pos; +out vec2 v_Scale; +out float v_BorderRadius; +out float v_BorderWidth; const vec2 positions[4] = vec2[]( vec2(0.0, 0.0), @@ -25,7 +25,7 @@ const vec2 positions[4] = vec2[]( ); void main() { - vec2 v_Pos = positions[gl_VertexID]; + vec2 q_Pos = positions[gl_VertexID]; vec2 p_Pos = i_Pos * u_Scale; vec2 p_Scale = i_Scale * u_Scale; @@ -36,12 +36,12 @@ void main() { vec4(p_Pos - vec2(0.5, 0.5), 0.0, 1.0) ); - o_Color = i_Color; - o_BorderColor = i_BorderColor; - o_Pos = p_Pos; - o_Scale = p_Scale; - o_BorderRadius = i_BorderRadius * u_Scale; - o_BorderWidth = i_BorderWidth * u_Scale; + v_Color = i_Color; + v_BorderColor = i_BorderColor; + v_Pos = p_Pos; + v_Scale = p_Scale; + v_BorderRadius = i_BorderRadius * u_Scale; + v_BorderWidth = i_BorderWidth * u_Scale; - gl_Position = u_Transform * i_Transform * vec4(v_Pos, 0.0, 1.0); + gl_Position = u_Transform * i_Transform * vec4(q_Pos, 0.0, 1.0); } diff --git a/glow/src/shader/triangle.frag b/glow/src/shader/triangle.frag index e39c45e7..d186784a 100644 --- a/glow/src/shader/triangle.frag +++ b/glow/src/shader/triangle.frag @@ -1,8 +1,9 @@ -#version 450 +#version 330 -layout(location = 0) in vec4 i_Color; -layout(location = 0) out vec4 o_Color; +in vec4 v_Color; + +out vec4 o_Color; void main() { - o_Color = i_Color; + o_Color = v_Color; } diff --git a/glow/src/shader/triangle.vert b/glow/src/shader/triangle.vert index cfa4e995..5723436a 100644 --- a/glow/src/shader/triangle.vert +++ b/glow/src/shader/triangle.vert @@ -1,13 +1,13 @@ -#version 450 +#version 330 -layout(location = 0) uniform mat4 u_Transform; +uniform mat4 u_Transform; layout(location = 0) in vec2 i_Position; layout(location = 1) in vec4 i_Color; -layout(location = 0) out vec4 o_Color; +out vec4 v_Color; void main() { gl_Position = u_Transform * vec4(i_Position, 0.0, 1.0); - o_Color = i_Color; + v_Color = i_Color; } -- cgit From 45511a442f707e93fe6e568d2100756b63af7362 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Wed, 27 May 2020 23:17:21 +0200 Subject: Target physical pixels for quads in `iced_glow` --- glow/src/shader/quad.vert | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'glow/src/shader') diff --git a/glow/src/shader/quad.vert b/glow/src/shader/quad.vert index d37b5c8d..ce816550 100644 --- a/glow/src/shader/quad.vert +++ b/glow/src/shader/quad.vert @@ -26,14 +26,14 @@ const vec2 positions[4] = vec2[]( void main() { vec2 q_Pos = positions[gl_VertexID]; - vec2 p_Pos = i_Pos * u_Scale; - vec2 p_Scale = i_Scale * u_Scale; + vec2 p_Pos = floor(i_Pos * u_Scale); + vec2 p_Scale = floor(i_Scale * u_Scale); mat4 i_Transform = mat4( - vec4(p_Scale.x + 1.0, 0.0, 0.0, 0.0), - vec4(0.0, p_Scale.y + 1.0, 0.0, 0.0), + vec4(p_Scale.x, 0.0, 0.0, 0.0), + vec4(0.0, p_Scale.y, 0.0, 0.0), vec4(0.0, 0.0, 1.0, 0.0), - vec4(p_Pos - vec2(0.5, 0.5), 0.0, 1.0) + vec4(p_Pos, 0.0, 1.0) ); v_Color = i_Color; @@ -41,7 +41,7 @@ void main() { v_Pos = p_Pos; v_Scale = p_Scale; v_BorderRadius = i_BorderRadius * u_Scale; - v_BorderWidth = i_BorderWidth * u_Scale; + v_BorderWidth = floor(i_BorderWidth * u_Scale); gl_Position = u_Transform * i_Transform * vec4(q_Pos, 0.0, 1.0); } -- cgit From e11b5c614f5bf73c137b8b4f24f56047617527eb Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Thu, 28 May 2020 22:57:30 +0200 Subject: Revert "Target physical pixels for quads in `iced_glow`" This reverts commit 45511a442f707e93fe6e568d2100756b63af7362. --- glow/src/shader/quad.vert | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'glow/src/shader') diff --git a/glow/src/shader/quad.vert b/glow/src/shader/quad.vert index ce816550..d37b5c8d 100644 --- a/glow/src/shader/quad.vert +++ b/glow/src/shader/quad.vert @@ -26,14 +26,14 @@ const vec2 positions[4] = vec2[]( void main() { vec2 q_Pos = positions[gl_VertexID]; - vec2 p_Pos = floor(i_Pos * u_Scale); - vec2 p_Scale = floor(i_Scale * u_Scale); + vec2 p_Pos = i_Pos * u_Scale; + vec2 p_Scale = i_Scale * u_Scale; mat4 i_Transform = mat4( - vec4(p_Scale.x, 0.0, 0.0, 0.0), - vec4(0.0, p_Scale.y, 0.0, 0.0), + vec4(p_Scale.x + 1.0, 0.0, 0.0, 0.0), + vec4(0.0, p_Scale.y + 1.0, 0.0, 0.0), vec4(0.0, 0.0, 1.0, 0.0), - vec4(p_Pos, 0.0, 1.0) + vec4(p_Pos - vec2(0.5, 0.5), 0.0, 1.0) ); v_Color = i_Color; @@ -41,7 +41,7 @@ void main() { v_Pos = p_Pos; v_Scale = p_Scale; v_BorderRadius = i_BorderRadius * u_Scale; - v_BorderWidth = floor(i_BorderWidth * u_Scale); + v_BorderWidth = i_BorderWidth * u_Scale; gl_Position = u_Transform * i_Transform * vec4(q_Pos, 0.0, 1.0); } -- cgit