Permalink
Browse files

Rework box shadows to support border radii properly with the same

nearly-closed-form shader.

See the comments inside `box_shadow.fs.glsl` for the exhaustive details
(multivariable calculus).
1 parent ee85b05 commit d57057470cb2bddf0c8ece3fc29cfbe5d03114a2 @pcwalton pcwalton committed Dec 9, 2015
Showing with 324 additions and 117 deletions.
  1. +126 −26 res/box_shadow.fs.glsl
  2. +0 −1 res/box_shadow.vs.glsl
  3. +33 −15 src/batch_builder.rs
  4. +66 −23 src/internal_types.rs
  5. +48 −41 src/renderer.rs
  6. +3 −1 src/resource_cache.rs
  7. +25 −4 src/resource_list.rs
  8. +23 −6 src/texture_cache.rs
View
@@ -1,3 +1,26 @@
+// See http://asciimath.org to render the equations here.
+
+// The Gaussian function used for blurring:
+//
+// G_sigma(x) = 1/sqrt(2 pi sigma^2) e^(-x^2/(2 sigma^2))
+float gauss(float x, float sigma) {
+ float sigmaPow2 = sigma * sigma;
+ return 1.0 / sqrt(6.283185307179586 * sigmaPow2) * exp(-(x * x) / (2.0 * sigmaPow2));
+}
+
+// An approximation of the error function, which is related to the integral of the Gaussian
+// function:
+//
+// "erf"(x) = 2/sqrt(pi) int_0^x e^(-t^2) dt
+// ~~ 1 - 1 / (1 + a_1 x + a_2 x^2 + a_3 x^3 + a_4 x^4)^4
+//
+// where:
+//
+// a_1 = 0.278393, a_2 = 0.230389, a_3 = 0.000972, a_4 = 0.078108
+//
+// This approximation is accurate to `5 xx 10^-4`, more than accurate enough for our purposes.
+//
+// See: https://en.wikipedia.org/wiki/Error_function#Approximation_with_elementary_functions
float erf(float x) {
bool negative = x < 0.0;
if (negative)
@@ -10,33 +33,110 @@ float erf(float x) {
return negative ? -result : result;
}
-void main(void)
-{
- float range = floor(vBlurRadius) * 3.0;
- float sigma = vBlurRadius / 2.0;
- float sigmaSqrt2 = sigma * 1.41421356237;
-
- float length;
- float value;
- vec2 position = vPosition - vBorderPosition.zw;
- if (vBorderRadii.z == 0.0) {
- length = range;
- value = position.x;
- } else {
- length = range;
- vec2 center = vec2(max(position.x - range, length),
- max(position.y - range, length));
- vec2 referencePoint = position - range;
- value = distance(referencePoint, center);
- }
+// A useful helper for calculating integrals of the Gaussian function via the error function:
+//
+// "erf"_sigma(x) = 2 int 1/sqrt(2 pi sigma^2) e^(-x^2/(2 sigma^2)) dx
+// = "erf"(x/(sigma sqrt(2)))
+float erfSigma(float x, float sigma) {
+ return erf(x / (sigma * 1.4142135623730951));
+}
- float minValue = min(value - range, length) - value;
- float maxValue = min(value + range, length) - value;
- if (minValue < maxValue) {
- value = 1.0 - (erf(maxValue / sigmaSqrt2) - erf(minValue / sigmaSqrt2));
- } else {
- value = 1.0;
+// Returns the blurred color value from the box itself (not counting any rounded corners). `p_0` is
+// the vector distance to the top left corner of the box; `p_1` is the vector distance to its
+// bottom right corner.
+//
+// "colorFromRect"_sigma(p_0, p_1)
+// = int_{p_{0_y}}^{p_{1_y}} int_{p_{1_x}}^{p_{0_x}} G_sigma(y) G_sigma(x) dx dy
+// = 1/4 ("erf"_sigma(p_{1_x}) - "erf"_sigma(p_{0_x}))
+// ("erf"_sigma(p_{1_y}) - "erf"_sigma(p_{0_y}))
+float colorFromRect(vec2 p0, vec2 p1, float sigma) {
+ return (erfSigma(p1.x, sigma) - erfSigma(p0.x, sigma)) *
+ (erfSigma(p1.y, sigma) - erfSigma(p0.y, sigma)) / 4.0;
+}
+
+// Returns the `x` coordinate on the ellipse with the given radii for the given `y` coordinate:
+//
+// "ellipsePoint"(y, y_0, a, b) = a sqrt(1 - ((y - y_0) / b)^2)
+float ellipsePoint(float y, float y0, vec2 radii) {
+ float bStep = (y - y0) / radii.y;
+ return radii.x * sqrt(1.0 - bStep * bStep);
+}
+
+// A helper function to compute the value that needs to be subtracted to accommodate the border
+// corners.
+//
+// "colorCutout"_sigma(x_{0_l}, x_{0_r}, y_0, y_{min}, y_{max}, a, b)
+// = int_{y_{min}}^{y_{max}}
+// int_{x_{0_r} + "ellipsePoint"(y, y_0, a, b)}^{x_{0_r} + a} G_sigma(y) G_sigma(x) dx
+// + int_{x_{0_l} - a}^{x_{0_l} - "ellipsePoint"(y, y_0, a, b)} G_sigma(y) G_sigma(x)
+// dx dy
+// = int_{y_{min}}^{y_{max}} 1/2 G_sigma(y)
+// ("erf"_sigma(x_{0_r} + a) - "erf"_sigma(x_{0_r} + "ellipsePoint"(y, y_0, a, b)) +
+// "erf"_sigma(x_{0_l} - "ellipsePoint"(y, y_0, a, b)) - "erf"_sigma(x_{0_l} - a))
+//
+// with the outer integral evaluated numerically.
+float colorCutoutGeneral(float x0l,
+ float x0r,
+ float y0,
+ float yMin,
+ float yMax,
+ vec2 radii,
+ float sigma) {
+ float sum = 0.0;
+ for (float y = yMin; y <= yMax; y += 1.0) {
+ float xEllipsePoint = ellipsePoint(y, y0, radii);
+ sum += gauss(y, sigma) *
+ (erfSigma(x0r + radii.x, sigma) - erfSigma(x0r + xEllipsePoint, sigma) +
+ erfSigma(x0l - xEllipsePoint, sigma) - erfSigma(x0l - radii.x, sigma));
}
- SetFragColor(vec4(vColor.rgb, vColor.a == 0.0 ? value : 1.0 - value));
+ return sum / 2.0;
+}
+
+// The value that needs to be subtracted to accommodate the top border corners.
+float colorCutoutTop(float x0l, float x0r, float y0, vec2 radii, float sigma) {
+ return colorCutoutGeneral(x0l, x0r, y0, y0, y0 + radii.y, radii, sigma);
+}
+
+// The value that needs to be subtracted to accommodate the bottom border corners.
+float colorCutoutBottom(float x0l, float x0r, float y0, vec2 radii, float sigma) {
+ return colorCutoutGeneral(x0l, x0r, y0, y0 - radii.y, y0, radii, sigma);
+}
+
+// The blurred color value for the point at `pos` with the top left corner of the box at
+// `p_{0_"rect"}` and the bottom right corner of the box at `p_{1_"rect"}`.
+float color(vec2 pos, vec2 p0Rect, vec2 p1Rect, vec2 radii, float sigma) {
+ // Compute the vector distances `p_0` and `p_1`.
+ vec2 p0 = p0Rect - pos, p1 = p1Rect - pos;
+
+ // Compute the basic color `"colorFromRect"_sigma(p_0, p_1)`. This is all we have to do if
+ // the box is unrounded.
+ float cRect = colorFromRect(p0, p1, sigma);
+ if (radii.x == 0.0 || radii.y == 0.0)
+ return cRect;
+
+ // Compute the inner corners of the box, taking border radii into account: `x_{0_l}`,
+ // `y_{0_t}`, `x_{0_r}`, and `y_{0_b}`.
+ float x0l = p0.x + radii.x;
+ float y0t = p1.y - radii.y;
+ float x0r = p1.x - radii.x;
+ float y0b = p0.y + radii.y;
+
+ // Compute the final color:
+ //
+ // "colorFromRect"_sigma(p_0, p_1) -
+ // ("colorCutoutTop"_sigma(x_{0_l}, x_{0_r}, y_{0_t}, a, b) +
+ // "colorCutoutBottom"_sigma(x_{0_l}, x_{0_r}, y_{0_b}, a, b))
+ float cCutoutTop = colorCutoutTop(x0l, x0r, y0t, radii, sigma);
+ float cCutoutBottom = colorCutoutBottom(x0l, x0r, y0b, radii, sigma);
+ return cRect - (cCutoutTop + cCutoutBottom);
+}
+
+void main(void) {
+ vec2 pos = vPosition.xy;
+ vec2 p0Rect = vBorderPosition.xy, p1Rect = vBorderPosition.zw;
+ vec2 radii = vBorderRadii.xy;
+ float sigma = vBlurRadius / 2.0;
+ float value = color(pos, p0Rect, p1Rect, radii, sigma);
+ SetFragColor(vec4(vColor.rgb, max(value, 0.0)));
}
@@ -3,7 +3,6 @@ void main(void)
vPosition = aPosition.xy;
vColor = aColor;
vBorderPosition = aBorderPosition;
- vDestTextureSize = aDestTextureSize;
vBorderRadii = aBorderRadii;
vBlurRadius = aBlurRadius;
gl_Position = uTransform * vec4(aPosition, 1.0);
View
@@ -621,9 +621,11 @@ impl<'a> BatchBuilder<'a> {
self.add_box_shadow_corner(matrix_index,
&metrics.tl_outer,
- &metrics.tl_inner,
+ &Point2D::new(metrics.tl_outer.x + metrics.edge_size,
+ metrics.tl_outer.y + metrics.edge_size),
&metrics.tl_outer,
&center,
+ &rect,
&color,
blur_radius,
border_radius,
@@ -633,10 +635,13 @@ impl<'a> BatchBuilder<'a> {
clip_buffers,
BasicRotationAngle::Upright);
self.add_box_shadow_corner(matrix_index,
- &Point2D::new(metrics.tr_inner.x, metrics.tr_outer.y),
- &Point2D::new(metrics.tr_outer.x, metrics.tr_inner.y),
+ &Point2D::new(metrics.tr_outer.x - metrics.edge_size,
+ metrics.tr_outer.y),
+ &Point2D::new(metrics.tr_outer.x,
+ metrics.tr_outer.y + metrics.edge_size),
&Point2D::new(center.x, metrics.tr_outer.y),
&Point2D::new(metrics.tr_outer.x, center.y),
+ &rect,
&color,
blur_radius,
border_radius,
@@ -646,10 +651,12 @@ impl<'a> BatchBuilder<'a> {
clip_buffers,
BasicRotationAngle::Clockwise90);
self.add_box_shadow_corner(matrix_index,
- &metrics.br_inner,
- &metrics.br_outer,
+ &Point2D::new(metrics.br_outer.x - metrics.edge_size,
+ metrics.br_outer.y - metrics.edge_size),
+ &Point2D::new(metrics.br_outer.x, metrics.br_outer.y),
&center,
&metrics.br_outer,
+ &rect,
&color,
blur_radius,
border_radius,
@@ -659,10 +666,13 @@ impl<'a> BatchBuilder<'a> {
clip_buffers,
BasicRotationAngle::Clockwise180);
self.add_box_shadow_corner(matrix_index,
- &Point2D::new(metrics.bl_outer.x, metrics.bl_inner.y),
- &Point2D::new(metrics.bl_inner.x, metrics.bl_outer.y),
+ &Point2D::new(metrics.bl_outer.x,
+ metrics.bl_outer.y - metrics.edge_size),
+ &Point2D::new(metrics.bl_outer.x + metrics.edge_size,
+ metrics.bl_outer.y),
&Point2D::new(metrics.bl_outer.x, center.y),
&Point2D::new(center.x, metrics.bl_outer.y),
+ &rect,
&color,
blur_radius,
border_radius,
@@ -723,47 +733,51 @@ impl<'a> BatchBuilder<'a> {
self.add_box_shadow_edge(matrix_index,
&top_rect.origin,
&top_rect.bottom_right(),
+ &rect,
color,
blur_radius,
border_radius,
clip_mode,
&clip,
resource_cache,
clip_buffers,
- BasicRotationAngle::Clockwise270);
+ BasicRotationAngle::Clockwise90);
self.add_box_shadow_edge(matrix_index,
&right_rect.origin,
&right_rect.bottom_right(),
+ &rect,
color,
blur_radius,
border_radius,
clip_mode,
&clip,
resource_cache,
clip_buffers,
- BasicRotationAngle::Upright);
+ BasicRotationAngle::Clockwise180);
self.add_box_shadow_edge(matrix_index,
&bottom_rect.origin,
&bottom_rect.bottom_right(),
+ &rect,
color,
blur_radius,
border_radius,
clip_mode,
&clip,
resource_cache,
clip_buffers,
- BasicRotationAngle::Clockwise90);
+ BasicRotationAngle::Clockwise270);
self.add_box_shadow_edge(matrix_index,
&left_rect.origin,
&left_rect.bottom_right(),
+ &rect,
color,
blur_radius,
border_radius,
clip_mode,
&clip,
resource_cache,
clip_buffers,
- BasicRotationAngle::Clockwise180);
+ BasicRotationAngle::Upright);
}
fn fill_outside_area_of_inset_box_shadow(&mut self,
@@ -1339,6 +1353,7 @@ impl<'a> BatchBuilder<'a> {
bottom_right: &Point2D<f32>,
corner_area_top_left: &Point2D<f32>,
corner_area_bottom_right: &Point2D<f32>,
+ box_rect: &Rect<f32>,
color: &ColorF,
blur_radius: f32,
border_radius: f32,
@@ -1361,6 +1376,7 @@ impl<'a> BatchBuilder<'a> {
let color_image = match BoxShadowRasterOp::create_corner(blur_radius,
border_radius,
+ box_rect,
inverted) {
Some(raster_item) => {
let raster_item = RasterItem::BoxShadow(raster_item);
@@ -1387,6 +1403,7 @@ impl<'a> BatchBuilder<'a> {
matrix_index: MatrixIndex,
top_left: &Point2D<f32>,
bottom_right: &Point2D<f32>,
+ box_rect: &Rect<f32>,
color: &ColorF,
blur_radius: f32,
border_radius: f32,
@@ -1406,6 +1423,7 @@ impl<'a> BatchBuilder<'a> {
let color_image = match BoxShadowRasterOp::create_edge(blur_radius,
border_radius,
+ box_rect,
inverted) {
Some(raster_item) => {
let raster_item = RasterItem::BoxShadow(raster_item);
@@ -1533,10 +1551,10 @@ impl BoxShadowMetrics {
}
}
-fn compute_box_shadow_rect(box_bounds: &Rect<f32>,
- box_offset: &Point2D<f32>,
- spread_radius: f32)
- -> Rect<f32> {
+pub fn compute_box_shadow_rect(box_bounds: &Rect<f32>,
+ box_offset: &Point2D<f32>,
+ spread_radius: f32)
+ -> Rect<f32> {
let mut rect = (*box_bounds).clone();
rect.origin.x += box_offset.x;
rect.origin.y += box_offset.y;
Oops, something went wrong.

0 comments on commit d570574

Please sign in to comment.