Get SSAA working for the tiger

demo/client/html/svg.html

@@ -37,7 +37,7 @@
         <div class="pf-bottom-control" id="pf-rendering-options-group">
             <select class="custom-select" id="pf-aa-level-select">
                 <option data-pf-type="none" data-pf-level="0" selected>No AA</option>
-                <option data-pf-type="ecaa" data-pf-level="0">ECAA</option>
+                <option data-pf-type="ecaa" data-pf-level="0">ECAA (BROKEN)</option>
                 <option data-pf-type="ssaa" data-pf-level="2">2&times;SSAA</option>
                 <option data-pf-type="ssaa" data-pf-level="4">4&times;SSAA</option>
             </select>

demo/client/src/app-controller.ts

@@ -8,10 +8,12 @@
 // option. This file may not be copied, modified, or distributed
 // except according to those terms.
 
+import {AntialiasingStrategyName} from "./aa-strategy";
 import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
-import {expectNotNull} from './utils';
+import {expectNotNull, unwrapUndef} from './utils';
+import {PathfinderView} from "./view";
 
-export default abstract class AppController<View> {
+export default abstract class AppController<View extends PathfinderView> {
     constructor() {}
 
     start() {
@@ -23,6 +25,18 @@ export default abstract class AppController<View> {
         this.view = Promise.all([shaderLoader.common, shaderLoader.shaders]).then(allShaders => {
             return this.createView(canvas, allShaders[0], allShaders[1]);
         });
+
+        this.aaLevelSelect = document.getElementById('pf-aa-level-select') as HTMLSelectElement;
+        this.aaLevelSelect.addEventListener('change', () => this.updateAALevel(), false);
+        this.updateAALevel();
+    }
+
+    private updateAALevel() {
+        const selectedOption = this.aaLevelSelect.selectedOptions[0];
+        const aaType = unwrapUndef(selectedOption.dataset.pfType) as
+            AntialiasingStrategyName;
+        const aaLevel = parseInt(unwrapUndef(selectedOption.dataset.pfLevel));
+        this.view.then(view => view.setAntialiasingOptions(aaType, aaLevel));
     }
 
     protected loadFile() {
@@ -48,4 +62,5 @@ export default abstract class AppController<View> {
 
     protected canvas: HTMLCanvasElement;
     protected loadFileButton: HTMLInputElement;
+    private aaLevelSelect: HTMLSelectElement;
 }

demo/client/src/text.ts

@@ -100,18 +100,6 @@ opentype.Font.prototype.isSupported = function() {
     return (this as any).supported;
 }
 
-// Various utility functions
-
-function expectNotUndef<T>(value: T | undefined, message: string): T {
-    if (value === undefined)
-        throw new PathfinderError(message);
-    return value;
-}
-
-function unwrapUndef<T>(value: T | undefined): T {
-    return expectNotUndef(value, "Unexpected `undefined`!");
-}
-
 /// The separating axis theorem.
 function rectsIntersect(a: glmatrix.vec4, b: glmatrix.vec4): boolean {
     return a[2] > b[0] && a[3] > b[1] && a[0] < b[2] && a[1] < b[3];
@@ -132,10 +120,6 @@ class TextDemoController extends AppController<TextDemoView> {
 
         this.loadFileButton = document.getElementById('pf-load-font-button') as HTMLInputElement;
         this.loadFileButton.addEventListener('change', () => this.loadFile(), false);
-
-        this.aaLevelSelect = document.getElementById('pf-aa-level-select') as HTMLSelectElement;
-        this.aaLevelSelect.addEventListener('change', () => this.updateAALevel(), false);
-        this.updateAALevel();
     }
 
     protected createView(canvas: HTMLCanvasElement,
@@ -144,14 +128,6 @@ class TextDemoController extends AppController<TextDemoView> {
         return new TextDemoView(this, canvas, commonShaderSource, shaderSources);
     }
 
-    private updateAALevel() {
-        const selectedOption = this.aaLevelSelect.selectedOptions[0];
-        const aaType = unwrapUndef(selectedOption.dataset.pfType) as
-            keyof AntialiasingStrategyTable;
-        const aaLevel = parseInt(unwrapUndef(selectedOption.dataset.pfLevel));
-        this.view.then(view => view.setAntialiasingOptions(aaType, aaLevel));
-    }
-
     protected fileLoaded() {
         this.font = opentype.parse(this.fileData);
         if (!this.font.isSupported())
@@ -225,7 +201,6 @@ class TextDemoController extends AppController<TextDemoView> {
         this.view.then(view => view.attachText());
     }
 
-    private aaLevelSelect: HTMLSelectElement;
     private fpsLabel: HTMLElement;
 
     font: opentype.Font;

demo/client/src/utils.ts

@@ -25,10 +25,20 @@ export function expectNotNull<T>(value: T | null, message: string): T {
     return value;
 }
 
+function expectNotUndef<T>(value: T | undefined, message: string): T {
+    if (value === undefined)
+        throw new PathfinderError(message);
+    return value;
+}
+
 export function unwrapNull<T>(value: T | null): T {
     return expectNotNull(value, "Unexpected null!");
 }
 
+export function unwrapUndef<T>(value: T | undefined): T {
+    return expectNotUndef(value, "Unexpected `undefined`!");
+}
+
 export class PathfinderError extends Error {
     constructor(message?: string | undefined) {
         super(message);

demo/client/src/view.ts

@@ -239,7 +239,7 @@ export abstract class PathfinderView {
 
     private setTransformUniform(uniforms: UniformMap) {
         const transform = glmatrix.mat4.create();
-        glmatrix.mat4.mul(transform, this.worldTransform, this.antialiasingStrategy.transform);
+        glmatrix.mat4.mul(transform, this.antialiasingStrategy.transform, this.worldTransform);
         this.gl.uniformMatrix4fv(uniforms.uTransform, false, transform);
     }