From c5187deeddf42e296988f08b6d50679f8145382d Mon Sep 17 00:00:00 2001 From: Patrick Walton Date: Wed, 3 Jan 2018 20:53:25 -0800 Subject: [PATCH] Use the monochrome MCAA mode for the Material Design icons SVG demo. This avoids ugly pixel snapping. --- demo/client/src/svg-loader.ts | 6 + demo/client/src/svg-renderer.ts | 3 +- demo/client/src/xcaa-strategy.ts | 25 +- resources/svg/material_design_icons.svg | 2863 ++++++++++++++++++++++- shaders/gles2/mcaa.fs.glsl | 5 +- shaders/gles2/mcaa.vs.glsl | 16 +- 6 files changed, 2901 insertions(+), 17 deletions(-) diff --git a/demo/client/src/svg-loader.ts b/demo/client/src/svg-loader.ts index c3a333f2..4c0e7dc8 100644 --- a/demo/client/src/svg-loader.ts +++ b/demo/client/src/svg-loader.ts @@ -95,6 +95,7 @@ export class SVGLoader { scale: number; pathBounds: glmatrix.vec4[]; svgBounds: glmatrix.vec4; + isMonochrome: boolean; private svg: SVGSVGElement; private fileData: ArrayBuffer; @@ -108,6 +109,7 @@ export class SVGLoader { this.pathBounds = []; this.svgBounds = glmatrix.vec4.create(); this.svg = unwrapNull(document.getElementById('pf-svg')) as Element as SVGSVGElement; + this.isMonochrome = false; } 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([ svgBottomLeft[0], svgBottomLeft[1], svgTopRight[0], svgTopRight[1], diff --git a/demo/client/src/svg-renderer.ts b/demo/client/src/svg-renderer.ts index 7f3ff42c..8922c808 100644 --- a/demo/client/src/svg-renderer.ts +++ b/demo/client/src/svg-renderer.ts @@ -41,8 +41,7 @@ export abstract class SVGRenderer extends Renderer { camera: OrthographicCamera; get isMulticolor(): boolean { - // FIXME(pcwalton): Only if the SVG is actually multicolor! - return true; + return !this.loader.isMonochrome; } get bgColor(): glmatrix.vec4 { diff --git a/demo/client/src/xcaa-strategy.ts b/demo/client/src/xcaa-strategy.ts index 2ccaac44..23c54f31 100644 --- a/demo/client/src/xcaa-strategy.ts +++ b/demo/client/src/xcaa-strategy.ts @@ -55,6 +55,8 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { protected aaDepthTexture: WebGLTexture | null; protected aaFramebuffer: WebGLFramebuffer | null; + protected abstract get mightUseAAFramebuffer(): boolean; + constructor(level: number, subpixelAA: SubpixelAAType) { super(); @@ -132,6 +134,9 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { const renderContext = renderer.renderContext; const gl = renderContext.gl; + if (!this.usesAAFramebuffer(renderer)) + return; + const resolveProgram = this.getResolveProgram(renderer); if (resolveProgram == null) return; @@ -187,7 +192,8 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { // Set state for antialiasing. const usedSize = this.supersampledUsedSize(renderer); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer); + if (this.usesAAFramebuffer(renderer)) + gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer); gl.viewport(0, 0, this.supersampledFramebufferSize[0], @@ -201,7 +207,8 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { const gl = renderContext.gl; const usedSize = this.supersampledUsedSize(renderer); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer); + if (this.usesAAFramebuffer(renderer)) + gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer); gl.viewport(0, 0, this.supersampledFramebufferSize[0], @@ -256,7 +263,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { } private initAAAlphaFramebuffer(renderer: Renderer): void { - if (!this.usesAAFramebuffer(renderer)) { + if (!this.mightUseAAFramebuffer) { this.aaAlphaTexture = null; this.aaDepthTexture = null; this.aaFramebuffer = null; @@ -333,6 +340,10 @@ export class MCAAStrategy extends XCAAStrategy { return true; } + protected get mightUseAAFramebuffer(): boolean { + return true; + } + attachMeshes(renderer: Renderer): void { super.attachMeshes(renderer); @@ -385,7 +396,7 @@ export class MCAAStrategy extends XCAAStrategy { const gl = renderContext.gl; 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); } } @@ -528,7 +539,7 @@ export class MCAAStrategy extends XCAAStrategy { 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']; } + protected get mightUseAAFramebuffer(): boolean { + return true; + } + private lineVAOs: Partial>; private curveVAOs: Partial>; diff --git a/resources/svg/material_design_icons.svg b/resources/svg/material_design_icons.svg index a96a4cf6..e9d98180 100644 --- a/resources/svg/material_design_icons.svg +++ b/resources/svg/material_design_icons.svg @@ -1 +1,2862 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/shaders/gles2/mcaa.fs.glsl b/shaders/gles2/mcaa.fs.glsl index 1fc9fd85..c2c4eded 100644 --- a/shaders/gles2/mcaa.fs.glsl +++ b/shaders/gles2/mcaa.fs.glsl @@ -25,6 +25,8 @@ precision highp float; +uniform bool uMulticolor; + varying vec4 vUpperEndpoints; varying vec4 vLowerEndpoints; varying vec4 vControlPoints; @@ -69,5 +71,6 @@ void main() { 1.0); // Compute area. - gl_FragColor = alpha * vColor; + vec4 color = uMulticolor ? vColor : vec4(1.0); + gl_FragColor = alpha * color; } diff --git a/shaders/gles2/mcaa.vs.glsl b/shaders/gles2/mcaa.vs.glsl index ff5cbfee..8b2ead99 100644 --- a/shaders/gles2/mcaa.vs.glsl +++ b/shaders/gles2/mcaa.vs.glsl @@ -20,10 +20,10 @@ //! //! * When paths of multiple colors are present, use //! `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 -//! `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 //! translation, not a perspective, rotation, or skew. (Otherwise, consider @@ -41,7 +41,7 @@ uniform ivec2 uPathTransformSTDimensions; uniform sampler2D uPathTransformST; uniform ivec2 uPathColorsDimensions; uniform sampler2D uPathColors; -uniform bool uSnapToPixelGrid; +uniform bool uMulticolor; attribute vec2 aQuadPosition; attribute vec4 aUpperEndpointPositions; @@ -84,14 +84,14 @@ void main() { uTransformST, uFramebufferSize, topSlope, - uSnapToPixelGrid); + uMulticolor); trPosition = computeMCAASnappedPosition(trPosition, uHints, transformST, uTransformST, uFramebufferSize, topSlope, - uSnapToPixelGrid); + uMulticolor); tcPosition = computeMCAAPosition(tcPosition, uHints, transformST, @@ -103,14 +103,14 @@ void main() { uTransformST, uFramebufferSize, bottomSlope, - uSnapToPixelGrid); + uMulticolor); brPosition = computeMCAASnappedPosition(brPosition, uHints, transformST, uTransformST, uFramebufferSize, bottomSlope, - uSnapToPixelGrid); + uMulticolor); bcPosition = computeMCAAPosition(bcPosition, uHints, transformST, @@ -123,7 +123,7 @@ void main() { // can occasionally cause inconsistent rounding, resulting in cracks. vec2 position; - if (uSnapToPixelGrid) + if (uMulticolor) position.x = quadPosition.x < 0.5 ? tlPosition.x : trPosition.x; else position.x = quadPosition.x < 0.5 ? floor(tlPosition.x) : ceil(trPosition.x);