Use the monochrome MCAA mode for the Material Design icons SVG demo.

This avoids ugly pixel snapping.

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],

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 {

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,6 +192,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
 
         // Set state for antialiasing.
         const usedSize = this.supersampledUsedSize(renderer);
+        if (this.usesAAFramebuffer(renderer))
             gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
         gl.viewport(0,
                     0,
@@ -201,6 +207,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy {
         const gl = renderContext.gl;
 
         const usedSize = this.supersampledUsedSize(renderer);
+        if (this.usesAAFramebuffer(renderer))
             gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer);
         gl.viewport(0,
                     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<ShaderMap<WebGLVertexArrayObject>>;
     private curveVAOs: Partial<ShaderMap<WebGLVertexArrayObject>>;
 

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;
 }

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);