Use the monochrome MCAA mode for the Material Design icons SVG demo.
This avoids ugly pixel snapping.
This commit is contained in:
parent
2c2afe2fc0
commit
c5187deedd
|
@ -95,6 +95,7 @@ export class SVGLoader {
|
||||||
scale: number;
|
scale: number;
|
||||||
pathBounds: glmatrix.vec4[];
|
pathBounds: glmatrix.vec4[];
|
||||||
svgBounds: glmatrix.vec4;
|
svgBounds: glmatrix.vec4;
|
||||||
|
isMonochrome: boolean;
|
||||||
|
|
||||||
private svg: SVGSVGElement;
|
private svg: SVGSVGElement;
|
||||||
private fileData: ArrayBuffer;
|
private fileData: ArrayBuffer;
|
||||||
|
@ -108,6 +109,7 @@ export class SVGLoader {
|
||||||
this.pathBounds = [];
|
this.pathBounds = [];
|
||||||
this.svgBounds = glmatrix.vec4.create();
|
this.svgBounds = glmatrix.vec4.create();
|
||||||
this.svg = unwrapNull(document.getElementById('pf-svg')) as Element as SVGSVGElement;
|
this.svg = unwrapNull(document.getElementById('pf-svg')) as Element as SVGSVGElement;
|
||||||
|
this.isMonochrome = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
loadFile(fileData: ArrayBuffer) {
|
loadFile(fileData: ArrayBuffer) {
|
||||||
|
@ -201,6 +203,10 @@ export class SVGLoader {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.isMonochrome = this.pathInstances.every(pathInstance => {
|
||||||
|
return glmatrix.vec4.equals(pathInstance.color, this.pathInstances[0].color);
|
||||||
|
});
|
||||||
|
|
||||||
this.svgBounds = glmatrix.vec4.clone([
|
this.svgBounds = glmatrix.vec4.clone([
|
||||||
svgBottomLeft[0], svgBottomLeft[1],
|
svgBottomLeft[0], svgBottomLeft[1],
|
||||||
svgTopRight[0], svgTopRight[1],
|
svgTopRight[0], svgTopRight[1],
|
||||||
|
|
|
@ -41,8 +41,7 @@ export abstract class SVGRenderer extends Renderer {
|
||||||
camera: OrthographicCamera;
|
camera: OrthographicCamera;
|
||||||
|
|
||||||
get isMulticolor(): boolean {
|
get isMulticolor(): boolean {
|
||||||
// FIXME(pcwalton): Only if the SVG is actually multicolor!
|
return !this.loader.isMonochrome;
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get bgColor(): glmatrix.vec4 {
|
get bgColor(): glmatrix.vec4 {
|
||||||
|
|
|
@ -55,6 +55,8 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
|
||||||
protected aaDepthTexture: WebGLTexture | null;
|
protected aaDepthTexture: WebGLTexture | null;
|
||||||
protected aaFramebuffer: WebGLFramebuffer | null;
|
protected aaFramebuffer: WebGLFramebuffer | null;
|
||||||
|
|
||||||
|
protected abstract get mightUseAAFramebuffer(): boolean;
|
||||||
|
|
||||||
constructor(level: number, subpixelAA: SubpixelAAType) {
|
constructor(level: number, subpixelAA: SubpixelAAType) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
@ -132,6 +134,9 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
|
||||||
const renderContext = renderer.renderContext;
|
const renderContext = renderer.renderContext;
|
||||||
const gl = renderContext.gl;
|
const gl = renderContext.gl;
|
||||||
|
|
||||||
|
if (!this.usesAAFramebuffer(renderer))
|
||||||
|
return;
|
||||||
|
|
||||||
const resolveProgram = this.getResolveProgram(renderer);
|
const resolveProgram = this.getResolveProgram(renderer);
|
||||||
if (resolveProgram == null)
|
if (resolveProgram == null)
|
||||||
return;
|
return;
|
||||||
|
@ -187,6 +192,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
|
||||||
|
|
||||||
// Set state for antialiasing.
|
// Set state for antialiasing.
|
||||||
const usedSize = this.supersampledUsedSize(renderer);
|
const usedSize = this.supersampledUsedSize(renderer);
|
||||||
|
if (this.usesAAFramebuffer(renderer))
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
|
||||||
gl.viewport(0,
|
gl.viewport(0,
|
||||||
0,
|
0,
|
||||||
|
@ -201,6 +207,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
|
||||||
const gl = renderContext.gl;
|
const gl = renderContext.gl;
|
||||||
|
|
||||||
const usedSize = this.supersampledUsedSize(renderer);
|
const usedSize = this.supersampledUsedSize(renderer);
|
||||||
|
if (this.usesAAFramebuffer(renderer))
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
|
||||||
gl.viewport(0,
|
gl.viewport(0,
|
||||||
0,
|
0,
|
||||||
|
@ -256,7 +263,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
|
||||||
}
|
}
|
||||||
|
|
||||||
private initAAAlphaFramebuffer(renderer: Renderer): void {
|
private initAAAlphaFramebuffer(renderer: Renderer): void {
|
||||||
if (!this.usesAAFramebuffer(renderer)) {
|
if (!this.mightUseAAFramebuffer) {
|
||||||
this.aaAlphaTexture = null;
|
this.aaAlphaTexture = null;
|
||||||
this.aaDepthTexture = null;
|
this.aaDepthTexture = null;
|
||||||
this.aaFramebuffer = null;
|
this.aaFramebuffer = null;
|
||||||
|
@ -333,6 +340,10 @@ export class MCAAStrategy extends XCAAStrategy {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected get mightUseAAFramebuffer(): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
attachMeshes(renderer: Renderer): void {
|
attachMeshes(renderer: Renderer): void {
|
||||||
super.attachMeshes(renderer);
|
super.attachMeshes(renderer);
|
||||||
|
|
||||||
|
@ -385,7 +396,7 @@ export class MCAAStrategy extends XCAAStrategy {
|
||||||
const gl = renderContext.gl;
|
const gl = renderContext.gl;
|
||||||
|
|
||||||
if (!renderer.isMulticolor) {
|
if (!renderer.isMulticolor) {
|
||||||
gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
gl.clearColor(1.0, 1.0, 0.0, 1.0);
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -528,7 +539,7 @@ export class MCAAStrategy extends XCAAStrategy {
|
||||||
|
|
||||||
renderer.setPathColorsUniform(0, uniforms, 3);
|
renderer.setPathColorsUniform(0, uniforms, 3);
|
||||||
|
|
||||||
gl.uniform1i(uniforms.uSnapToPixelGrid, renderer.isMulticolor ? 1 : 0);
|
gl.uniform1i(uniforms.uMulticolor, renderer.isMulticolor ? 1 : 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -541,6 +552,10 @@ export class ECAAStrategy extends XCAAStrategy {
|
||||||
return ['ecaaCurve', 'ecaaTransformedCurve'];
|
return ['ecaaCurve', 'ecaaTransformedCurve'];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected get mightUseAAFramebuffer(): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
private lineVAOs: Partial<ShaderMap<WebGLVertexArrayObject>>;
|
private lineVAOs: Partial<ShaderMap<WebGLVertexArrayObject>>;
|
||||||
private curveVAOs: Partial<ShaderMap<WebGLVertexArrayObject>>;
|
private curveVAOs: Partial<ShaderMap<WebGLVertexArrayObject>>;
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 358 KiB After Width: | Height: | Size: 376 KiB |
|
@ -25,6 +25,8 @@
|
||||||
|
|
||||||
precision highp float;
|
precision highp float;
|
||||||
|
|
||||||
|
uniform bool uMulticolor;
|
||||||
|
|
||||||
varying vec4 vUpperEndpoints;
|
varying vec4 vUpperEndpoints;
|
||||||
varying vec4 vLowerEndpoints;
|
varying vec4 vLowerEndpoints;
|
||||||
varying vec4 vControlPoints;
|
varying vec4 vControlPoints;
|
||||||
|
@ -69,5 +71,6 @@ void main() {
|
||||||
1.0);
|
1.0);
|
||||||
|
|
||||||
// Compute area.
|
// Compute area.
|
||||||
gl_FragColor = alpha * vColor;
|
vec4 color = uMulticolor ? vColor : vec4(1.0);
|
||||||
|
gl_FragColor = alpha * color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,10 +20,10 @@
|
||||||
//!
|
//!
|
||||||
//! * When paths of multiple colors are present, use
|
//! * When paths of multiple colors are present, use
|
||||||
//! `glBlendFuncSeparate(GL_ONE, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE)` and
|
//! `glBlendFuncSeparate(GL_ONE, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE)` and
|
||||||
//! set `uSnapToPixelGrid` to 1.
|
//! set `uMulticolor` to 1.
|
||||||
//!
|
//!
|
||||||
//! * Otherwise, if only one color of path is present, use
|
//! * Otherwise, if only one color of path is present, use
|
||||||
//! `glBlendFunc(GL_ONE, GL_ONE)` and set `uSnapToPixelGrid` to 0.
|
//! `glBlendFunc(GL_ONE, GL_ONE)` and set `uMulticolor` to 0.
|
||||||
//!
|
//!
|
||||||
//! Use this shader only when your transform is only a scale and/or
|
//! Use this shader only when your transform is only a scale and/or
|
||||||
//! translation, not a perspective, rotation, or skew. (Otherwise, consider
|
//! translation, not a perspective, rotation, or skew. (Otherwise, consider
|
||||||
|
@ -41,7 +41,7 @@ uniform ivec2 uPathTransformSTDimensions;
|
||||||
uniform sampler2D uPathTransformST;
|
uniform sampler2D uPathTransformST;
|
||||||
uniform ivec2 uPathColorsDimensions;
|
uniform ivec2 uPathColorsDimensions;
|
||||||
uniform sampler2D uPathColors;
|
uniform sampler2D uPathColors;
|
||||||
uniform bool uSnapToPixelGrid;
|
uniform bool uMulticolor;
|
||||||
|
|
||||||
attribute vec2 aQuadPosition;
|
attribute vec2 aQuadPosition;
|
||||||
attribute vec4 aUpperEndpointPositions;
|
attribute vec4 aUpperEndpointPositions;
|
||||||
|
@ -84,14 +84,14 @@ void main() {
|
||||||
uTransformST,
|
uTransformST,
|
||||||
uFramebufferSize,
|
uFramebufferSize,
|
||||||
topSlope,
|
topSlope,
|
||||||
uSnapToPixelGrid);
|
uMulticolor);
|
||||||
trPosition = computeMCAASnappedPosition(trPosition,
|
trPosition = computeMCAASnappedPosition(trPosition,
|
||||||
uHints,
|
uHints,
|
||||||
transformST,
|
transformST,
|
||||||
uTransformST,
|
uTransformST,
|
||||||
uFramebufferSize,
|
uFramebufferSize,
|
||||||
topSlope,
|
topSlope,
|
||||||
uSnapToPixelGrid);
|
uMulticolor);
|
||||||
tcPosition = computeMCAAPosition(tcPosition,
|
tcPosition = computeMCAAPosition(tcPosition,
|
||||||
uHints,
|
uHints,
|
||||||
transformST,
|
transformST,
|
||||||
|
@ -103,14 +103,14 @@ void main() {
|
||||||
uTransformST,
|
uTransformST,
|
||||||
uFramebufferSize,
|
uFramebufferSize,
|
||||||
bottomSlope,
|
bottomSlope,
|
||||||
uSnapToPixelGrid);
|
uMulticolor);
|
||||||
brPosition = computeMCAASnappedPosition(brPosition,
|
brPosition = computeMCAASnappedPosition(brPosition,
|
||||||
uHints,
|
uHints,
|
||||||
transformST,
|
transformST,
|
||||||
uTransformST,
|
uTransformST,
|
||||||
uFramebufferSize,
|
uFramebufferSize,
|
||||||
bottomSlope,
|
bottomSlope,
|
||||||
uSnapToPixelGrid);
|
uMulticolor);
|
||||||
bcPosition = computeMCAAPosition(bcPosition,
|
bcPosition = computeMCAAPosition(bcPosition,
|
||||||
uHints,
|
uHints,
|
||||||
transformST,
|
transformST,
|
||||||
|
@ -123,7 +123,7 @@ void main() {
|
||||||
// can occasionally cause inconsistent rounding, resulting in cracks.
|
// can occasionally cause inconsistent rounding, resulting in cracks.
|
||||||
vec2 position;
|
vec2 position;
|
||||||
|
|
||||||
if (uSnapToPixelGrid)
|
if (uMulticolor)
|
||||||
position.x = quadPosition.x < 0.5 ? tlPosition.x : trPosition.x;
|
position.x = quadPosition.x < 0.5 ? tlPosition.x : trPosition.x;
|
||||||
else
|
else
|
||||||
position.x = quadPosition.x < 0.5 ? floor(tlPosition.x) : ceil(trPosition.x);
|
position.x = quadPosition.x < 0.5 ? floor(tlPosition.x) : ceil(trPosition.x);
|
||||||
|
|
Loading…
Reference in New Issue