Add a curve shader for ECAA and refactor the line shader to minimize code duplication
This commit is contained in:
Patrick Walton
parent
3a9b29735a
commit
653530be0b
|
|
@ -1,9 +1,11 @@
|
|||
// pathfinder/demo/src/index.ts
|
||||
//
|
||||
// Copyright © 2017 Mozilla Foundation
|
||||
|
||||
const base64js = require('base64-js');
|
||||
const opentype = require('opentype.js');
|
||||
|
||||
const TEXT: string = "X";
|
||||
const TEXT: string = "G";
|
||||
const FONT_SIZE: number = 16.0;
|
||||
|
||||
const PARTITION_FONT_ENDPOINT_URL: string = "/partition-font";
|
||||
|
|
@ -56,6 +58,10 @@ const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
|
|||
vertex: "/glsl/gles2/ecaa-line.vs.glsl",
|
||||
fragment: "/glsl/gles2/ecaa-line.fs.glsl",
|
||||
},
|
||||
ecaaCurve: {
|
||||
vertex: "/glsl/gles2/ecaa-curve.vs.glsl",
|
||||
fragment: "/glsl/gles2/ecaa-curve.fs.glsl",
|
||||
},
|
||||
ecaaResolve: {
|
||||
vertex: "/glsl/gles2/ecaa-resolve.vs.glsl",
|
||||
fragment: "/glsl/gles2/ecaa-resolve.fs.glsl",
|
||||
|
|
@ -91,6 +97,7 @@ interface ShaderMap<T> {
|
|||
ecaaEdgeDetect: T;
|
||||
ecaaCover: T;
|
||||
ecaaLine: T;
|
||||
ecaaCurve: T;
|
||||
ecaaResolve: T;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,13 @@ int imod(int ia, int ib) {
|
|||
return int(floor(m + 0.5));
|
||||
}
|
||||
|
||||
bool xor(bool a, bool b) {
|
||||
return (a && !b) || (!a && b);
|
||||
}
|
||||
|
||||
float det2(vec2 a, vec2 b) {
|
||||
return a.x * b.y - b.x * a.y;
|
||||
}
|
||||
vec2 transformVertexPosition(vec2 position, mat4 transform) {
|
||||
return (transform * vec4(position, 0.0, 1.0)).xy;
|
||||
}
|
||||
|
|
@ -32,6 +39,92 @@ float convertPathIndexToDepthValue(int pathIndex) {
|
|||
return mix(-1.0, 1.0, float(pathIndex) / float(MAX_PATHS));
|
||||
}
|
||||
|
||||
bool computeQuadPosition(out vec2 outPosition,
|
||||
inout vec2 leftPosition,
|
||||
inout vec2 rightPosition,
|
||||
vec2 quadPosition,
|
||||
ivec2 framebufferSize,
|
||||
mat4 transform) {
|
||||
if (abs(leftPosition.x - rightPosition.x) <= EPSILON) {
|
||||
outPosition = vec2(0.0);
|
||||
return false;
|
||||
}
|
||||
|
||||
leftPosition = transformVertexPosition(leftPosition, transform);
|
||||
rightPosition = transformVertexPosition(rightPosition, transform);
|
||||
|
||||
vec2 verticalExtents = vec2(min(leftPosition.y, rightPosition.y),
|
||||
max(leftPosition.y, rightPosition.y));
|
||||
|
||||
vec4 roundedExtents = vec4(floor(vec2(leftPosition.x, verticalExtents.x)),
|
||||
ceil(vec2(rightPosition.x, verticalExtents.y)));
|
||||
|
||||
// FIXME(pcwalton): Use a separate VBO for this.
|
||||
quadPosition = (quadPosition + 1.0) * 0.5;
|
||||
|
||||
vec2 position = mix(roundedExtents.xy, roundedExtents.zw, quadPosition);
|
||||
outPosition = convertScreenToClipSpace(position, framebufferSize);
|
||||
return true;
|
||||
}
|
||||
|
||||
// Computes the area of the polygon covering the pixel with the given boundaries.
|
||||
//
|
||||
// * `p0` and `p1` are the endpoints of the line.
|
||||
// * `spanP0` and `spanP1` are the endpoints of the line, clipped to the left and right edges of
|
||||
// the pixel.
|
||||
// * `t` is the times of `spanP0` and `spanP1` relative to `p0` and `p1` respectively.
|
||||
// * `pixelExtents` are the boundaries of the pixel (left/right/bottom/top respectively).
|
||||
// * `p` and `q` are the Liang-Barsky clipping distances.
|
||||
// * `lowerPart` is true if this is the lower half of the B-quad.
|
||||
float computeCoverage(vec2 p0,
|
||||
vec2 p1,
|
||||
vec2 spanP0,
|
||||
vec2 spanP1,
|
||||
vec2 t,
|
||||
vec4 pixelExtents,
|
||||
vec4 p,
|
||||
vec4 q,
|
||||
bool lowerPart) {
|
||||
bool slopeNegative = p0.y > p1.y;
|
||||
|
||||
// Clip to the bottom and top.
|
||||
if (p.z != 0.0) {
|
||||
vec2 tVertical = q.zw / p.zw;
|
||||
if (slopeNegative)
|
||||
tVertical.xy = tVertical.yx; // FIXME(pcwalton): Can this be removed?
|
||||
t = vec2(max(t.x, tVertical.x), min(t.y, tVertical.y));
|
||||
}
|
||||
|
||||
// If the line doesn't pass through this pixel, detect that and bail.
|
||||
if (t.x >= t.y) {
|
||||
bool fill = lowerPart ? spanP0.y < pixelExtents.z : spanP0.y > pixelExtents.w;
|
||||
return fill ? spanP1.x - spanP0.x : 0.0;
|
||||
}
|
||||
|
||||
// Calculate A2.x.
|
||||
float a2x;
|
||||
if (xor(lowerPart, slopeNegative)) {
|
||||
a2x = spanP0.x;
|
||||
t.xy = t.yx;
|
||||
} else {
|
||||
a2x = spanP1.x;
|
||||
}
|
||||
|
||||
// Calculate A3.y.
|
||||
float a3y = lowerPart ? pixelExtents.w : pixelExtents.z;
|
||||
|
||||
// Calculate A0-A5.
|
||||
vec2 a0 = p0 + p.yw * t.x;
|
||||
vec2 a1 = p0 + p.yw * t.y;
|
||||
vec2 a2 = vec2(a2x, a1.y);
|
||||
vec2 a3 = vec2(a2x, a3y);
|
||||
vec2 a4 = vec2(a0.x, a3y);
|
||||
|
||||
// Calculate area with the shoelace formula.
|
||||
float area = det2(a0, a1) + det2(a1, a2) + det2(a2, a3) + det2(a3, a4) + det2(a4, a0);
|
||||
return area * (slopeNegative ? 0.5 : -0.5);
|
||||
}
|
||||
|
||||
int unpackUInt16(vec2 packedValue) {
|
||||
ivec2 valueBytes = ivec2(floor(packedValue * 255.0));
|
||||
return valueBytes.y * 256 + valueBytes.x;
|
||||
|
|
@ -67,11 +160,3 @@ vec2 packPathID(int pathID) {
|
|||
int unpackPathID(vec2 packedPathID) {
|
||||
return unpackUInt16(packedPathID);
|
||||
}
|
||||
|
||||
bool xor(bool a, bool b) {
|
||||
return (a && !b) || (!a && b);
|
||||
}
|
||||
|
||||
float det2(vec2 a, vec2 b) {
|
||||
return a.x * b.y - b.x * a.y;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
|
||||
// pathfinder/shaders/gles2/ecaa-line.vs.glsl
|
||||
//
|
||||
// Copyright (c) 2017 Mozilla Foundation
|
||||
|
||||
precision highp float;
|
||||
|
||||
uniform bool uLowerPart;
|
||||
|
||||
varying vec4 vEndpoints;
|
||||
varying vec2 vControlPoint;
|
||||
|
||||
// Solve the equation:
|
||||
//
|
||||
// x = p0x + t^2 * (p0x - 2*p1x + p2x) + t*(2*p1x - 2*p0x)
|
||||
//
|
||||
// We use the Citardauq Formula to avoid floating point precision issues.
|
||||
float solveCurveT(float p0x, float p1x, float p2x, float x) {
|
||||
float a = p0x - 2.0 * p1x + p2x;
|
||||
float b = 2.0 * p1x - 2.0 * p0x;
|
||||
float c = p0x - x;
|
||||
return 2.0 * c / (-b - sqrt(b * b - 4.0 * a * c));
|
||||
}
|
||||
|
||||
void main() {
|
||||
// Unpack.
|
||||
vec2 center = gl_FragCoord.xy;
|
||||
vec2 p0 = vEndpoints.xy, p1 = vEndpoints.zw;
|
||||
vec2 cp = vControlPoint;
|
||||
|
||||
// Compute pixel extents.
|
||||
vec4 pixelExtents = center.xxyy + vec4(-0.5, 0.5, -0.5, 0.5);
|
||||
|
||||
// Clip the curve to the left and right edges to create a line.
|
||||
//
|
||||
// TODO(pcwalton): Consider clipping to the bottom and top edges properly too. (I kind of doubt
|
||||
// it's worth it to do this, though, given that the maximum error doing it this way will always
|
||||
// be less than a pixel, and it saves a lot of time.)
|
||||
//
|
||||
// FIXME(pcwalton): Factor out shared terms to avoid computing them multiple times.
|
||||
vec2 t = vec2(pixelExtents.x > p0.x ? solveCurveT(p0.x, cp.x, p1.x, pixelExtents.x) : 0.0,
|
||||
p1.x < pixelExtents.y ? solveCurveT(p0.x, cp.x, p1.x, pixelExtents.y) : 1.0);
|
||||
|
||||
vec2 spanP0 = mix(mix(p0, cp, t.x), mix(cp, p1, t.x), t.x);
|
||||
vec2 spanP1 = mix(mix(p0, cp, t.y), mix(cp, p1, t.y), t.y);
|
||||
p0 = spanP0;
|
||||
p1 = spanP1;
|
||||
t = vec2(0.0, 1.0);
|
||||
|
||||
// Set up Liang-Barsky clipping.
|
||||
vec4 p = (p1 - p0).xxyy, q = pixelExtents - p0.xxyy;
|
||||
|
||||
// Compute area.
|
||||
gl_FragColor = vec4(computeCoverage(p0, p1, p0, p1, t, pixelExtents, p, q, uLowerPart));
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// pathfinder/shaders/gles2/ecaa-curve.vs.glsl
|
||||
//
|
||||
// Copyright (c) 2017 Mozilla Foundation
|
||||
|
||||
precision highp float;
|
||||
|
||||
uniform mat4 uTransform;
|
||||
uniform ivec2 uFramebufferSize;
|
||||
uniform ivec2 uBVertexPositionDimensions;
|
||||
uniform ivec2 uBVertexPathIDDimensions;
|
||||
uniform sampler2D uBVertexPosition;
|
||||
uniform sampler2D uBVertexPathID;
|
||||
uniform bool uLowerPart;
|
||||
|
||||
attribute vec2 aQuadPosition;
|
||||
attribute vec4 aCurveEndpointIndices;
|
||||
attribute vec2 aCurveControlPointIndex;
|
||||
|
||||
varying vec4 vEndpoints;
|
||||
varying vec2 vControlPoint;
|
||||
|
||||
void main() {
|
||||
// Fetch B-vertex positions.
|
||||
ivec3 pointIndices = ivec3(unpackUInt32Attribute(aCurveEndpointIndices.xy),
|
||||
unpackUInt32Attribute(aCurveEndpointIndices.zw),
|
||||
unpackUInt32Attribute(aCurveControlPointIndex));
|
||||
vec2 leftPosition = fetchFloat2Data(uBVertexPosition,
|
||||
pointIndices.x,
|
||||
uBVertexPositionDimensions);
|
||||
vec2 rightPosition = fetchFloat2Data(uBVertexPosition,
|
||||
pointIndices.y,
|
||||
uBVertexPositionDimensions);
|
||||
vec2 controlPointPosition = fetchFloat2Data(uBVertexPosition,
|
||||
pointIndices.z,
|
||||
uBVertexPositionDimensions);
|
||||
|
||||
// Transform the points, and compute the position of this vertex.
|
||||
vec2 position;
|
||||
if (computeQuadPosition(position,
|
||||
leftPosition,
|
||||
rightPosition,
|
||||
aQuadPosition,
|
||||
uFramebufferSize,
|
||||
uTransform)) {
|
||||
controlPointPosition = transformVertexPosition(controlPointPosition, uTransform);
|
||||
}
|
||||
|
||||
int pathID = fetchUInt16Data(uBVertexPathID, pointIndices.x, uBVertexPathIDDimensions);
|
||||
float depth = convertPathIndexToDepthValue(pathID);
|
||||
|
||||
gl_Position = vec4(position, depth, 1.0);
|
||||
vEndpoints = vec4(leftPosition, rightPosition);
|
||||
vControlPoint = controlPointPosition;
|
||||
}
|
||||
|
|
@ -13,8 +13,6 @@ void main() {
|
|||
vec2 center = gl_FragCoord.xy;
|
||||
vec2 p0 = vEndpoints.xy, p1 = vEndpoints.zw;
|
||||
|
||||
bool slopeNegative = p0.y > p1.y;
|
||||
|
||||
// Set up Liang-Barsky clipping.
|
||||
vec4 pixelExtents = center.xxyy + vec4(-0.5, 0.5, -0.5, 0.5);
|
||||
vec4 p = (p1 - p0).xxyy, q = pixelExtents - p0.xxyy;
|
||||
|
|
@ -23,44 +21,6 @@ void main() {
|
|||
vec2 t = clamp(q.xy / p.xy, 0.0, 1.0);
|
||||
vec2 spanP0 = p0 + p.yw * t.x, spanP1 = p0 + p.yw * t.y;
|
||||
|
||||
// ...and to the bottom and top.
|
||||
if (p.z != 0.0) {
|
||||
vec2 tVertical = q.zw / p.zw;
|
||||
if (slopeNegative)
|
||||
tVertical.xy = tVertical.yx; // FIXME(pcwalton): Can this be removed?
|
||||
t = vec2(max(t.x, tVertical.x), min(t.y, tVertical.y));
|
||||
}
|
||||
|
||||
// If the line doesn't pass through this pixel, detect that and bail.
|
||||
if (t.x >= t.y) {
|
||||
bool fill = uLowerPart ? spanP0.y < pixelExtents.z : spanP0.y > pixelExtents.w;
|
||||
gl_FragColor = vec4(fill ? spanP1.x - spanP0.x : 0.0);
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate A2.x.
|
||||
float a2x;
|
||||
if (xor(uLowerPart, slopeNegative)) {
|
||||
a2x = spanP0.x;
|
||||
t.xy = t.yx;
|
||||
} else {
|
||||
a2x = spanP1.x;
|
||||
}
|
||||
|
||||
// Calculate A3.y.
|
||||
float a3y = uLowerPart ? pixelExtents.w : pixelExtents.z;
|
||||
|
||||
// Calculate A0-A5.
|
||||
vec2 a0 = p0 + p.yw * t.x;
|
||||
vec2 a1 = p0 + p.yw * t.y;
|
||||
vec2 a2 = vec2(a2x, a1.y);
|
||||
vec2 a3 = vec2(a2x, a3y);
|
||||
vec2 a4 = vec2(a0.x, a3y);
|
||||
|
||||
// Calculate area with the shoelace formula.
|
||||
float area = det2(a0, a1) + det2(a1, a2) + det2(a2, a3) + det2(a3, a4) + det2(a4, a0);
|
||||
area *= slopeNegative ? 0.5 : -0.5;
|
||||
|
||||
// Done!
|
||||
gl_FragColor = vec4(area);
|
||||
// Compute area.
|
||||
gl_FragColor = vec4(computeCoverage(p0, p1, spanP0, spanP1, t, pixelExtents, p, q, uLowerPart));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,25 +28,14 @@ void main() {
|
|||
pointIndices.y,
|
||||
uBVertexPositionDimensions);
|
||||
|
||||
// Transform the points, and compute the position of this vertex.
|
||||
vec2 position;
|
||||
if (abs(leftPosition.x - rightPosition.x) > EPSILON) {
|
||||
leftPosition = transformVertexPosition(leftPosition, uTransform);
|
||||
rightPosition = transformVertexPosition(rightPosition, uTransform);
|
||||
|
||||
vec2 verticalExtents = vec2(min(leftPosition.y, rightPosition.y),
|
||||
max(leftPosition.y, rightPosition.y));
|
||||
|
||||
vec4 roundedExtents = vec4(floor(vec2(leftPosition.x, verticalExtents.x)),
|
||||
ceil(vec2(rightPosition.x, verticalExtents.y)));
|
||||
|
||||
// FIXME(pcwalton): Use a separate VBO for this.
|
||||
vec2 quadPosition = (aQuadPosition + 1.0) * 0.5;
|
||||
|
||||
position = mix(roundedExtents.xy, roundedExtents.zw, quadPosition);
|
||||
position = convertScreenToClipSpace(position, uFramebufferSize);
|
||||
} else {
|
||||
position = vec2(0.0);
|
||||
}
|
||||
computeQuadPosition(position,
|
||||
leftPosition,
|
||||
rightPosition,
|
||||
aQuadPosition,
|
||||
uFramebufferSize,
|
||||
uTransform);
|
||||
|
||||
int pathID = fetchUInt16Data(uBVertexPathID, pointIndices.x, uBVertexPathIDDimensions);
|
||||
float depth = convertPathIndexToDepthValue(pathID);
|
||||
|
|
|
|||
Loading…
Reference in New Issue