Stub a mesh debugger app

This commit is contained in:
Patrick Walton 2017-09-01 18:11:44 -07:00
parent a43a09b9d3
commit 1eb1bb5343
11 changed files with 129 additions and 53 deletions

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>3D &mdash; Pathfinder Demo</title>
<title>3D Demo &mdash; Pathfinder</title>
<meta charset="utf-8">
{{>partials/header.html}}
<script type="text/javascript" src="/js/pathfinder/3d-demo.js"></script>

View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Mesh Debugger &mdash; Pathfinder</title>
<meta charset="utf-8">
{{>partials/header.html}}
<script type="text/javascript" src="/js/pathfinder/mesh-debugger.js"></script>
</head>
<body>
{{>partials/navbar.html}}
<canvas id="pf-canvas" width="400" height="300"></canvas>
</body>
</html>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>SVG &mdash; Pathfinder Demo</title>
<title>SVG Demo &mdash; Pathfinder</title>
<meta charset="utf-8">
{{>partials/header.html}}
<script type="text/javascript" src="/js/pathfinder/svg-demo.js"></script>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Text &mdash; Pathfinder Demo</title>
<title>Text Demo &mdash; Pathfinder</title>
<meta charset="utf-8">
{{>partials/header.html}}
<script type="text/javascript" src="/js/pathfinder/text-demo.js"></script>

View File

