From 15dda0115c783805753119984decb4d9249b1f01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Foucault?= Date: Mon, 22 Jun 2020 19:57:53 +0200 Subject: UI: Widget: Replace geometry by fragment shader drawing This means all the antiailasing is done inside the fragment shader. We use a Signed Distance Field to draw the 2D rounded boxes. This ensure the best quality for AA. This reduce the averge Batch for widget to 16 verts instead of ~600 and reduce overshading a lot. Theme Emboss alpha and tria alpha needs to be changed after this refactor. The shadow drawing is left unchanged and still use geometry. Reviewed By: Severin Differential Revision: https://developer.blender.org/D7833 --- .../shaders/gpu_shader_2D_widget_base_frag.glsl | 81 +++++- .../shaders/gpu_shader_2D_widget_base_vert.glsl | 311 ++++++++------------- 2 files changed, 193 insertions(+), 199 deletions(-) (limited to 'source/blender/gpu/shaders') diff --git a/source/blender/gpu/shaders/gpu_shader_2D_widget_base_frag.glsl b/source/blender/gpu/shaders/gpu_shader_2D_widget_base_frag.glsl index bdc87baf924..05fbae53e18 100644 --- a/source/blender/gpu/shaders/gpu_shader_2D_widget_base_frag.glsl +++ b/source/blender/gpu/shaders/gpu_shader_2D_widget_base_frag.glsl @@ -1,11 +1,62 @@ uniform vec3 checkerColorAndSize; -noperspective in vec4 finalColor; +noperspective in vec2 uvInterp; noperspective in float butCo; flat in float discardFac; +flat in float shadeTri; +flat in vec2 outRectSize; +flat in vec4 outRoundCorners; +noperspective in vec4 innerColor; +flat in vec4 borderColor; +flat in vec4 embossColor; +flat in float lineWidth; out vec4 fragColor; +vec3 compute_masks(vec2 uv) +{ + bool upper_half = uv.y > outRectSize.y * 0.5; + bool right_half = uv.x > outRectSize.x * 0.5; + float corner_rad; + + vec2 uv_sdf = uv; + if (right_half) { + uv_sdf.x = outRectSize.x - uv_sdf.x; + } + if (upper_half) { + uv_sdf.y = outRectSize.y - uv_sdf.y; + corner_rad = right_half ? outRoundCorners.z : outRoundCorners.w; + } + else { + corner_rad = right_half ? outRoundCorners.y : outRoundCorners.x; + } + + /* Signed distance field from the corner (in pixel). + * inner_sdf is sharp and outer_sdf is rounded. */ + uv_sdf -= corner_rad; + float inner_sdf = max(0.0, min(uv_sdf.x, uv_sdf.y)); + float outer_sdf = -length(min(uv_sdf, 0.0)); + float sdf = inner_sdf + outer_sdf + corner_rad; + + /* Fade emboss at the border. */ + float emboss_size = clamp((upper_half) ? 0.0 : (uv.x / corner_rad), 0.0, 1.0); + + /* Clamp line width to be at least 1px wide. This can happen if the projection matrix + * has been scaled (i.e: Node editor)... */ + float line_width = (lineWidth > 0.0) ? max(fwidth(uv.x), lineWidth) : 0.0; + + const float aa_radius = 0.5; + vec3 masks; + masks.x = smoothstep(-aa_radius, aa_radius, sdf); + masks.y = smoothstep(-aa_radius, aa_radius, sdf - line_width); + masks.z = smoothstep(-aa_radius, aa_radius, sdf + line_width * emboss_size); + + /* Compose masks together to avoid having too much alpha. */ + masks.zx = max(vec2(0.0), masks.zx - masks.xy); + + return masks; +} + vec4 do_checkerboard() { float size = checkerColorAndSize.z; @@ -25,16 +76,32 @@ void main() discard; } - fragColor = finalColor; - - if (butCo > 0.5) { - vec4 checker = do_checkerboard(); - fragColor = mix(checker, fragColor, fragColor.a); - } + vec3 masks = compute_masks(uvInterp); if (butCo > 0.0) { + /* Alpha checker widget. */ + if (butCo > 0.5) { + vec4 checker = do_checkerboard(); + fragColor = mix(checker, innerColor, innerColor.a); + } + else { + /* Set alpha to 1.0. */ + fragColor = innerColor; + } fragColor.a = 1.0; } + else { + /* Premultiply here. */ + fragColor = innerColor * vec4(innerColor.aaa, 1.0); + } + fragColor *= masks.y; + fragColor += masks.x * borderColor; + fragColor += masks.z * embossColor; + + /* Un-premult because the blend equation is already doing the mult. */ + if (fragColor.a > 0.0) { + fragColor.rgb /= fragColor.a; + } fragColor = blender_srgb_to_framebuffer_space(fragColor); } diff --git a/source/blender/gpu/shaders/gpu_shader_2D_widget_base_vert.glsl b/source/blender/gpu/shaders/gpu_shader_2D_widget_base_vert.glsl index d7cc851556b..30d0cd05926 100644 --- a/source/blender/gpu/shaders/gpu_shader_2D_widget_base_vert.glsl +++ b/source/blender/gpu/shaders/gpu_shader_2D_widget_base_vert.glsl @@ -1,127 +1,7 @@ -#define BIT_RANGE(x) uint((1 << x) - 1) - -/* 2 bits for corner */ -/* Attention! Not the same order as in UI_interface.h! - * Ordered by drawing order. */ -#define BOTTOM_LEFT 0u -#define BOTTOM_RIGHT 1u -#define TOP_RIGHT 2u -#define TOP_LEFT 3u -#define CNR_FLAG_RANGE BIT_RANGE(2) - -/* 4bits for corner id */ -#define CORNER_VEC_OFS 2u -#define CORNER_VEC_RANGE BIT_RANGE(4) -const vec2 cornervec[9] = vec2[9](vec2(0.0, 1.0), - vec2(0.02, 0.805), - vec2(0.067, 0.617), - vec2(0.169, 0.45), - vec2(0.293, 0.293), - vec2(0.45, 0.169), - vec2(0.617, 0.076), - vec2(0.805, 0.02), - vec2(1.0, 0.0)); - -/* 4bits for jitter id */ -#define JIT_OFS 6u -#define JIT_RANGE BIT_RANGE(4) -const vec2 jit[9] = vec2[9](vec2(0.468813, -0.481430), - vec2(-0.155755, -0.352820), - vec2(0.219306, -0.238501), - vec2(-0.393286, -0.110949), - vec2(-0.024699, 0.013908), - vec2(0.343805, 0.147431), - vec2(-0.272855, 0.269918), - vec2(0.095909, 0.388710), - vec2(0.0, 0.0)); - -/* 2bits for other flags */ -#define INNER_FLAG uint(1 << 10) /* is inner vert */ -#define EMBOSS_FLAG uint(1 << 11) /* is emboss vert */ - -/* 2bits for color */ -#define COLOR_OFS 12u -#define COLOR_RANGE BIT_RANGE(2) -#define COLOR_INNER 0u -#define COLOR_EDGE 1u -#define COLOR_EMBOSS 2u - -/* 2bits for trias type */ -#define TRIA_FLAG uint(1 << 14) /* is tria vert */ -#define TRIA_FIRST INNER_FLAG /* is first tria (reuse INNER_FLAG) */ - -/* We can reuse the CORNER_* bits for tria */ -#define TRIA_VEC_RANGE BIT_RANGE(6) - -/* Some GPUs have performanse issues with this array being const (Doesn't fit in the registers?). - * To resolve this issue, store the array as a uniform buffer. - * (The array is still stored in the registry, but indexing is done in the uniform buffer.) */ -uniform vec2 triavec[43] = vec2[43]( - - /* ROUNDBOX_TRIA_ARROWS */ - vec2(-0.170000, 0.400000), - vec2(-0.050000, 0.520000), - vec2(0.250000, 0.000000), - vec2(0.470000, -0.000000), - vec2(-0.170000, -0.400000), - vec2(-0.050000, -0.520000), - vec2(0.170000, 0.400000), - vec2(0.050000, 0.520000), - vec2(-0.250000, 0.000000), - vec2(-0.470000, -0.000000), - vec2(0.170000, -0.400000), - vec2(0.050000, -0.520000), - - /* ROUNDBOX_TRIA_SCROLL - circle tria (triangle strip) */ - vec2(0.000000, 1.000000), - vec2(0.382684, 0.923879), - vec2(-0.382683, 0.923880), - vec2(0.707107, 0.707107), - vec2(-0.707107, 0.707107), - vec2(0.923879, 0.382684), - vec2(-0.923879, 0.382684), - vec2(1.000000, 0.000000), - vec2(-1.000000, 0.000000), - vec2(0.923879, -0.382684), - vec2(-0.923879, -0.382684), - vec2(0.707107, -0.707107), - vec2(-0.707107, -0.707107), - vec2(0.382684, -0.923879), - vec2(-0.382683, -0.923880), - vec2(0.000000, -1.000000), - - /* ROUNDBOX_TRIA_MENU - menu arrows */ - vec2(-0.51, 0.07), - vec2(-0.4, 0.18), - vec2(-0.05, -0.39), - vec2(-0.05, -0.17), - vec2(0.41, 0.07), - vec2(0.3, 0.18), - - /* ROUNDBOX_TRIA_CHECK - check mark */ - vec2(-0.67000, 0.020000), - vec2(-0.500000, 0.190000), - vec2(-0.130000, -0.520000), - vec2(-0.130000, -0.170000), - vec2(0.720000, 0.430000), - vec2(0.530000, 0.590000), - -/* ROUNDBOX_TRIA_HOLD_ACTION_ARROW - hold action arrows */ -#define OX (-0.32) -#define OY (0.1) -#define SC (0.35 * 2) - // vec2(-0.5 + SC, 1.0 + OY), vec2( 0.5, 1.0 + OY), vec2( 0.5, 0.0 + OY + SC), - vec2((0.5 - SC) + OX, 1.0 + OY), - vec2(-0.5 + OX, 1.0 + OY), - vec2(-0.5 + OX, SC + OY) -#undef OX -#undef OY -#undef SC -); uniform mat4 ModelViewProjectionMatrix; -#define MAX_PARAM 11 +#define MAX_PARAM 12 #ifdef USE_INSTANCE # define MAX_INSTANCE 6 uniform vec4 parameters[MAX_PARAM * MAX_INSTANCE]; @@ -147,105 +27,152 @@ uniform vec4 parameters[MAX_PARAM]; #define tria2Size parameters[gl_InstanceID * MAX_PARAM + 10].y #define shadeDir parameters[gl_InstanceID * MAX_PARAM + 10].z #define alphaDiscard parameters[gl_InstanceID * MAX_PARAM + 10].w +#define triaType parameters[gl_InstanceID * MAX_PARAM + 11].x /* We encode alpha check and discard factor together. */ #define doAlphaCheck (alphaDiscard < 0.0) #define discardFactor abs(alphaDiscard) -in uint vflag; - -noperspective out vec4 finalColor; +noperspective out vec2 uvInterp; +flat out vec2 outRectSize; +flat out vec4 outRoundCorners; +noperspective out vec4 innerColor; +flat out vec4 borderColor; +flat out vec4 embossColor; +flat out float lineWidth; noperspective out float butCo; flat out float discardFac; vec2 do_widget(void) { - uint cflag = vflag & CNR_FLAG_RANGE; - uint vofs = (vflag >> CORNER_VEC_OFS) & CORNER_VEC_RANGE; - bool is_inner = (vflag & INNER_FLAG) != 0u; - - vec2 v = cornervec[vofs]; - /* Scale by corner radius */ - v *= roundCorners[cflag] * ((is_inner) ? radsi : rads); - /* Flip in the right direction and osition to corner */ - vec4 rct = (is_inner) ? recti : rect; - if (cflag == BOTTOM_LEFT) { - v += rct.xz; - } - else if (cflag == BOTTOM_RIGHT) { - v = vec2(-v.y, v.x); - v += rct.yz; - } - else if (cflag == TOP_RIGHT) { - v = -v; - v += rct.yw; - } - else /* (cflag == TOP_LEFT) */ { - v = vec2(v.y, -v.x); - v += rct.xw; - } - - vec2 uv = faci * (v - recti.xz); - - /* compute uv and color gradient */ - uint color_id = (vflag >> COLOR_OFS) & COLOR_RANGE; - if (color_id == COLOR_INNER) { - float fac = clamp((shadeDir > 0.0) ? uv.y : uv.x, 0.0, 1.0); - - if (doAlphaCheck) { - finalColor = colorInner1; - butCo = uv.x; - } - else { - finalColor = mix(colorInner2, colorInner1, fac); - butCo = -abs(uv.x); - } - } - else if (color_id == COLOR_EDGE) { - finalColor = colorEdge; - butCo = -abs(uv.x); + lineWidth = abs(rect.x - recti.x); + vec2 emboss_ofs = vec2(0.0, -lineWidth); + vec2 v_pos[4] = vec2[4](rect.xz + emboss_ofs, rect.xw, rect.yz + emboss_ofs, rect.yw); + vec2 pos = v_pos[gl_VertexID]; + + uvInterp = pos - rect.xz; + outRectSize = rect.yw - rect.xz; + outRoundCorners = rads * roundCorners; + + vec2 uv = uvInterp / outRectSize; + float fac = clamp((shadeDir > 0.0) ? uv.y : uv.x, 0.0, 1.0); + /* Note innerColor is premultiplied inside the fragment shader. */ + if (doAlphaCheck) { + innerColor = colorInner1; + butCo = uv.x; } - else /* (color_id == COLOR_EMBOSS) */ { - finalColor = colorEmboss; + else { + innerColor = mix(colorInner2, colorInner1, fac); butCo = -abs(uv.x); } - bool is_emboss = (vflag & EMBOSS_FLAG) != 0u; - v.y -= (is_emboss) ? (recti.z - rect.z) : 0.0; + /* We need premultiplied color for transparency. */ + borderColor = colorEdge * vec4(colorEdge.aaa, 1.0); + embossColor = colorEmboss * vec4(colorEmboss.aaa, 1.0); - return v; + return pos; } vec2 do_tria() { - uint vofs = vflag & TRIA_VEC_RANGE; + int vidx = gl_VertexID % 4; + bool tria2 = gl_VertexID > 7; + + vec2 pos; + float size = (tria2) ? -tria2Size : tria1Size; + vec2 center = (tria2) ? tria2Center : tria1Center; + + vec2 arrow_pos[4] = vec2[4](vec2(0.0, 0.6), vec2(0.6, 0.0), vec2(-0.6, 0.0), vec2(0.0, -0.6)); + /* Rotated uv space by 45deg and mirrored. */ + vec2 arrow_uvs[4] = vec2[4](vec2(0.0, 0.85), vec2(0.85, 0.85), vec2(0.0, 0.0), vec2(0.0, 0.85)); + + vec2 point_pos[4] = vec2[4](vec2(-1.0, -1.0), vec2(-1.0, 1.0), vec2(1.0, -1.0), vec2(1.0, 1.0)); + vec2 point_uvs[4] = vec2[4](vec2(0.0, 0.0), vec2(0.0, 1.0), vec2(1.0, 0.0), vec2(1.0, 1.0)); + + /* We reuse the SDF roundbox rendering of widget to render the tria shapes. + * This means we do clever tricks to position the rectangle the way we want using + * the 2 triangles uvs. */ + if (triaType == 0.0) { + /* ROUNDBOX_TRIA_NONE */ + outRectSize = uvInterp = pos = vec2(0); + outRoundCorners = vec4(0.01); + } + else if (triaType == 1.0) { + /* ROUNDBOX_TRIA_ARROWS */ + pos = arrow_pos[vidx]; + uvInterp = arrow_uvs[vidx]; + uvInterp -= vec2(0.05, 0.63); /* Translate */ + outRectSize = vec2(0.74, 0.17); + outRoundCorners = vec4(0.08); + } + else if (triaType == 2.0) { + /* ROUNDBOX_TRIA_SCROLL */ + pos = point_pos[vidx]; + uvInterp = point_uvs[vidx]; + outRectSize = vec2(1.0); + outRoundCorners = vec4(0.5); + } + else if (triaType == 3.0) { + /* ROUNDBOX_TRIA_MENU */ + pos = tria2 ? vec2(0.0) : arrow_pos[vidx]; /* Solo tria */ + pos = vec2(pos.y, -pos.x); /* Rotate */ + pos += vec2(-0.05, 0.0); /* Translate */ + size *= 0.8; /* Scale */ + uvInterp = arrow_uvs[vidx]; + uvInterp -= vec2(0.05, 0.63); /* Translate */ + outRectSize = vec2(0.74, 0.17); + outRoundCorners = vec4(0.01); + } + else if (triaType == 4.0) { + /* ROUNDBOX_TRIA_CHECK */ + /* A bit more hacky: We use the two trias joined together to render + * both sides of the checkmark with different length. */ + pos = arrow_pos[min(vidx, 2)]; /* Only keep 1 triangle. */ + pos.y = tria2 ? -pos.y : pos.y; /* Mirror along X */ + pos = pos.x * vec2(0.0872, -0.996) + pos.y * vec2(0.996, 0.0872); /* Rotate (85deg) */ + pos += vec2(-0.1, 0.2); /* Translate */ + center = tria1Center; + size = tria1Size * 1.7; /* Scale */ + uvInterp = arrow_uvs[vidx]; + uvInterp -= tria2 ? vec2(0.4, 0.65) : vec2(0.08, 0.65); /* Translate */ + outRectSize = vec2(0.74, 0.14); + outRoundCorners = vec4(0.01); + } + else { + /* ROUNDBOX_TRIA_HOLD_ACTION_ARROW */ + /* We use a single triangle to cut the round rect in half. The edge will not be Antialiased. */ + pos = tria2 ? vec2(0.0) : arrow_pos[min(vidx, 2)]; /* Only keep 1 triangle. */ + pos = pos.x * vec2(0.707, 0.707) + pos.y * vec2(-0.707, 0.707); /* Rotate (45deg) */ + pos += vec2(-1.7, 2.4); /* Translate (hardcoded, might want to remove) */ + size *= 0.4; /* Scale */ + uvInterp = arrow_uvs[vidx]; + uvInterp -= vec2(0.05, 0.05); /* Translate */ + outRectSize = vec2(0.75); + outRoundCorners = vec4(0.01); + } - vec2 v = triavec[vofs]; + uvInterp *= abs(size); + outRectSize *= abs(size); + outRoundCorners *= abs(size); - finalColor = colorTria; - butCo = -1.0; + pos = pos * size + center; - bool is_tria_first = (vflag & TRIA_FIRST) != 0u; + innerColor = colorTria * vec4(colorTria.aaa, 1.0); - if (is_tria_first) { - v = v * tria1Size + tria1Center; - } - else { - v = v * tria2Size + tria2Center; - } + lineWidth = 0.0; + borderColor = vec4(0.0); + embossColor = vec4(0.0); + + butCo = -1.0; - return v; + return pos; } void main() { discardFac = discardFactor; - bool is_tria = (vflag & TRIA_FLAG) != 0u; - - vec2 v = (is_tria) ? do_tria() : do_widget(); - - /* Antialiasing offset */ - v += jit[(vflag >> JIT_OFS) & JIT_RANGE]; + bool is_tria = (gl_VertexID > 3); + vec2 pos = (is_tria) ? do_tria() : do_widget(); - gl_Position = ModelViewProjectionMatrix * vec4(v, 0.0, 1.0); + gl_Position = ModelViewProjectionMatrix * vec4(pos, 0.0, 1.0); } -- cgit v1.2.3