Skip to content

/ webrender

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Groove/Ridge/Hidden borders #657

Merged
merged 3 commits into from Dec 22, 2016
+143 −92
Merged

Groove/Ridge/Hidden borders #657

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28bcb4f
refactored ps_border a bit
kvark Dec 14, 2016
cb9384e
Proper groove & ridge borders support
kvark Dec 22, 2016
7d8c04c
Border code for the sample
kvark Dec 22, 2016
File filter...
Filter file types
Jump to…
Jump to file
Failed to load files.

Always

Just for now

13 sample/src/main.rs
View file
Open in desktop
@@ -139,6 +139,19 @@ fn main() {
builder.push_rect(LayoutRect::new(LayoutPoint::new(250.0, 100.0), LayoutSize::new(100.0, 100.0)),
sub_clip,
ColorF::new(0.0, 1.0, 0.0, 1.0));
let border_side = webrender_traits::BorderSide {
width: 10.0,
color: ColorF::new(0.0, 0.0, 1.0, 1.0),
style: webrender_traits::BorderStyle::Groove,
};
builder.push_border(LayoutRect::new(LayoutPoint::new(100.0, 100.0), LayoutSize::new(100.0, 100.0)),
sub_clip,
border_side,
border_side,
border_side,
border_side,
webrender_traits::BorderRadius::uniform(20.0));


if false { // draw text?
let font_bytes = load_file("res/FreeSans.ttf");
36 webrender/res/prim_shared.glsl
View file
Open in desktop
@@ -26,18 +26,6 @@ precision mediump sampler2DArray;
#define UV_NORMALIZED uint(0)
#define UV_PIXEL uint(1)

// Border styles as defined in webrender_traits/types.rs
#define BORDER_STYLE_NONE 0
#define BORDER_STYLE_SOLID 1
#define BORDER_STYLE_DOUBLE 2
#define BORDER_STYLE_DOTTED 3
#define BORDER_STYLE_DASHED 4
#define BORDER_STYLE_HIDDEN 5
#define BORDER_STYLE_GROOVE 6
#define BORDER_STYLE_RIDGE 7
#define BORDER_STYLE_INSET 8
#define BORDER_STYLE_OUTSET 9

#define MAX_STOPS_PER_ANGLE_GRADIENT 8

uniform sampler2DArray sCache;
@@ -227,30 +215,6 @@ Glyph fetch_glyph(int index) {
return glyph;
}

struct Border {
vec4 style;
vec4 widths;
vec4 colors[4];
vec4 radii[2];
};

Border fetch_border(int index) {
Border border;

ivec2 uv = get_fetch_uv_8(index);

border.style = texelFetchOffset(sData128, uv, 0, ivec2(0, 0));
border.widths = texelFetchOffset(sData128, uv, 0, ivec2(1, 0));
border.colors[0] = texelFetchOffset(sData128, uv, 0, ivec2(2, 0));
border.colors[1] = texelFetchOffset(sData128, uv, 0, ivec2(3, 0));
border.colors[2] = texelFetchOffset(sData128, uv, 0, ivec2(4, 0));
border.colors[3] = texelFetchOffset(sData128, uv, 0, ivec2(5, 0));
border.radii[0] = texelFetchOffset(sData128, uv, 0, ivec2(6, 0));
border.radii[1] = texelFetchOffset(sData128, uv, 0, ivec2(7, 0));

return border;
}

vec4 fetch_instance_geometry(int index) {
ivec2 uv = get_fetch_uv_1(index);

64 webrender/res/ps_border.fs.glsl
View file
Open in desktop
@@ -4,6 +4,18 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// Border styles as defined in webrender_traits/types.rs
#define BORDER_STYLE_NONE 0
#define BORDER_STYLE_SOLID 1
#define BORDER_STYLE_DOUBLE 2
#define BORDER_STYLE_DOTTED 3
#define BORDER_STYLE_DASHED 4
#define BORDER_STYLE_HIDDEN 5
#define BORDER_STYLE_GROOVE 6
#define BORDER_STYLE_RIDGE 7
#define BORDER_STYLE_INSET 8
#define BORDER_STYLE_OUTSET 9

void discard_pixels_in_rounded_borders(vec2 local_pos) {
float distanceFromRef = distance(vRefPoint, local_pos);
if (vRadii.x > 0.0 && (distanceFromRef > vRadii.x || distanceFromRef < vRadii.z)) {
@@ -291,6 +303,44 @@ void draw_solid_border(float distanceFromMixLine, vec2 localPos) {
}
}

vec4 draw_mixed_edge(float distance, float border_len, vec4 color, vec2 brightness_mod) {
float modulator = distance / border_len > 0.5 ? brightness_mod.x : brightness_mod.y;
return vec4(color.xyz * modulator, color.a);
}

void draw_mixed_border(float distanceFromMixLine, float distanceFromMiddle, vec2 localPos, vec2 brightness_mod) {
switch (vBorderPart) {
case PST_TOP_LEFT:
case PST_TOP_RIGHT:
case PST_BOTTOM_LEFT:
case PST_BOTTOM_RIGHT: {
// This is the conversion factor for transformations and device pixel scaling.
float pixelsPerFragment = length(fwidth(localPos.xy));
vec4 color = get_fragment_color(distanceFromMixLine, pixelsPerFragment);

float distance = distance(vRefPoint, localPos) - vRadii.z;
float length = vRadii.x - vRadii.z;
if (distanceFromMiddle < 0.0) {
distance = length - distance;
}

oFragColor = 0.0 <= distance && distance <= length ?
draw_mixed_edge(distance, length, color, brightness_mod) : vec4(0.0, 0.0, 0.0, 0.0);
break;
}
case PST_BOTTOM:
case PST_TOP: {
oFragColor = draw_mixed_edge(localPos.y - vPieceRect.y, vPieceRect.w, vVerticalColor, brightness_mod);
break;
}
case PST_LEFT:
case PST_RIGHT: {
oFragColor = draw_mixed_edge(localPos.x - vPieceRect.x, vPieceRect.z, vHorizontalColor, brightness_mod);
break;
}
}
}

// TODO: Investigate performance of this shader and see
// if it's worthwhile splitting it / removing branches etc.
void main(void) {
@@ -306,10 +356,16 @@ void main(void) {
float distance_from_mix_line = (local_pos.x - vPieceRect.x) * vPieceRect.w -
(local_pos.y - vPieceRect.y) * vPieceRect.z;
distance_from_mix_line /= vPieceRectHypotenuseLength;
float distance_from_middle = (local_pos.x - vLocalRect.x) +
(local_pos.y - vLocalRect.y) -
0.5 * (vLocalRect.z + vLocalRect.w);
#else
float distance_from_mix_line = vDistanceFromMixLine;
float distance_from_middle = vDistanceFromMiddle;
#endif

vec2 brightness_mod = vec2(0.7, 1.3);

switch (vBorderStyle) {
case BORDER_STYLE_DASHED:
case BORDER_STYLE_DOTTED:
@@ -324,9 +380,15 @@ void main(void) {
case BORDER_STYLE_NONE:
draw_solid_border(distance_from_mix_line, local_pos);
break;
case BORDER_STYLE_GROOVE:
draw_mixed_border(distance_from_mix_line, distance_from_middle, local_pos, brightness_mod.yx);
break;
case BORDER_STYLE_RIDGE:
draw_mixed_border(distance_from_mix_line, distance_from_middle, local_pos, brightness_mod.xy);
break;
case BORDER_STYLE_HIDDEN:
default:
discard;

}

#ifdef WR_FEATURE_TRANSFORM
2 webrender/res/ps_border.glsl
View file
Open in desktop
@@ -28,4 +28,6 @@ varying vec2 vLocalPos; // The clamped position in local space.
// These two are interpolated
varying float vDistanceFromMixLine; // This is the distance from the line where two colors
// meet in border corners.
varying float vDistanceFromMiddle; // This is the distance from the line between the top
// left corner and the bottom right.
#endif
118 webrender/res/ps_border.vs.glsl
View file
Open in desktop
@@ -3,6 +3,30 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

struct Border {
vec4 style;
vec4 widths;
vec4 colors[4];
vec4 radii[2];
};

Border fetch_border(int index) {
Border border;

ivec2 uv = get_fetch_uv_8(index);

border.style = texelFetchOffset(sData128, uv, 0, ivec2(0, 0));
border.widths = texelFetchOffset(sData128, uv, 0, ivec2(1, 0));
border.colors[0] = texelFetchOffset(sData128, uv, 0, ivec2(2, 0));
border.colors[1] = texelFetchOffset(sData128, uv, 0, ivec2(3, 0));
border.colors[2] = texelFetchOffset(sData128, uv, 0, ivec2(4, 0));
border.colors[3] = texelFetchOffset(sData128, uv, 0, ivec2(5, 0));
border.radii[0] = texelFetchOffset(sData128, uv, 0, ivec2(6, 0));
border.radii[1] = texelFetchOffset(sData128, uv, 0, ivec2(7, 0));

return border;
}

void main(void) {
Primitive prim = load_primitive();
Border border = fetch_border(prim.prim_index);
@@ -31,45 +55,81 @@ void main(void) {
switch (sub_part) {
case PST_TOP_LEFT:
segment_rect = vec4(tl_outer, tl_inner - tl_outer);
vBorderStyle = int(border.style.x);
vHorizontalColor = border.colors[BORDER_LEFT];
vVerticalColor = border.colors[BORDER_TOP];
vRadii = vec4(border.radii[0].xy,
border.radii[0].xy - border.widths.xy);
break;
case PST_TOP_RIGHT:
segment_rect = vec4(tr_inner.x,
tr_outer.y,
tr_outer.x - tr_inner.x,
tr_inner.y - tr_outer.y);
vBorderStyle = int(border.style.y);
vHorizontalColor = border.colors[BORDER_TOP];
vVerticalColor = border.colors[BORDER_RIGHT];
vRadii = vec4(border.radii[0].zw,
border.radii[0].zw - border.widths.zy);
break;
case PST_BOTTOM_RIGHT:
segment_rect = vec4(br_inner, br_outer - br_inner);
vBorderStyle = int(border.style.z);
vHorizontalColor = border.colors[BORDER_BOTTOM];
vVerticalColor = border.colors[BORDER_RIGHT];
vRadii = vec4(border.radii[1].xy,
border.radii[1].xy - border.widths.zw);
break;
case PST_BOTTOM_LEFT:
segment_rect = vec4(bl_outer.x,
bl_inner.y,
bl_inner.x - bl_outer.x,
bl_outer.y - bl_inner.y);
vBorderStyle = int(border.style.w);
vHorizontalColor = border.colors[BORDER_BOTTOM];
vVerticalColor = border.colors[BORDER_LEFT];
vRadii = vec4(border.radii[1].zw,
border.radii[1].zw - border.widths.xw);
break;
case PST_LEFT:
segment_rect = vec4(tl_outer.x,
tl_inner.y,
border.widths.x,
bl_inner.y - tl_inner.y);
vBorderStyle = int(border.style.x);
vHorizontalColor = border.colors[BORDER_LEFT];
vVerticalColor = border.colors[BORDER_LEFT];
vRadii = vec4(0.0);
break;
case PST_RIGHT:
segment_rect = vec4(tr_outer.x - border.widths.z,
tr_inner.y,
border.widths.z,
br_inner.y - tr_inner.y);
vBorderStyle = int(border.style.z);
vHorizontalColor = border.colors[BORDER_RIGHT];
vVerticalColor = border.colors[BORDER_RIGHT];
vRadii = vec4(0.0);
break;
case PST_BOTTOM:
segment_rect = vec4(bl_inner.x,
bl_outer.y - border.widths.w,
br_inner.x - bl_inner.x,
border.widths.w);
vBorderStyle = int(border.style.w);
vHorizontalColor = border.colors[BORDER_BOTTOM];
vVerticalColor = border.colors[BORDER_BOTTOM];
vRadii = vec4(0.0);
break;
case PST_TOP:
segment_rect = vec4(tl_inner.x,
tl_outer.y,
tr_inner.x - tl_inner.x,
border.widths.y);
vBorderStyle = int(border.style.y);
vHorizontalColor = border.colors[BORDER_TOP];
vVerticalColor = border.colors[BORDER_TOP];
vRadii = vec4(0.0);
break;
}

@@ -93,61 +153,6 @@ void main(void) {
vLocalRect = prim.local_rect;
#endif

switch (sub_part) {
case PST_LEFT:
vBorderStyle = int(border.style.x);
vHorizontalColor = border.colors[BORDER_LEFT];
vVerticalColor = border.colors[BORDER_LEFT];
vRadii = vec4(0.0);
break;
case PST_TOP_LEFT:
vBorderStyle = int(border.style.x);
vHorizontalColor = border.colors[BORDER_LEFT];
vVerticalColor = border.colors[BORDER_TOP];
vRadii = vec4(border.radii[0].xy,
border.radii[0].xy - border.widths.xy);
break;
case PST_TOP:
vBorderStyle = int(border.style.y);
vHorizontalColor = border.colors[BORDER_TOP];
vVerticalColor = border.colors[BORDER_TOP];
vRadii = vec4(0.0);
break;
case PST_TOP_RIGHT:
vBorderStyle = int(border.style.y);
vHorizontalColor = border.colors[BORDER_TOP];
vVerticalColor = border.colors[BORDER_RIGHT];
vRadii = vec4(border.radii[0].zw,
border.radii[0].zw - border.widths.zy);
break;
case PST_RIGHT:
vBorderStyle = int(border.style.z);
vHorizontalColor = border.colors[BORDER_RIGHT];
vVerticalColor = border.colors[BORDER_RIGHT];
vRadii = vec4(0.0);
break;
case PST_BOTTOM_RIGHT:
vBorderStyle = int(border.style.z);
vHorizontalColor = border.colors[BORDER_BOTTOM];
vVerticalColor = border.colors[BORDER_RIGHT];
vRadii = vec4(border.radii[1].xy,
border.radii[1].xy - border.widths.zw);
break;
case PST_BOTTOM:
vBorderStyle = int(border.style.w);
vHorizontalColor = border.colors[BORDER_BOTTOM];
vVerticalColor = border.colors[BORDER_BOTTOM];
vRadii = vec4(0.0);
break;
case PST_BOTTOM_LEFT:
vBorderStyle = int(border.style.w);
vHorizontalColor = border.colors[BORDER_BOTTOM];
vVerticalColor = border.colors[BORDER_LEFT];
vRadii = vec4(border.radii[1].zw,
border.radii[1].zw - border.widths.xw);
break;
}

float x0, y0, x1, y1;
switch (sub_part) {
// These are the layer tile part PrimitivePart as uploaded by the tiling.rs
@@ -212,5 +217,8 @@ void main(void) {
#else
vDistanceFromMixLine = (vi.local_clamped_pos.x - x0) * height -
(vi.local_clamped_pos.y - y0) * width;
vDistanceFromMiddle = (vi.local_clamped_pos.x - vLocalRect.x) +
(vi.local_clamped_pos.y - vLocalRect.y) -
0.5 * (vLocalRect.z + vLocalRect.w);
#endif
}
2 webrender/src/tiling.rs
View file
Open in desktop
@@ -2105,6 +2105,8 @@ impl FrameBuilder {
BorderStyle::Dotted |
BorderStyle::Dashed |
BorderStyle::Inset |
BorderStyle::Ridge |
BorderStyle::Groove |
BorderStyle::Outset |
BorderStyle::Double => {
return true;
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.