Load the gamma LUT in the demo

This commit is contained in:
Patrick Walton 2017-11-07 14:13:13 -08:00
parent 0a5f4c65df
commit 82fd214a76
8 changed files with 55 additions and 9 deletions

View File

@ -157,6 +157,7 @@ class ThreeDController extends DemoAppController<ThreeDView> {
protected createView(): ThreeDView {
return new ThreeDView(this,
unwrapNull(this.gammaLUT),
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
@ -339,9 +340,10 @@ class ThreeDView extends DemoView implements TextRenderContext {
}
constructor(appController: ThreeDController,
gammaLUT: HTMLImageElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
super(commonShaderSource, shaderSources);
super(gammaLUT, commonShaderSource, shaderSources);
this.cameraView = new ThreeDAtlasCameraView;

View File

@ -14,6 +14,8 @@ import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
import {expectNotNull, unwrapNull, unwrapUndef} from './utils';
import {DemoView, Timings, TIMINGS} from "./view";
const GAMMA_LUT_URI: string = "/textures/gamma-lut.png";
export abstract class AppController {
protected canvas: HTMLCanvasElement;
@ -54,6 +56,7 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
protected commonShaderSource: string | null;
protected shaderSources: ShaderMap<ShaderProgramSource> | null;
protected gammaLUT: HTMLImageElement;
private aaLevelSelect: HTMLSelectElement | null;
private subpixelAARadioButton: HTMLInputElement | null;
@ -147,9 +150,13 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
const shaderLoader = new ShaderLoader;
shaderLoader.load();
this.view = Promise.all([shaderLoader.common, shaderLoader.shaders]).then(allShaders => {
this.commonShaderSource = allShaders[0];
this.shaderSources = allShaders[1];
const gammaLUTPromise = this.loadGammaLUT();
const promises: any[] = [gammaLUTPromise, shaderLoader.common, shaderLoader.shaders];
this.view = Promise.all(promises).then(assets => {
this.gammaLUT = assets[0];
this.commonShaderSource = assets[1];
this.shaderSources = assets[2];
return this.createView();
});
@ -213,6 +220,16 @@ export abstract class DemoAppController<View extends DemoView> extends AppContro
protected abstract createView(): View;
private loadGammaLUT(): Promise<HTMLImageElement> {
return window.fetch(GAMMA_LUT_URI)
.then(response => response.blob())
.then(blob => {
const imgElement = document.createElement('img');
imgElement.src = URL.createObjectURL(blob);
return imgElement;
});
}
private updateAALevel() {
let aaType: AntialiasingStrategyName, aaLevel: number;
if (this.aaLevelSelect != null) {

View File

@ -135,6 +135,7 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
protected createView(): BenchmarkTestView {
return new BenchmarkTestView(this,
unwrapNull(this.gammaLUT),
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
@ -252,9 +253,10 @@ class BenchmarkTestView extends DemoView {
}
constructor(appController: BenchmarkAppController,
gammaLUT: HTMLImageElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
super(commonShaderSource, shaderSources);
super(gammaLUT, commonShaderSource, shaderSources);
this.appController = appController;
this.renderer = new BenchmarkRenderer(this);

View File

@ -77,6 +77,8 @@ export abstract class Renderer {
private implicitCoverInteriorVAO: WebGLVertexArrayObjectOES | null;
private implicitCoverCurveVAO: WebGLVertexArrayObjectOES | null;
private gammaLUTTexture: WebGLTexture | null;
private instancedPathIDVBO: WebGLBuffer | null;
private timerQueryPollInterval: number | null;
@ -91,6 +93,8 @@ export abstract class Renderer {
if (this.pathIDsAreInstanced)
this.initInstancedPathIDVBO();
this.initGammaLUTTexture();
this.antialiasingStrategy = new NoAAStrategy(0, 'none');
this.antialiasingStrategy.init(this);
}
@ -503,6 +507,16 @@ export abstract class Renderer {
}, TIME_INTERVAL_DELAY);
}
private initGammaLUTTexture(): void {
const renderContext = this.renderContext;
const gl = renderContext.gl;
const gammaLUT = renderContext.gammaLUT;
const texture = unwrapNull(gl.createTexture());
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, gl.LUMINANCE, gl.UNSIGNED_BYTE, gammaLUT);
}
private initImplicitCoverCurveVAO(objectIndex: number, instanceRange: Range): void {
const renderContext = this.renderContext;
const gl = renderContext.gl;

View File

@ -167,7 +167,7 @@ export class ShaderLoader {
common: Promise<string>;
shaders: Promise<ShaderMap<ShaderProgramSource>>;
load() {
load(): void {
this.common = window.fetch(COMMON_SHADER_URL).then(response => response.text());
const shaderKeys = Object.keys(SHADER_URLS) as Array<keyof ShaderMap<string>>;

View File

@ -70,6 +70,7 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
protected createView() {
return new SVGDemoView(this,
unwrapNull(this.gammaLUT),
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
@ -95,9 +96,10 @@ class SVGDemoView extends DemoView {
}
constructor(appController: SVGDemoController,
gammaLUT: HTMLImageElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
super(commonShaderSource, shaderSources);
super(gammaLUT, commonShaderSource, shaderSources);
this.appController = appController;
this.renderer = new SVGDemoRenderer(this);

View File

@ -167,6 +167,7 @@ class TextDemoController extends DemoAppController<TextDemoView> {
protected createView() {
return new TextDemoView(this,
unwrapNull(this.gammaLUT),
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
@ -304,9 +305,10 @@ class TextDemoView extends DemoView implements TextRenderContext {
}
constructor(appController: TextDemoController,
gammaLUT: HTMLImageElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
super(commonShaderSource, shaderSources);
super(gammaLUT, commonShaderSource, shaderSources);
this.appController = appController;
this.renderer = new TextDemoRenderer(this);

View File

@ -135,6 +135,7 @@ export abstract class DemoView extends PathfinderView implements RenderContext {
gl: WebGLRenderingContext;
shaderPrograms: ShaderMap<PathfinderShaderProgram>;
gammaLUT: HTMLImageElement;
instancedArraysExt: ANGLEInstancedArrays;
textureHalfFloatExt: OESTextureHalfFloat;
@ -162,10 +163,13 @@ export abstract class DemoView extends PathfinderView implements RenderContext {
protected sRGBExt: EXTsRGB;
protected colorBufferHalfFloatExt: any;
private wantsScreenshot: boolean;
/// NB: All subclasses are responsible for creating a renderer in their constructors.
constructor(commonShaderSource: string, shaderSources: ShaderMap<ShaderProgramSource>) {
constructor(gammaLUT: HTMLImageElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
super();
this.initContext();
@ -173,6 +177,8 @@ export abstract class DemoView extends PathfinderView implements RenderContext {
const shaderSource = this.compileShaders(commonShaderSource, shaderSources);
this.shaderPrograms = this.linkShaders(shaderSource);
this.gammaLUT = gammaLUT;
this.wantsScreenshot = false;
}
@ -330,6 +336,7 @@ export interface RenderContext {
readonly colorAlphaFormat: GLenum;
readonly shaderPrograms: ShaderMap<PathfinderShaderProgram>;
readonly gammaLUT: HTMLImageElement;
readonly quadPositionsBuffer: WebGLBuffer;
readonly quadElementsBuffer: WebGLBuffer;