Fix blending in the text demo.

As a nice added cleanup, this commit standardizes on the red channel for
all monochrome textures.

demo/client/src/renderer.ts

@@ -59,6 +59,10 @@ export abstract class Renderer {
         return false;
     }
 
+    protected get backgroundColor(): glmatrix.vec4 {
+        return glmatrix.vec4.create();
+    }
+
     protected abstract get depthFunction(): GLenum;
     protected abstract get directCurveProgramName(): keyof ShaderMap<void>;
     protected abstract get directInteriorProgramName(): keyof ShaderMap<void>;
@@ -267,7 +271,8 @@ export abstract class Renderer {
 
         switch (renderingMode) {
         case 'color':
-            gl.clearColor(1.0, 1.0, 1.0, 1.0);
+            const clearColor = this.backgroundColor;
+            gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
             gl.clearDepth(0.0);
             gl.depthMask(true);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -293,9 +298,9 @@ export abstract class Renderer {
     }
 
     /// Called whenever new GPU timing statistics are available.
-    protected newTimingsReceived() {}
+    protected newTimingsReceived(): void {}
 
-    private renderDirect() {
+    private renderDirect(): void {
         const renderingMode = unwrapNull(this.antialiasingStrategy).directRenderingMode;
         const renderContext = this.renderContext;
         const gl = renderContext.gl;

demo/client/src/ssaa-strategy.ts

@@ -81,13 +81,14 @@ export default class SSAAStrategy extends AntialiasingStrategy {
 
     prepare(renderer: Renderer) {
         const renderContext = renderer.renderContext;
+        const gl = renderContext.gl;
+
         const framebufferSize = this.supersampledFramebufferSize;
         const usedSize = this.usedSupersampledFramebufferSize(renderer);
-        renderContext.gl.bindFramebuffer(renderContext.gl.FRAMEBUFFER,
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.supersampledFramebuffer);
-                                         this.supersampledFramebuffer);
+        gl.viewport(0, 0, framebufferSize[0], framebufferSize[1]);
-        renderContext.gl.viewport(0, 0, framebufferSize[0], framebufferSize[1]);
+        gl.scissor(0, 0, usedSize[0], usedSize[1]);
-        renderContext.gl.scissor(0, 0, usedSize[0], usedSize[1]);
+        gl.enable(gl.SCISSOR_TEST);
-        renderContext.gl.enable(renderContext.gl.SCISSOR_TEST);
     }
 
     antialias(renderer: Renderer) {}

demo/client/src/svg-demo.ts

@@ -129,6 +129,10 @@ class SVGDemoRenderer extends Renderer {
         return this.destAllocatedSize;
     }
 
+    protected get backgroundColor(): glmatrix.vec4 {
+        return glmatrix.vec4.clone([1.0, 1.0, 1.0, 1.0]);
+    }
+
     constructor(renderContext: SVGDemoView) {
         super(renderContext);
 

demo/client/src/text-demo.ts

@@ -407,24 +407,21 @@ class TextDemoRenderer extends TextRenderer {
     }
 
     protected compositeIfNecessary(): void {
+        const renderContext = this.renderContext;
+        const gl = renderContext.gl;
+
         // Set up composite state.
-        this.renderContext.gl.bindFramebuffer(this.renderContext.gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        this.renderContext.gl.viewport(0,
+        gl.viewport(0, 0, renderContext.cameraView.width, renderContext.cameraView.height);
-                                       0,
+        gl.disable(gl.DEPTH_TEST);
-                                       this.renderContext.cameraView.width,
+        gl.disable(gl.SCISSOR_TEST);
-                                       this.renderContext.cameraView.height);
+        gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
-        this.renderContext.gl.disable(this.renderContext.gl.DEPTH_TEST);
+        gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ZERO, gl.ONE);
-        this.renderContext.gl.disable(this.renderContext.gl.SCISSOR_TEST);
+        gl.enable(gl.BLEND);
-        this.renderContext.gl.blendEquation(this.renderContext.gl.FUNC_ADD);
-        this.renderContext.gl.blendFuncSeparate(this.renderContext.gl.SRC_ALPHA,
-                                                this.renderContext.gl.ONE_MINUS_SRC_ALPHA,
-                                                this.renderContext.gl.ONE,
-                                                this.renderContext.gl.ONE);
-        this.renderContext.gl.enable(this.renderContext.gl.BLEND);
 
         // Clear.
-        this.renderContext.gl.clearColor(1.0, 1.0, 1.0, 1.0);
+        gl.clearColor(1.0, 1.0, 1.0, 1.0);
-        this.renderContext.gl.clear(this.renderContext.gl.COLOR_BUFFER_BIT);
+        gl.clear(gl.COLOR_BUFFER_BIT);
 
         // Set up the composite VAO.
         const blitProgram = this.renderContext.shaderPrograms.blit;

demo/client/src/text-renderer.ts

@@ -79,11 +79,11 @@ export abstract class TextRenderer extends Renderer {
     }
 
     get bgColor(): glmatrix.vec4 {
-        return glmatrix.vec4.fromValues(1.0, 1.0, 1.0, 0.0);
+        return glmatrix.vec4.clone([0.0, 0.0, 0.0, 1.0]);
     }
 
     get fgColor(): glmatrix.vec4 {
-        return glmatrix.vec4.fromValues(0.0, 0.0, 0.0, 1.0);
+        return glmatrix.vec4.clone([1.0, 1.0, 1.0, 1.0]);
     }
 
     protected get layoutPixelsPerUnit(): number {
@@ -200,11 +200,12 @@ export abstract class TextRenderer extends Renderer {
     }
 
     protected clearForDirectRendering(): void {
-        this.renderContext.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        const gl = this.renderContext.gl;
-        this.renderContext.gl.clearDepth(0.0);
+
-        this.renderContext.gl.depthMask(true);
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);
-        this.renderContext.gl.clear(this.renderContext.gl.COLOR_BUFFER_BIT |
+        gl.clearDepth(0.0);
-                                    this.renderContext.gl.DEPTH_BUFFER_BIT);
+        gl.depthMask(true);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     }
 
     protected buildAtlasGlyphs(atlasGlyphs: AtlasGlyph[]): void {
@@ -235,7 +236,7 @@ export abstract class TextRenderer extends Renderer {
 
         for (let pathIndex = 0; pathIndex < pathCount; pathIndex++) {
             for (let channel = 0; channel < 3; channel++)
-                pathColors[(pathIndex + 1) * 4 + channel] = 0x00; // RGB
+                pathColors[(pathIndex + 1) * 4 + channel] = 0xff; // RGB
             pathColors[(pathIndex + 1) * 4 + 3] = 0xff;           // alpha
         }
 

shaders/gles2/demo-3d-distant-glyph.fs.glsl

@@ -16,5 +16,5 @@ uniform sampler2D uAtlas;
 varying vec2 vTexCoord;
 
 void main() {
-    gl_FragColor = uColor * texture2D(uAtlas, vTexCoord).aaaa;
+    gl_FragColor = uColor * texture2D(uAtlas, vTexCoord).rrrr;
 }

shaders/gles2/ssaa-subpixel-resolve.fs.glsl

@@ -16,7 +16,7 @@ uniform ivec2 uSourceDimensions;
 varying vec2 vTexCoord;
 
 float sampleSource(float deltaX) {
-    return texture2D(uSource, vec2(vTexCoord.s + deltaX, vTexCoord.y)).a;
+    return texture2D(uSource, vec2(vTexCoord.s + deltaX, vTexCoord.y)).r;
 }
 
 void main() {
@@ -34,7 +34,5 @@ void main() {
                       lcdFilter(shadeL.y, shadeL.x, shade0,   shadeR.x, shadeR.y),
                       lcdFilter(shadeL.x, shade0,   shadeR.x, shadeR.y, shadeR.z));
 
-    // FIXME(pcwalton): This can be wrong in some cases. Need subpixel-aware compositing in the
+    gl_FragColor = vec4(color, any(greaterThan(color, vec3(0.0))) ? 1.0 : 0.0);
-    // text demo...
-    gl_FragColor = vec4(vec3(1.0) - color, any(greaterThan(color, vec3(0.0))) ? 1.0 : 0.0);
 }

shaders/gles2/xcaa-mono-resolve.fs.glsl

@@ -18,5 +18,5 @@ varying vec2 vTexCoord;
 
 void main() {
     float alpha = clamp(texture2D(uAAAlpha, vTexCoord).r, 0.0, 1.0);
-    gl_FragColor = vec4(uFGColor.rgb, uFGColor.a * alpha);
+    gl_FragColor = mix(uBGColor, uFGColor, alpha);
 }