@ -11,13 +11,13 @@
import * as glmatrix from 'gl-matrix';
import {AntialiasingStrategy, AntialiasingStrategyName, NoAAStrategy} from "./aa-strategy";
import {DemoAppController} from "./app-controller";
import {mat4, vec2} from "gl-matrix";
import {PathfinderMeshData} from "./meshes";
import {ShaderMap, ShaderProgramSource} from "./shader-loader";
import {BUILTIN_FONT_URI, TextLayout, PathfinderGlyph} from "./text";
import {panic, PathfinderError} from "./utils";
import {PathfinderError, panic, unwrapNull} from "./utils";
import {PathfinderView, Timings} from "./view";
import AppController from "./app-controller";
import SSAAStrategy from "./ssaa-strategy";
const TEXT: string = "Lorem ipsum dolor sit amet";
@ -36,7 +36,7 @@ interface AntialiasingStrategyTable {
ssaa: typeof SSAAStrategy;
}
class ThreeDController extends AppController<ThreeDView> {
class ThreeDController extends DemoAppController<ThreeDView> {
start() {
super.start();
@ -55,11 +55,11 @@ class ThreeDController extends AppController<ThreeDView> {
});
}
protected createView(canvas: HTMLCanvasElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>):
ThreeDView {
return new ThreeDView(this, canvas, commonShaderSource, shaderSources);
protected createView(): ThreeDView {
return new ThreeDView(this,
this.canvas,
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
protected get builtinFileURI(): string {

View File

@ -13,11 +13,41 @@ import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
import {expectNotNull, unwrapUndef, unwrapNull} from './utils';
import {PathfinderView} from "./view";
export default abstract class AppController<View extends PathfinderView> {
constructor() {}
export abstract class AppController {
start() {
const canvas = document.getElementById('pf-canvas') as HTMLCanvasElement;
}
protected loadInitialFile() {
this.fetchFile(this.defaultFile);
}
protected fetchFile(file: string) {
window.fetch(`${this.builtinFileURI}/${file}`)
.then(response => response.arrayBuffer())
.then(data => {
this.fileData = data;
this.fileLoaded();
});
}
protected canvas: HTMLCanvasElement;
protected fileData: ArrayBuffer;
protected abstract fileLoaded(): void;
protected abstract get defaultFile(): string;
protected abstract get builtinFileURI(): string;
}
export abstract class DemoAppController<View extends PathfinderView> extends AppController {
constructor() {
super();
}
start() {
super.start();
this.settingsCard = document.getElementById('pf-settings') as HTMLElement;
this.settingsButton = document.getElementById('pf-settings-button') as HTMLButtonElement;
@ -50,7 +80,9 @@ export default abstract class AppController<View extends PathfinderView> {
shaderLoader.load();
this.view = Promise.all([shaderLoader.common, shaderLoader.shaders]).then(allShaders => {
return this.createView(canvas, allShaders[0], allShaders[1]);
this.commonShaderSource = allShaders[0];
this.shaderSources = allShaders[1];
return this.createView();
});
this.aaLevelSelect = document.getElementById('pf-aa-level-select') as HTMLSelectElement;
@ -58,10 +90,6 @@ export default abstract class AppController<View extends PathfinderView> {
this.updateAALevel();
}
protected loadInitialFile() {
this.fetchFile(this.defaultFile);
}
private updateAALevel() {
const selectedOption = this.aaLevelSelect.selectedOptions[0];
const aaValues = unwrapNull(/^([a-z-]+)(?:-([0-9]+))?$/.exec(selectedOption.value));
@ -106,31 +134,15 @@ export default abstract class AppController<View extends PathfinderView> {
this.fetchFile(selectedOption.value);
}
private fetchFile(file: string) {
window.fetch(`${this.builtinFileURI}/${file}`)
.then(response => response.arrayBuffer())
.then(data => {
this.fileData = data;
this.fileLoaded();
});
}
protected abstract fileLoaded(): void;
protected abstract get builtinFileURI(): string;
protected abstract get defaultFile(): string;
protected abstract createView(canvas: HTMLCanvasElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>): View;
protected abstract createView(): View;
view: Promise<View>;
protected fileData: ArrayBuffer;
protected canvas: HTMLCanvasElement;
protected filePickerElement: HTMLInputElement | null;
protected commonShaderSource: string | null;
protected shaderSources: ShaderMap<ShaderProgramSource> | null;
private aaLevelSelect: HTMLSelectElement;
private settingsCard: HTMLElement;
private settingsButton: HTMLButtonElement;

View File

@ -0,0 +1,42 @@
// pathfinder/client/src/mesh-debugger.ts
//
// Copyright © 2017 The Pathfinder Project Developers.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
import {AppController} from "./app-controller";
import {BUILTIN_FONT_URI} from "./text";
import {unwrapNull} from "./utils";
const DEFAULT_FONT: string = 'nimbus-sans';
class MeshDebuggerAppController extends AppController {
start() {
super.start();
this.loadInitialFile();
}
protected fileLoaded(): void {
throw new Error("Method not implemented.");
}
protected get defaultFile(): string {
return DEFAULT_FONT;
}
protected get builtinFileURI(): string {
return BUILTIN_FONT_URI;
}
}
function main() {
const appController = new MeshDebuggerAppController;
appController.start();
}
main();

View File

@ -12,13 +12,13 @@ import * as glmatrix from 'gl-matrix';
import * as _ from 'lodash';
import 'path-data-polyfill.js';
import {DemoAppController} from './app-controller';
import {AntialiasingStrategy, AntialiasingStrategyName, NoAAStrategy} from "./aa-strategy";
import {ECAAStrategy, ECAAMulticolorStrategy} from "./ecaa-strategy";
import {PathfinderMeshData} from "./meshes";
import {ShaderMap, ShaderProgramSource} from './shader-loader';
import {panic} from './utils';
import {panic, unwrapNull} from './utils';
import {PathfinderView, Timings} from './view';
import AppController from './app-controller';
import SSAAStrategy from "./ssaa-strategy";
const parseColor = require('parse-color');
@ -54,7 +54,7 @@ interface AntialiasingStrategyTable {
ecaa: typeof ECAAStrategy;
}
class SVGDemoController extends AppController<SVGDemoView> {
class SVGDemoController extends DemoAppController<SVGDemoView> {
start() {
super.start();
@ -73,10 +73,11 @@ class SVGDemoController extends AppController<SVGDemoView> {
this.attachSVG(svgElement);
}
protected createView(canvas: HTMLCanvasElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
return new SVGDemoView(this, canvas, commonShaderSource, shaderSources);
protected createView() {
return new SVGDemoView(this,
this.canvas,
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
private attachSVG(svgElement: SVGSVGElement) {

View File

@ -15,6 +15,7 @@ import * as glmatrix from 'gl-matrix';
import * as opentype from 'opentype.js';
import {AntialiasingStrategy, AntialiasingStrategyName, NoAAStrategy} from './aa-strategy';
import {DemoAppController} from './app-controller';
import {ECAAMonochromeStrategy, ECAAStrategy} from './ecaa-strategy';
import {createFramebuffer, createFramebufferColorTexture} from './gl-utils';
import {createFramebufferDepthTexture, QUAD_ELEMENTS, setTextureParameters} from './gl-utils';
@ -24,7 +25,6 @@ import {PathfinderShaderProgram, ShaderMap, ShaderProgramSource} from './shader-
import {BUILTIN_FONT_URI, PathfinderGlyph, TextLayout} from "./text";
import {PathfinderError, assert, expectNotNull, UINT32_SIZE, unwrapNull, panic} from './utils';
import {MonochromePathfinderView, Timings} from './view';
import AppController from './app-controller';
import PathfinderBufferTexture from './buffer-texture';
import SSAAStrategy from './ssaa-strategy';
@ -115,7 +115,7 @@ 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];
}
class TextDemoController extends AppController<TextDemoView> {
class TextDemoController extends DemoAppController<TextDemoView> {
constructor() {
super();
this.text = DEFAULT_TEXT;
@ -151,10 +151,11 @@ class TextDemoController extends AppController<TextDemoView> {
window.jQuery(this.editTextModal).modal('hide');
}
protected createView(canvas: HTMLCanvasElement,
commonShaderSource: string,
shaderSources: ShaderMap<ShaderProgramSource>) {
return new TextDemoView(this, canvas, commonShaderSource, shaderSources);
protected createView() {
return new TextDemoView(this,
this.canvas,
unwrapNull(this.commonShaderSource),
unwrapNull(this.shaderSources));
}
protected fileLoaded() {

View File

@ -8,6 +8,7 @@ module.exports = {
'3d-demo': "./src/3d-demo.ts",
'svg-demo': "./src/svg-demo.ts",
'text-demo': "./src/text-demo.ts",
'mesh-debugger': "./src/mesh-debugger.ts",
},
module: {
rules: [

View File

@ -42,6 +42,7 @@ static STATIC_INDEX_PATH: &'static str = "../client/index.html";
static STATIC_TEXT_DEMO_PATH: &'static str = "../client/text-demo.html";
static STATIC_SVG_DEMO_PATH: &'static str = "../client/svg-demo.html";
static STATIC_3D_DEMO_PATH: &'static str = "../client/3d-demo.html";
static STATIC_MESH_DEBUGGER_PATH: &'static str = "../client/mesh-debugger.html";
static STATIC_DOC_API_PATH: &'static str = "../../font-renderer/target/doc";
static STATIC_CSS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/css";
static STATIC_CSS_OCTICONS_PATH: &'static str = "../client/node_modules/octicons/build";
@ -532,6 +533,10 @@ fn static_demo_svg() -> io::Result<NamedFile> {
fn static_demo_3d() -> io::Result<NamedFile> {
NamedFile::open(STATIC_3D_DEMO_PATH)
}
#[get("/debug/mesh")]
fn static_debug_mesh() -> io::Result<NamedFile> {
NamedFile::open(STATIC_MESH_DEBUGGER_PATH)
}
#[get("/doc/api")]
fn static_doc_api_index() -> Redirect {
Redirect::to(STATIC_DOC_API_INDEX_URI)
@ -617,6 +622,7 @@ fn main() {
static_demo_text,
static_demo_svg,
static_demo_3d,
static_debug_mesh,
static_doc_api_index,
static_doc_api,
static_css_bootstrap,