Fix blending in the text demo.

As a nice added cleanup, this commit standardizes on the red channel for
all monochrome textures.
This commit is contained in:
Patrick Walton 2017-10-26 20:15:41 -07:00
parent 77fa297380
commit 0506365cc7
8 changed files with 43 additions and 37 deletions

View File

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

View File

@ -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,
this.supersampledFramebuffer);
renderContext.gl.viewport(0, 0, framebufferSize[0], framebufferSize[1]);
renderContext.gl.scissor(0, 0, usedSize[0], usedSize[1]);
renderContext.gl.enable(renderContext.gl.SCISSOR_TEST);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.supersampledFramebuffer);
gl.viewport(0, 0, framebufferSize[0], framebufferSize[1]);
gl.scissor(0, 0, usedSize[0], usedSize[1]);
gl.enable(gl.SCISSOR_TEST);
}
antialias(renderer: Renderer) {}

View File

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

View File

@ -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);
this.renderContext.gl.viewport(0,
0,
this.renderContext.cameraView.width,
this.renderContext.cameraView.height);
this.renderContext.gl.disable(this.renderContext.gl.DEPTH_TEST);
this.renderContext.gl.disable(this.renderContext.gl.SCISSOR_TEST);
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);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, renderContext.cameraView.width, renderContext.cameraView.height);
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.SCISSOR_TEST);
gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ZERO, gl.ONE);
gl.enable(gl.BLEND);
// Clear.
this.renderContext.gl.clearColor(1.0, 1.0, 1.0, 1.0);
this.renderContext.gl.clear(this.renderContext.gl.COLOR_BUFFER_BIT);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Set up the composite VAO.
const blitProgram = this.renderContext.shaderPrograms.blit;

View File

@ -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);
this.renderContext.gl.clearDepth(0.0);
this.renderContext.gl.depthMask(true);
this.renderContext.gl.clear(this.renderContext.gl.COLOR_BUFFER_BIT |
this.renderContext.gl.DEPTH_BUFFER_BIT);
const gl = this.renderContext.gl;
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(0.0);
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
}

View File

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

View File

@ -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
// text demo...
gl_FragColor = vec4(vec3(1.0) - color, any(greaterThan(color, vec3(0.0))) ? 1.0 : 0.0);
gl_FragColor = vec4(color, any(greaterThan(color, vec3(0.0))) ? 1.0 : 0.0);
}

View File

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