2017-08-08 14:23:30 -04:00
|
|
|
// pathfinder/demo/src/index.ts
|
|
|
|
|
2017-08-10 21:38:54 -04:00
|
|
|
const base64js = require('base64-js');
|
2017-08-08 14:23:30 -04:00
|
|
|
const opentype = require('opentype.js');
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
const TEXT: string = "G";
|
2017-08-10 21:38:54 -04:00
|
|
|
const FONT_SIZE: number = 16.0;
|
|
|
|
|
|
|
|
const PARTITION_FONT_ENDPOINT_URL: string = "/partition-font";
|
|
|
|
|
2017-08-13 16:39:51 -04:00
|
|
|
const COMMON_SHADER_URL: string = '/glsl/gles2/common.inc.glsl';
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
const UINT32_SIZE: number = 4;
|
|
|
|
|
|
|
|
const B_POSITION_SIZE: number = 8;
|
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
const B_VERTEX_SIZE: number = 8;
|
|
|
|
const B_VERTEX_PATH_ID_OFFSET: number = 0;
|
|
|
|
const B_VERTEX_TEX_COORD_OFFSET: number = 4;
|
|
|
|
const B_VERTEX_SIGN_OFFSET: number = 6;
|
2017-08-14 19:08:45 -04:00
|
|
|
|
|
|
|
const IDENTITY: Matrix4D = [
|
|
|
|
1.0, 0.0, 0.0, 0.0,
|
|
|
|
0.0, 1.0, 0.0, 0.0,
|
|
|
|
0.0, 0.0, 1.0, 0.0,
|
|
|
|
0.0, 0.0, 0.0, 1.0,
|
|
|
|
];
|
|
|
|
|
|
|
|
const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
|
2017-08-15 18:57:52 -04:00
|
|
|
blit: {
|
|
|
|
vertex: "/glsl/gles2/blit.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/blit.fs.glsl",
|
|
|
|
},
|
2017-08-12 00:26:25 -04:00
|
|
|
directCurve: {
|
|
|
|
vertex: "/glsl/gles2/direct-curve.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/direct-curve.fs.glsl",
|
|
|
|
},
|
|
|
|
directInterior: {
|
|
|
|
vertex: "/glsl/gles2/direct-interior.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/direct-interior.fs.glsl",
|
|
|
|
},
|
2017-08-15 20:28:07 -04:00
|
|
|
ecaaEdgeDetect: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-edge-detect.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-edge-detect.fs.glsl",
|
|
|
|
},
|
2017-08-16 19:37:39 -04:00
|
|
|
ecaaResolve: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-resolve.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-resolve.fs.glsl",
|
|
|
|
},
|
2017-08-12 00:26:25 -04:00
|
|
|
};
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface UnlinkedShaderProgram {
|
|
|
|
vertex: WebGLShader;
|
|
|
|
fragment: WebGLShader;
|
|
|
|
}
|
|
|
|
|
|
|
|
type Matrix4D = number[];
|
|
|
|
|
2017-08-15 00:24:58 -04:00
|
|
|
interface Size2D {
|
|
|
|
width: number;
|
|
|
|
height: number;
|
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface ShaderProgramSource {
|
|
|
|
vertex: string;
|
|
|
|
fragment: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ShaderProgramURLs {
|
|
|
|
vertex: string;
|
|
|
|
fragment: string;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface ShaderMap<T> {
|
2017-08-15 18:57:52 -04:00
|
|
|
blit: T;
|
2017-08-14 19:08:45 -04:00
|
|
|
directCurve: T;
|
|
|
|
directInterior: T;
|
2017-08-15 20:28:07 -04:00
|
|
|
ecaaEdgeDetect: T;
|
2017-08-16 19:37:39 -04:00
|
|
|
ecaaResolve: T;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface UniformMap {
|
|
|
|
[uniformName: string]: WebGLUniformLocation;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface AttributeMap {
|
|
|
|
[attributeName: string]: number;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
interface AntialiasingStrategy {
|
|
|
|
// Prepares any OpenGL data. This is only called on startup and canvas resize.
|
2017-08-16 01:09:09 -04:00
|
|
|
init(view: PathfinderView, framebufferSize: Size2D): void;
|
2017-08-15 16:38:54 -04:00
|
|
|
|
|
|
|
// Called before direct rendering.
|
|
|
|
//
|
|
|
|
// Typically, this redirects direct rendering to a framebuffer of some sort.
|
2017-08-15 18:57:52 -04:00
|
|
|
prepare(view: PathfinderView): void;
|
2017-08-15 16:38:54 -04:00
|
|
|
|
|
|
|
// Called after direct rendering.
|
|
|
|
//
|
|
|
|
// This usually performs the actual antialiasing and blits to the real framebuffer.
|
2017-08-15 18:57:52 -04:00
|
|
|
resolve(view: PathfinderView, shaders: ShaderMap<PathfinderShaderProgram>): void;
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-12 00:26:25 -04:00
|
|
|
type ShaderType = number;
|
|
|
|
|
|
|
|
type ShaderTypeName = 'vertex' | 'fragment';
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
const QUAD_POSITIONS: Float32Array = new Float32Array([
|
|
|
|
-1.0, 1.0,
|
|
|
|
1.0, 1.0,
|
|
|
|
-1.0, -1.0,
|
|
|
|
1.0, -1.0,
|
|
|
|
]);
|
|
|
|
|
|
|
|
const QUAD_TEX_COORDS: Float32Array = new Float32Array([
|
|
|
|
0.0, 1.0,
|
|
|
|
1.0, 1.0,
|
|
|
|
0.0, 0.0,
|
|
|
|
1.0, 0.0,
|
|
|
|
]);
|
|
|
|
|
|
|
|
// Various utility functions
|
|
|
|
|
|
|
|
function assert(value: boolean, message: string) {
|
|
|
|
if (!value)
|
|
|
|
throw new PathfinderError(message);
|
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
function expectNotNull<T>(value: T | null, message: string): T {
|
|
|
|
if (value === null)
|
2017-08-13 16:39:51 -04:00
|
|
|
throw new PathfinderError(message);
|
2017-08-12 00:26:25 -04:00
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
function expectNotUndef<T>(value: T | undefined, message: string): T {
|
|
|
|
if (value === undefined)
|
|
|
|
throw new PathfinderError(message);
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
|
|
|
function unwrapNull<T>(value: T | null): T {
|
|
|
|
return expectNotNull(value, "Unexpected null!");
|
|
|
|
}
|
|
|
|
|
|
|
|
function unwrapUndef<T>(value: T | undefined): T {
|
|
|
|
return expectNotUndef(value, "Unexpected `undefined`!");
|
2017-08-14 19:08:45 -04:00
|
|
|
}
|
|
|
|
|
2017-08-13 16:39:51 -04:00
|
|
|
class PathfinderError extends Error {
|
|
|
|
constructor(message?: string | undefined) {
|
|
|
|
super(message);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-15 19:51:26 -04:00
|
|
|
// GL utilities
|
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
function createFramebufferColorTexture(gl: WebGLRenderingContext, size: Size2D): WebGLTexture {
|
|
|
|
// Firefox seems to have a bug whereby textures don't get marked as initialized when cleared
|
|
|
|
// if they're anything other than the first attachment of an FBO. To work around this, supply
|
|
|
|
// zero data explicitly when initializing the texture.
|
|
|
|
|
|
|
|
const texture = unwrapNull(gl.createTexture());
|
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
|
|
gl.texImage2D(gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
gl.RGBA,
|
|
|
|
size.width,
|
|
|
|
size.height,
|
|
|
|
0,
|
|
|
|
gl.RGBA,
|
|
|
|
gl.UNSIGNED_BYTE,
|
|
|
|
new Uint8Array(size.width * size.height * 4));
|
|
|
|
setTextureParameters(gl, gl.NEAREST);
|
|
|
|
return texture;
|
|
|
|
}
|
|
|
|
|
|
|
|
function createFramebufferDepthTexture(gl: WebGLRenderingContext, size: Size2D): WebGLTexture {
|
|
|
|
const texture = unwrapNull(gl.createTexture());
|
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
|
|
gl.texImage2D(gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
gl.DEPTH_COMPONENT,
|
|
|
|
size.width,
|
|
|
|
size.height,
|
|
|
|
0,
|
|
|
|
gl.DEPTH_COMPONENT,
|
|
|
|
gl.UNSIGNED_INT,
|
|
|
|
null);
|
|
|
|
setTextureParameters(gl, gl.NEAREST);
|
|
|
|
return texture;
|
|
|
|
}
|
|
|
|
|
2017-08-15 19:51:26 -04:00
|
|
|
function setTextureParameters(gl: WebGLRenderingContext, filter: number) {
|
|
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
|
|
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
|
|
|
|
}
|
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
function createFramebuffer(gl: WebGLRenderingContext,
|
|
|
|
drawBuffersExt: any,
|
|
|
|
colorAttachments: WebGLTexture[],
|
|
|
|
depthAttachment: WebGLTexture | null):
|
|
|
|
WebGLFramebuffer {
|
|
|
|
const framebuffer = unwrapNull(gl.createFramebuffer());
|
|
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
|
|
|
|
|
|
|
|
const colorAttachmentCount = colorAttachments.length;
|
|
|
|
for (let colorAttachmentIndex = 0;
|
|
|
|
colorAttachmentIndex < colorAttachmentCount;
|
|
|
|
colorAttachmentIndex++) {
|
|
|
|
gl.framebufferTexture2D(gl.FRAMEBUFFER,
|
|
|
|
drawBuffersExt[`COLOR_ATTACHMENT${colorAttachmentIndex}_WEBGL`],
|
|
|
|
gl.TEXTURE_2D,
|
|
|
|
colorAttachments[colorAttachmentIndex],
|
|
|
|
0);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (depthAttachment != null) {
|
|
|
|
gl.framebufferTexture2D(gl.FRAMEBUFFER,
|
|
|
|
gl.DEPTH_ATTACHMENT,
|
|
|
|
gl.TEXTURE_2D,
|
|
|
|
depthAttachment,
|
|
|
|
0);
|
|
|
|
}
|
|
|
|
|
|
|
|
assert(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE,
|
|
|
|
"Framebuffer was incomplete!");
|
|
|
|
return framebuffer;
|
|
|
|
}
|
|
|
|
|
|
|
|
function initQuadVAO(view: PathfinderView, attributes: any) {
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, view.quadPositionsBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aPosition, 2, view.gl.FLOAT, false, 0, 0);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, view.quadTexCoordsBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aTexCoord, 2, view.gl.FLOAT, false, 0, 0);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aPosition);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aTexCoord);
|
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface Meshes<T> {
|
|
|
|
readonly bQuads: T;
|
|
|
|
readonly bVertexPositions: T;
|
|
|
|
readonly bVertexInfo: T;
|
|
|
|
readonly coverInteriorIndices: T;
|
|
|
|
readonly coverCurveIndices: T;
|
|
|
|
readonly edgeUpperLineIndices: T;
|
|
|
|
readonly edgeUpperCurveIndices: T;
|
|
|
|
readonly edgeLowerLineIndices: T;
|
|
|
|
readonly edgeLowerCurveIndices: T;
|
|
|
|
}
|
|
|
|
|
|
|
|
type BufferType = number;
|
|
|
|
|
|
|
|
const BUFFER_TYPES: Meshes<BufferType> = {
|
|
|
|
bQuads: WebGLRenderingContext.ARRAY_BUFFER,
|
|
|
|
bVertexPositions: WebGLRenderingContext.ARRAY_BUFFER,
|
|
|
|
bVertexInfo: WebGLRenderingContext.ARRAY_BUFFER,
|
|
|
|
coverInteriorIndices: WebGLRenderingContext.ELEMENT_ARRAY_BUFFER,
|
|
|
|
coverCurveIndices: WebGLRenderingContext.ELEMENT_ARRAY_BUFFER,
|
|
|
|
edgeUpperLineIndices: WebGLRenderingContext.ELEMENT_ARRAY_BUFFER,
|
|
|
|
edgeUpperCurveIndices: WebGLRenderingContext.ELEMENT_ARRAY_BUFFER,
|
|
|
|
edgeLowerLineIndices: WebGLRenderingContext.ELEMENT_ARRAY_BUFFER,
|
|
|
|
edgeLowerCurveIndices: WebGLRenderingContext.ELEMENT_ARRAY_BUFFER,
|
|
|
|
};
|
|
|
|
|
|
|
|
class PathfinderMeshData implements Meshes<ArrayBuffer> {
|
2017-08-10 21:38:54 -04:00
|
|
|
constructor(encodedResponse: string) {
|
|
|
|
const response = JSON.parse(encodedResponse);
|
|
|
|
if (!('Ok' in response))
|
2017-08-13 16:39:51 -04:00
|
|
|
throw new PathfinderError("Failed to partition the font!");
|
2017-08-10 21:38:54 -04:00
|
|
|
const meshes = response.Ok;
|
2017-08-14 19:08:45 -04:00
|
|
|
for (const bufferName of Object.keys(BUFFER_TYPES) as Array<keyof PathfinderMeshData>)
|
|
|
|
this[bufferName] = base64js.toByteArray(meshes[bufferName]).buffer;
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
readonly bQuads: ArrayBuffer;
|
|
|
|
readonly bVertexPositions: ArrayBuffer;
|
|
|
|
readonly bVertexInfo: ArrayBuffer;
|
|
|
|
readonly coverInteriorIndices: ArrayBuffer;
|
|
|
|
readonly coverCurveIndices: ArrayBuffer;
|
|
|
|
readonly edgeUpperLineIndices: ArrayBuffer;
|
|
|
|
readonly edgeUpperCurveIndices: ArrayBuffer;
|
|
|
|
readonly edgeLowerLineIndices: ArrayBuffer;
|
|
|
|
readonly edgeLowerCurveIndices: ArrayBuffer;
|
|
|
|
}
|
|
|
|
|
|
|
|
class PathfinderMeshBuffers implements Meshes<WebGLBuffer> {
|
|
|
|
constructor(gl: WebGLRenderingContext, meshData: PathfinderMeshData) {
|
|
|
|
for (const bufferName of Object.keys(BUFFER_TYPES) as Array<keyof PathfinderMeshBuffers>) {
|
|
|
|
const bufferType = BUFFER_TYPES[bufferName];
|
2017-08-15 16:38:54 -04:00
|
|
|
const buffer = expectNotNull(gl.createBuffer(), "Failed to create buffer!");
|
2017-08-14 19:08:45 -04:00
|
|
|
gl.bindBuffer(bufferType, buffer);
|
|
|
|
gl.bufferData(bufferType, meshData[bufferName], gl.STATIC_DRAW);
|
|
|
|
this[bufferName] = buffer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
readonly bQuads: WebGLBuffer;
|
|
|
|
readonly bVertexPositions: WebGLBuffer;
|
|
|
|
readonly bVertexInfo: WebGLBuffer;
|
|
|
|
readonly coverInteriorIndices: WebGLBuffer;
|
|
|
|
readonly coverCurveIndices: WebGLBuffer;
|
|
|
|
readonly edgeUpperLineIndices: WebGLBuffer;
|
|
|
|
readonly edgeUpperCurveIndices: WebGLBuffer;
|
|
|
|
readonly edgeLowerLineIndices: WebGLBuffer;
|
|
|
|
readonly edgeLowerCurveIndices: WebGLBuffer;
|
2017-08-10 21:38:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
class AppController {
|
|
|
|
constructor() {}
|
|
|
|
|
2017-08-08 14:23:30 -04:00
|
|
|
start() {
|
|
|
|
this.view = new PathfinderView(document.getElementById('pf-canvas') as HTMLCanvasElement);
|
|
|
|
|
|
|
|
this.loadFontButton = document.getElementById('pf-load-font-button') as HTMLInputElement;
|
|
|
|
this.loadFontButton.addEventListener('change', () => this.loadFont(), false);
|
2017-08-15 16:38:54 -04:00
|
|
|
|
|
|
|
this.aaLevelSelect = document.getElementById('pf-aa-level-select') as HTMLSelectElement;
|
|
|
|
this.aaLevelSelect.addEventListener('change', () => this.updateAALevel(), false);
|
|
|
|
this.updateAALevel();
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
loadFont() {
|
2017-08-15 16:38:54 -04:00
|
|
|
const file = expectNotNull(this.loadFontButton.files, "No file selected!")[0];
|
2017-08-10 21:38:54 -04:00
|
|
|
const reader = new FileReader;
|
|
|
|
reader.addEventListener('loadend', () => {
|
|
|
|
this.fontData = reader.result;
|
|
|
|
this.fontLoaded();
|
|
|
|
}, false);
|
|
|
|
reader.readAsArrayBuffer(file);
|
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
updateAALevel() {
|
|
|
|
const selectedOption = this.aaLevelSelect.selectedOptions[0];
|
2017-08-15 18:57:52 -04:00
|
|
|
const aaType = unwrapUndef(selectedOption.dataset.pfType) as
|
|
|
|
keyof AntialiasingStrategyTable;
|
2017-08-15 16:38:54 -04:00
|
|
|
const aaLevel = parseInt(unwrapUndef(selectedOption.dataset.pfLevel));
|
|
|
|
this.view.setAntialiasingOptions(aaType, aaLevel);
|
|
|
|
}
|
|
|
|
|
2017-08-10 21:38:54 -04:00
|
|
|
fontLoaded() {
|
|
|
|
this.font = opentype.parse(this.fontData);
|
2017-08-12 00:26:25 -04:00
|
|
|
if (!this.font.supported)
|
2017-08-13 16:39:51 -04:00
|
|
|
throw new PathfinderError("The font type is unsupported.");
|
2017-08-10 21:38:54 -04:00
|
|
|
|
2017-08-12 00:26:25 -04:00
|
|
|
const glyphIDs = this.font.stringToGlyphs(TEXT).map((glyph: any) => glyph.index);
|
2017-08-10 21:38:54 -04:00
|
|
|
|
|
|
|
const request = {
|
|
|
|
otf: base64js.fromByteArray(new Uint8Array(this.fontData)),
|
|
|
|
fontIndex: 0,
|
|
|
|
glyphIDs: glyphIDs,
|
|
|
|
pointSize: FONT_SIZE,
|
|
|
|
};
|
|
|
|
|
2017-08-12 13:08:35 -04:00
|
|
|
window.fetch(PARTITION_FONT_ENDPOINT_URL, {
|
|
|
|
method: 'POST',
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
body: JSON.stringify(request),
|
2017-08-15 00:24:58 -04:00
|
|
|
}).then(response => response.text()).then(encodedMeshes => {
|
|
|
|
this.meshes = new PathfinderMeshData(encodedMeshes);
|
|
|
|
this.meshesReceived();
|
2017-08-12 13:08:35 -04:00
|
|
|
});
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-10 21:38:54 -04:00
|
|
|
meshesReceived() {
|
2017-08-15 00:24:58 -04:00
|
|
|
this.view.uploadPathData(TEXT.length);
|
2017-08-14 19:08:45 -04:00
|
|
|
this.view.attachMeshes(this.meshes);
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
view: PathfinderView;
|
|
|
|
loadFontButton: HTMLInputElement;
|
2017-08-15 16:38:54 -04:00
|
|
|
aaLevelSelect: HTMLSelectElement;
|
2017-08-10 21:38:54 -04:00
|
|
|
fontData: ArrayBuffer;
|
|
|
|
font: any;
|
2017-08-14 19:08:45 -04:00
|
|
|
meshes: PathfinderMeshData;
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
class PathfinderView {
|
|
|
|
constructor(canvas: HTMLCanvasElement) {
|
|
|
|
this.canvas = canvas;
|
2017-08-12 00:26:25 -04:00
|
|
|
|
|
|
|
this.initContext();
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
this.antialiasingStrategy = new NoAAStrategy(0);
|
|
|
|
|
2017-08-13 16:39:51 -04:00
|
|
|
this.shaderProgramsPromise = this.loadShaders().then(shaders => this.linkShaders(shaders));
|
2017-08-12 00:26:25 -04:00
|
|
|
|
|
|
|
window.addEventListener('resize', () => this.resizeToFit(), false);
|
|
|
|
this.resizeToFit();
|
|
|
|
}
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
setAntialiasingOptions(aaType: keyof AntialiasingStrategyTable, aaLevel: number) {
|
2017-08-15 16:38:54 -04:00
|
|
|
this.antialiasingStrategy = new (ANTIALIASING_STRATEGIES[aaType])(aaLevel);
|
|
|
|
|
|
|
|
let canvas = this.canvas;
|
2017-08-16 01:09:09 -04:00
|
|
|
this.antialiasingStrategy.init(this, { width: canvas.width, height: canvas.height });
|
2017-08-15 18:57:52 -04:00
|
|
|
|
|
|
|
this.setDirty();
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-12 00:26:25 -04:00
|
|
|
initContext() {
|
2017-08-15 18:57:52 -04:00
|
|
|
// Initialize the OpenGL context.
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl = expectNotNull(this.canvas.getContext('webgl', { antialias: false, depth: true }),
|
|
|
|
"Failed to initialize WebGL! Check that your browser supports it.");
|
2017-08-16 01:09:09 -04:00
|
|
|
this.drawBuffersExt = this.gl.getExtension('WEBGL_draw_buffers');
|
2017-08-15 20:28:07 -04:00
|
|
|
this.gl.getExtension('EXT_frag_depth');
|
2017-08-14 19:08:45 -04:00
|
|
|
this.gl.getExtension('OES_element_index_uint');
|
2017-08-15 19:51:26 -04:00
|
|
|
this.gl.getExtension('WEBGL_depth_texture');
|
2017-08-15 18:57:52 -04:00
|
|
|
|
|
|
|
// Upload quad buffers.
|
|
|
|
this.quadPositionsBuffer = unwrapNull(this.gl.createBuffer());
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quadPositionsBuffer);
|
|
|
|
this.gl.bufferData(this.gl.ARRAY_BUFFER, QUAD_POSITIONS, this.gl.STATIC_DRAW);
|
|
|
|
this.quadTexCoordsBuffer = unwrapNull(this.gl.createBuffer());
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quadTexCoordsBuffer);
|
|
|
|
this.gl.bufferData(this.gl.ARRAY_BUFFER, QUAD_TEX_COORDS, this.gl.STATIC_DRAW);
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
loadShaders(): Promise<ShaderMap<UnlinkedShaderProgram>> {
|
|
|
|
let shaders: Partial<ShaderMap<Partial<UnlinkedShaderProgram>>> = {};
|
2017-08-13 16:39:51 -04:00
|
|
|
return window.fetch(COMMON_SHADER_URL)
|
|
|
|
.then((response) => response.text())
|
|
|
|
.then((commonSource) => {
|
2017-08-14 19:08:45 -04:00
|
|
|
const shaderKeys = Object.keys(SHADER_URLS) as Array<keyof ShaderMap<string>>;
|
2017-08-13 16:39:51 -04:00
|
|
|
|
|
|
|
let promises = [];
|
|
|
|
for (const shaderKey of shaderKeys) {
|
|
|
|
for (const typeName of ['vertex', 'fragment'] as Array<ShaderTypeName>) {
|
|
|
|
const type = {
|
|
|
|
vertex: this.gl.VERTEX_SHADER,
|
|
|
|
fragment: this.gl.FRAGMENT_SHADER,
|
|
|
|
}[typeName];
|
|
|
|
|
|
|
|
const url = SHADER_URLS[shaderKey][typeName];
|
|
|
|
promises.push(window.fetch(url)
|
|
|
|
.then(response => response.text())
|
|
|
|
.then(source => {
|
2017-08-12 13:08:35 -04:00
|
|
|
const shader = this.gl.createShader(type);
|
|
|
|
if (shader == null)
|
2017-08-13 16:39:51 -04:00
|
|
|
throw new PathfinderError("Failed to create shader!");
|
|
|
|
this.gl.shaderSource(shader, commonSource + "\n#line 1\n" + source);
|
2017-08-12 13:08:35 -04:00
|
|
|
this.gl.compileShader(shader);
|
2017-08-13 16:39:51 -04:00
|
|
|
if (this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS) == 0) {
|
|
|
|
const infoLog = this.gl.getShaderInfoLog(shader);
|
|
|
|
throw new PathfinderError(`Failed to compile ${typeName} shader ` +
|
|
|
|
`"${shaderKey}":\n${infoLog}`);
|
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
if (shaders[shaderKey] == null)
|
2017-08-12 13:08:35 -04:00
|
|
|
shaders[shaderKey] = {};
|
2017-08-14 19:08:45 -04:00
|
|
|
shaders[shaderKey]![typeName] = shader;
|
2017-08-13 16:39:51 -04:00
|
|
|
}));
|
|
|
|
}
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
2017-08-12 13:08:35 -04:00
|
|
|
|
2017-08-13 16:39:51 -04:00
|
|
|
return Promise.all(promises);
|
2017-08-14 19:08:45 -04:00
|
|
|
}).then(() => shaders as ShaderMap<UnlinkedShaderProgram>);
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
linkShaders(shaders: ShaderMap<UnlinkedShaderProgram>):
|
|
|
|
Promise<ShaderMap<PathfinderShaderProgram>> {
|
2017-08-13 16:39:51 -04:00
|
|
|
return new Promise((resolve, reject) => {
|
2017-08-14 19:08:45 -04:00
|
|
|
let shaderProgramMap: Partial<ShaderMap<PathfinderShaderProgram>> = {};
|
|
|
|
for (const shaderName of Object.keys(shaders) as
|
|
|
|
Array<keyof ShaderMap<UnlinkedShaderProgram>>) {
|
|
|
|
shaderProgramMap[shaderName] = new PathfinderShaderProgram(this.gl,
|
|
|
|
shaderName,
|
|
|
|
shaders[shaderName]);
|
2017-08-13 16:39:51 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
resolve(shaderProgramMap as ShaderMap<PathfinderShaderProgram>);
|
2017-08-13 16:39:51 -04:00
|
|
|
});
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 00:24:58 -04:00
|
|
|
uploadPathData(pathCount: number) {
|
|
|
|
const pathColors = new Uint8Array(4 * pathCount);
|
|
|
|
for (let pathIndex = 0; pathIndex < pathCount; pathIndex++) {
|
|
|
|
for (let channel = 0; channel < 3; channel++)
|
|
|
|
pathColors[pathIndex * 4 + channel] = 0x00; // RGB
|
|
|
|
pathColors[pathIndex * 4 + 3] = 0xff; // alpha
|
|
|
|
}
|
|
|
|
|
|
|
|
this.pathColorsBufferTexture = new PathfinderBufferTexture(this.gl, pathColors);
|
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
attachMeshes(meshes: PathfinderMeshData) {
|
|
|
|
this.meshes = new PathfinderMeshBuffers(this.gl, meshes);
|
|
|
|
this.setDirty();
|
|
|
|
}
|
|
|
|
|
|
|
|
setDirty() {
|
|
|
|
if (this.dirty)
|
|
|
|
return;
|
|
|
|
this.dirty = true;
|
|
|
|
window.requestAnimationFrame(() => this.redraw());
|
|
|
|
}
|
|
|
|
|
2017-08-12 00:26:25 -04:00
|
|
|
resizeToFit() {
|
2017-08-14 22:08:18 -04:00
|
|
|
const width = window.innerWidth;
|
|
|
|
const height = window.scrollY + window.innerHeight -
|
|
|
|
this.canvas.getBoundingClientRect().top;
|
2017-08-14 19:08:45 -04:00
|
|
|
const devicePixelRatio = window.devicePixelRatio;
|
2017-08-15 16:38:54 -04:00
|
|
|
|
|
|
|
const framebufferSize = {
|
|
|
|
width: width * devicePixelRatio,
|
|
|
|
height: height * devicePixelRatio,
|
|
|
|
};
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
this.canvas.style.width = width + 'px';
|
|
|
|
this.canvas.style.height = height + 'px';
|
2017-08-15 16:38:54 -04:00
|
|
|
this.canvas.width = framebufferSize.width;
|
|
|
|
this.canvas.height = framebufferSize.height;
|
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
this.antialiasingStrategy.init(this, framebufferSize);
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
this.setDirty();
|
|
|
|
}
|
|
|
|
|
|
|
|
redraw() {
|
|
|
|
this.shaderProgramsPromise.then((shaderPrograms: ShaderMap<PathfinderShaderProgram>) => {
|
|
|
|
if (this.meshes == null) {
|
|
|
|
this.dirty = false;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
// Prepare for direct rendering.
|
|
|
|
this.antialiasingStrategy.prepare(this);
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
// Perform direct rendering (Loop-Blinn).
|
|
|
|
this.renderDirect(shaderPrograms);
|
|
|
|
|
|
|
|
// Antialias.
|
2017-08-15 18:57:52 -04:00
|
|
|
this.antialiasingStrategy.resolve(this, shaderPrograms);
|
2017-08-14 19:08:45 -04:00
|
|
|
|
|
|
|
// Clear dirty bit and finish.
|
|
|
|
this.dirty = false;
|
|
|
|
});
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
renderDirect(shaderPrograms: ShaderMap<PathfinderShaderProgram>) {
|
2017-08-16 19:37:39 -04:00
|
|
|
// Set up implicit cover state.
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.depthFunc(this.gl.GREATER);
|
|
|
|
this.gl.depthMask(true);
|
|
|
|
this.gl.enable(this.gl.DEPTH_TEST);
|
2017-08-16 19:37:39 -04:00
|
|
|
this.gl.disable(this.gl.BLEND);
|
2017-08-15 16:38:54 -04:00
|
|
|
|
|
|
|
// Set up the implicit cover interior VAO.
|
|
|
|
const directInteriorProgram = shaderPrograms.directInterior;
|
|
|
|
this.gl.useProgram(directInteriorProgram.program);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexPositions);
|
|
|
|
this.gl.vertexAttribPointer(directInteriorProgram.attributes.aPosition,
|
|
|
|
2,
|
|
|
|
this.gl.FLOAT,
|
|
|
|
false,
|
|
|
|
0,
|
|
|
|
0);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexInfo);
|
2017-08-16 01:09:09 -04:00
|
|
|
this.gl.vertexAttribPointer(directInteriorProgram.attributes.aPathID,
|
2017-08-15 16:38:54 -04:00
|
|
|
1,
|
|
|
|
this.gl.UNSIGNED_SHORT, // FIXME(pcwalton)
|
2017-08-16 01:09:09 -04:00
|
|
|
false,
|
2017-08-16 19:37:39 -04:00
|
|
|
B_VERTEX_SIZE,
|
|
|
|
B_VERTEX_PATH_ID_OFFSET);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.enableVertexAttribArray(directInteriorProgram.attributes.aPosition);
|
2017-08-16 19:37:39 -04:00
|
|
|
this.gl.enableVertexAttribArray(directInteriorProgram.attributes.aPathID);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverInteriorIndices);
|
|
|
|
|
|
|
|
// Draw direct interior parts.
|
|
|
|
this.gl.activeTexture(this.gl.TEXTURE0);
|
|
|
|
this.gl.bindTexture(this.gl.TEXTURE_2D, this.pathColorsBufferTexture.texture);
|
|
|
|
this.gl.uniformMatrix4fv(directInteriorProgram.uniforms.uTransform, false, IDENTITY);
|
|
|
|
this.gl.uniform2i(directInteriorProgram.uniforms.uFramebufferSize,
|
2017-08-15 18:57:52 -04:00
|
|
|
this.canvas.width,
|
|
|
|
this.canvas.height);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.uniform2i(directInteriorProgram.uniforms.uPathColorsDimensions,
|
2017-08-15 18:57:52 -04:00
|
|
|
this.pathColorsBufferTexture.size.width,
|
|
|
|
this.pathColorsBufferTexture.size.height);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.uniform1i(directInteriorProgram.uniforms.uPathColors, 0);
|
|
|
|
let indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
|
|
|
|
this.gl.BUFFER_SIZE) / UINT32_SIZE;
|
|
|
|
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
|
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
// Set up direct curve state.
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.depthMask(false);
|
2017-08-16 19:37:39 -04:00
|
|
|
this.gl.enable(this.gl.BLEND);
|
|
|
|
this.gl.blendEquation(this.gl.FUNC_ADD);
|
|
|
|
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
// Set up the direct curve VAO.
|
2017-08-15 16:38:54 -04:00
|
|
|
const directCurveProgram = shaderPrograms.directCurve;
|
|
|
|
this.gl.useProgram(directCurveProgram.program);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexPositions);
|
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aPosition,
|
|
|
|
2,
|
|
|
|
this.gl.FLOAT,
|
|
|
|
false,
|
|
|
|
0,
|
|
|
|
0);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexInfo);
|
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aTexCoord,
|
|
|
|
2,
|
|
|
|
this.gl.UNSIGNED_BYTE,
|
|
|
|
false,
|
2017-08-16 19:37:39 -04:00
|
|
|
B_VERTEX_SIZE,
|
|
|
|
B_VERTEX_TEX_COORD_OFFSET);
|
2017-08-16 01:09:09 -04:00
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aPathID,
|
2017-08-15 16:38:54 -04:00
|
|
|
1,
|
|
|
|
this.gl.UNSIGNED_SHORT, // FIXME(pcwalton)
|
2017-08-16 01:09:09 -04:00
|
|
|
false,
|
2017-08-16 19:37:39 -04:00
|
|
|
B_VERTEX_SIZE,
|
|
|
|
B_VERTEX_PATH_ID_OFFSET);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aSign,
|
|
|
|
1,
|
|
|
|
this.gl.BYTE,
|
|
|
|
false,
|
2017-08-16 19:37:39 -04:00
|
|
|
B_VERTEX_SIZE,
|
|
|
|
B_VERTEX_SIGN_OFFSET);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.enableVertexAttribArray(directCurveProgram.attributes.aPosition);
|
|
|
|
this.gl.enableVertexAttribArray(directCurveProgram.attributes.aTexCoord);
|
2017-08-16 19:37:39 -04:00
|
|
|
this.gl.enableVertexAttribArray(directCurveProgram.attributes.aPathID);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.enableVertexAttribArray(directCurveProgram.attributes.aSign);
|
|
|
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverCurveIndices);
|
|
|
|
|
|
|
|
// Draw direct curve parts.
|
|
|
|
this.gl.activeTexture(this.gl.TEXTURE0);
|
|
|
|
this.gl.bindTexture(this.gl.TEXTURE_2D, this.pathColorsBufferTexture.texture);
|
|
|
|
this.gl.uniformMatrix4fv(directCurveProgram.uniforms.uTransform, false, IDENTITY);
|
|
|
|
this.gl.uniform2i(directCurveProgram.uniforms.uFramebufferSize,
|
2017-08-15 18:57:52 -04:00
|
|
|
this.canvas.width,
|
|
|
|
this.canvas.height);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.uniform2i(directCurveProgram.uniforms.uPathColorsDimensions,
|
2017-08-15 18:57:52 -04:00
|
|
|
this.pathColorsBufferTexture.size.width,
|
|
|
|
this.pathColorsBufferTexture.size.height);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.uniform1i(directCurveProgram.uniforms.uPathColors, 0);
|
|
|
|
indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
|
|
|
|
this.gl.BUFFER_SIZE) / UINT32_SIZE;
|
|
|
|
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
|
|
|
|
}
|
|
|
|
|
2017-08-08 14:23:30 -04:00
|
|
|
canvas: HTMLCanvasElement;
|
2017-08-12 00:26:25 -04:00
|
|
|
gl: WebGLRenderingContext;
|
2017-08-16 01:09:09 -04:00
|
|
|
drawBuffersExt: any;
|
2017-08-15 18:57:52 -04:00
|
|
|
antialiasingStrategy: AntialiasingStrategy;
|
2017-08-14 19:08:45 -04:00
|
|
|
shaderProgramsPromise: Promise<ShaderMap<PathfinderShaderProgram>>;
|
|
|
|
meshes: PathfinderMeshBuffers;
|
2017-08-15 00:24:58 -04:00
|
|
|
pathColorsBufferTexture: PathfinderBufferTexture;
|
2017-08-15 18:57:52 -04:00
|
|
|
quadPositionsBuffer: WebGLBuffer;
|
|
|
|
quadTexCoordsBuffer: WebGLBuffer;
|
2017-08-14 19:08:45 -04:00
|
|
|
dirty: boolean;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
class PathfinderShaderProgram {
|
2017-08-14 19:08:45 -04:00
|
|
|
constructor(gl: WebGLRenderingContext,
|
|
|
|
programName: string,
|
|
|
|
unlinkedShaderProgram: UnlinkedShaderProgram) {
|
2017-08-15 16:38:54 -04:00
|
|
|
this.program = expectNotNull(gl.createProgram(), "Failed to create shader program!");
|
2017-08-14 19:08:45 -04:00
|
|
|
for (const compiledShader of Object.values(unlinkedShaderProgram))
|
|
|
|
gl.attachShader(this.program, compiledShader);
|
|
|
|
gl.linkProgram(this.program);
|
|
|
|
|
|
|
|
if (gl.getProgramParameter(this.program, gl.LINK_STATUS) == 0) {
|
|
|
|
const infoLog = gl.getProgramInfoLog(this.program);
|
|
|
|
throw new PathfinderError(`Failed to link program "${programName}":\n${infoLog}`);
|
|
|
|
}
|
|
|
|
|
|
|
|
const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
|
|
|
|
const attributeCount = gl.getProgramParameter(this.program, gl.ACTIVE_ATTRIBUTES);
|
|
|
|
|
|
|
|
let uniforms: UniformMap = {};
|
|
|
|
let attributes: AttributeMap = {};
|
|
|
|
|
|
|
|
for (let uniformIndex = 0; uniformIndex < uniformCount; uniformIndex++) {
|
2017-08-15 16:38:54 -04:00
|
|
|
const uniformName = unwrapNull(gl.getActiveUniform(this.program, uniformIndex)).name;
|
|
|
|
uniforms[uniformName] = expectNotNull(gl.getUniformLocation(this.program, uniformName),
|
|
|
|
`Didn't find uniform "${uniformName}"!`);
|
2017-08-14 19:08:45 -04:00
|
|
|
}
|
|
|
|
for (let attributeIndex = 0; attributeIndex < attributeCount; attributeIndex++) {
|
2017-08-15 16:38:54 -04:00
|
|
|
const attributeName = unwrapNull(gl.getActiveAttrib(this.program, attributeIndex)).name;
|
2017-08-14 19:08:45 -04:00
|
|
|
attributes[attributeName] = attributeIndex;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.uniforms = uniforms;
|
|
|
|
this.attributes = attributes;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
2017-08-14 19:08:45 -04:00
|
|
|
|
|
|
|
readonly uniforms: UniformMap;
|
|
|
|
readonly attributes: AttributeMap;
|
|
|
|
readonly program: WebGLProgram;
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 00:24:58 -04:00
|
|
|
class PathfinderBufferTexture {
|
|
|
|
constructor(gl: WebGLRenderingContext, data: Uint8Array) {
|
|
|
|
const pixelCount = Math.ceil(data.length / 4);
|
|
|
|
const width = Math.ceil(Math.sqrt(pixelCount));
|
|
|
|
const height = Math.ceil(pixelCount / width);
|
|
|
|
this.size = { width: width, height: height };
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
this.texture = expectNotNull(gl.createTexture(), "Failed to create texture!");
|
2017-08-15 00:24:58 -04:00
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
|
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
|
2017-08-15 19:51:26 -04:00
|
|
|
setTextureParameters(gl, gl.NEAREST);
|
2017-08-15 00:24:58 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
readonly texture: WebGLTexture;
|
|
|
|
readonly size: Size2D;
|
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
class NoAAStrategy implements AntialiasingStrategy {
|
|
|
|
constructor(level: number) {
|
|
|
|
this.framebufferSize = { width: 0, height: 0 };
|
|
|
|
}
|
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
init(view: PathfinderView, framebufferSize: Size2D) {
|
2017-08-15 16:38:54 -04:00
|
|
|
this.framebufferSize = framebufferSize;
|
|
|
|
}
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
prepare(view: PathfinderView) {
|
|
|
|
view.gl.viewport(0, 0, this.framebufferSize.width, this.framebufferSize.height);
|
2017-08-16 19:37:39 -04:00
|
|
|
|
|
|
|
// Clear.
|
|
|
|
view.gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
|
|
|
view.gl.clearDepth(0.0);
|
|
|
|
view.gl.depthMask(true);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT | view.gl.DEPTH_BUFFER_BIT);
|
2017-08-15 18:57:52 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
resolve(view: PathfinderView, shaders: ShaderMap<PathfinderShaderProgram>) {}
|
2017-08-15 16:38:54 -04:00
|
|
|
|
|
|
|
framebufferSize: Size2D;
|
|
|
|
}
|
|
|
|
|
|
|
|
class SSAAStrategy implements AntialiasingStrategy {
|
|
|
|
constructor(level: number) {
|
2017-08-15 18:57:52 -04:00
|
|
|
this.level = level;
|
|
|
|
this.canvasFramebufferSize = { width: 0, height: 0 };
|
|
|
|
this.supersampledFramebufferSize = { width: 0, height: 0 };
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
init(view: PathfinderView, framebufferSize: Size2D) {
|
2017-08-15 18:57:52 -04:00
|
|
|
this.canvasFramebufferSize = framebufferSize;
|
|
|
|
this.supersampledFramebufferSize = {
|
|
|
|
width: framebufferSize.width * 2,
|
|
|
|
height: framebufferSize.height * (this.level == 2 ? 1 : 2),
|
|
|
|
};
|
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
this.supersampledColorTexture = unwrapNull(view.gl.createTexture());
|
2017-08-16 19:37:39 -04:00
|
|
|
view.gl.activeTexture(view.gl.TEXTURE0);
|
2017-08-16 01:09:09 -04:00
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.supersampledColorTexture);
|
|
|
|
view.gl.texImage2D(view.gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
view.gl.RGBA,
|
|
|
|
this.supersampledFramebufferSize.width,
|
|
|
|
this.supersampledFramebufferSize.height,
|
|
|
|
0,
|
|
|
|
view.gl.RGBA,
|
|
|
|
view.gl.UNSIGNED_BYTE,
|
|
|
|
null);
|
|
|
|
setTextureParameters(view.gl, view.gl.LINEAR);
|
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
this.supersampledDepthTexture =
|
|
|
|
createFramebufferDepthTexture(view.gl, this.supersampledFramebufferSize);
|
2017-08-16 01:09:09 -04:00
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
this.supersampledFramebuffer = createFramebuffer(view.gl,
|
|
|
|
view.drawBuffersExt,
|
|
|
|
[this.supersampledColorTexture],
|
|
|
|
this.supersampledDepthTexture);
|
2017-08-15 18:57:52 -04:00
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, null);
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
prepare(view: PathfinderView) {
|
|
|
|
const size = this.supersampledFramebufferSize;
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.supersampledFramebuffer);
|
|
|
|
view.gl.viewport(0, 0, size.width, size.height);
|
2017-08-16 19:37:39 -04:00
|
|
|
|
|
|
|
// Clear.
|
|
|
|
view.gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
|
|
|
view.gl.clearDepth(0.0);
|
|
|
|
view.gl.depthMask(true);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT | view.gl.DEPTH_BUFFER_BIT);
|
2017-08-15 18:57:52 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
resolve(view: PathfinderView, shaders: ShaderMap<PathfinderShaderProgram>) {
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, null);
|
|
|
|
view.gl.viewport(0, 0, view.canvas.width, view.canvas.height);
|
|
|
|
view.gl.disable(view.gl.DEPTH_TEST);
|
|
|
|
|
|
|
|
// Set up the blit program VAO.
|
|
|
|
const blitProgram = shaders.blit;
|
|
|
|
view.gl.useProgram(blitProgram.program);
|
2017-08-16 19:37:39 -04:00
|
|
|
initQuadVAO(view, blitProgram.attributes);
|
2017-08-15 18:57:52 -04:00
|
|
|
|
|
|
|
// Resolve framebuffer.
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE0);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.supersampledColorTexture);
|
|
|
|
view.gl.uniform1i(blitProgram.uniforms.uSource, 0);
|
|
|
|
view.gl.drawArrays(view.gl.TRIANGLE_STRIP, 0, 4);
|
|
|
|
}
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
level: number;
|
|
|
|
canvasFramebufferSize: Readonly<Size2D>;
|
|
|
|
supersampledFramebufferSize: Readonly<Size2D>;
|
|
|
|
supersampledColorTexture: WebGLTexture;
|
2017-08-15 19:51:26 -04:00
|
|
|
supersampledDepthTexture: WebGLTexture;
|
2017-08-15 18:57:52 -04:00
|
|
|
supersampledFramebuffer: WebGLFramebuffer;
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
class ECAAStrategy implements AntialiasingStrategy {
|
|
|
|
constructor(level: number) {
|
|
|
|
this.framebufferSize = { width: 0, height: 0 };
|
|
|
|
}
|
|
|
|
|
|
|
|
init(view: PathfinderView, framebufferSize: Size2D) {
|
|
|
|
this.framebufferSize = framebufferSize;
|
2017-08-16 19:37:39 -04:00
|
|
|
this.initDirectFramebuffer(view);
|
|
|
|
this.initEdgeDetectFramebuffer(view);
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, null);
|
|
|
|
}
|
2017-08-16 01:09:09 -04:00
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
initDirectFramebuffer(view: PathfinderView) {
|
|
|
|
this.directColorTexture = createFramebufferColorTexture(view.gl, this.framebufferSize);
|
|
|
|
this.directPathIDTexture = createFramebufferColorTexture(view.gl, this.framebufferSize);
|
|
|
|
this.directDepthTexture = createFramebufferDepthTexture(view.gl, this.framebufferSize);
|
|
|
|
this.directFramebuffer =
|
|
|
|
createFramebuffer(view.gl,
|
|
|
|
view.drawBuffersExt,
|
|
|
|
[this.directColorTexture, this.directPathIDTexture],
|
|
|
|
this.directDepthTexture);
|
|
|
|
}
|
2017-08-16 01:09:09 -04:00
|
|
|
|
2017-08-16 19:37:39 -04:00
|
|
|
initEdgeDetectFramebuffer(view: PathfinderView) {
|
|
|
|
this.bgColorTexture = createFramebufferColorTexture(view.gl, this.framebufferSize);
|
|
|
|
this.fgColorTexture = createFramebufferColorTexture(view.gl, this.framebufferSize);
|
|
|
|
this.aaDepthTexture = createFramebufferDepthTexture(view.gl, this.framebufferSize);
|
|
|
|
this.edgeDetectFramebuffer = createFramebuffer(view.gl,
|
|
|
|
view.drawBuffersExt,
|
|
|
|
[this.bgColorTexture, this.fgColorTexture],
|
|
|
|
this.aaDepthTexture);
|
2017-08-16 01:09:09 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
prepare(view: PathfinderView) {
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.directFramebuffer);
|
|
|
|
view.gl.viewport(0, 0, this.framebufferSize.width, this.framebufferSize.height);
|
2017-08-16 19:37:39 -04:00
|
|
|
|
|
|
|
// Clear out the color and depth textures.
|
|
|
|
view.drawBuffersExt.drawBuffersWEBGL([
|
|
|
|
view.drawBuffersExt.COLOR_ATTACHMENT0_WEBGL,
|
|
|
|
view.drawBuffersExt.NONE,
|
|
|
|
]);
|
|
|
|
view.gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
|
|
|
view.gl.clearDepth(0.0);
|
|
|
|
view.gl.depthMask(true);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT | view.gl.DEPTH_BUFFER_BIT);
|
|
|
|
|
|
|
|
// Clear out the path ID texture.
|
|
|
|
view.drawBuffersExt.drawBuffersWEBGL([
|
|
|
|
view.drawBuffersExt.NONE,
|
|
|
|
view.drawBuffersExt.COLOR_ATTACHMENT1_WEBGL,
|
|
|
|
]);
|
|
|
|
view.gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT);
|
|
|
|
|
|
|
|
// Render to both textures.
|
|
|
|
view.drawBuffersExt.drawBuffersWEBGL([
|
|
|
|
view.drawBuffersExt.COLOR_ATTACHMENT0_WEBGL,
|
|
|
|
view.drawBuffersExt.COLOR_ATTACHMENT1_WEBGL,
|
|
|
|
]);
|
2017-08-16 01:09:09 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
resolve(view: PathfinderView, shaders: ShaderMap<PathfinderShaderProgram>) {
|
2017-08-16 19:37:39 -04:00
|
|
|
// Set state for edge detection.
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.edgeDetectFramebuffer);
|
|
|
|
view.gl.viewport(0, 0, this.framebufferSize.width, this.framebufferSize.height);
|
|
|
|
|
|
|
|
view.drawBuffersExt.drawBuffersWEBGL([
|
|
|
|
view.drawBuffersExt.COLOR_ATTACHMENT0_WEBGL,
|
|
|
|
view.drawBuffersExt.COLOR_ATTACHMENT1_WEBGL,
|
|
|
|
]);
|
|
|
|
|
|
|
|
view.gl.depthMask(true);
|
|
|
|
view.gl.depthFunc(view.gl.ALWAYS);
|
|
|
|
view.gl.enable(view.gl.DEPTH_TEST);
|
|
|
|
view.gl.disable(view.gl.BLEND);
|
|
|
|
|
|
|
|
view.gl.clearDepth(0.0);
|
|
|
|
view.gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT | view.gl.DEPTH_BUFFER_BIT);
|
|
|
|
|
|
|
|
// Set up the edge detection VAO.
|
|
|
|
const edgeDetectProgram = shaders.ecaaEdgeDetect;
|
|
|
|
view.gl.useProgram(edgeDetectProgram.program);
|
|
|
|
initQuadVAO(view, edgeDetectProgram.attributes);
|
|
|
|
|
|
|
|
// Perform edge detection.
|
|
|
|
view.gl.uniform2i(edgeDetectProgram.uniforms.uFramebufferSize,
|
|
|
|
this.framebufferSize.width,
|
|
|
|
this.framebufferSize.height);
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE0);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.directColorTexture);
|
|
|
|
view.gl.uniform1i(edgeDetectProgram.uniforms.uColor, 0);
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE1);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.directPathIDTexture);
|
|
|
|
view.gl.uniform1i(edgeDetectProgram.uniforms.uPathID, 1);
|
|
|
|
view.gl.drawArrays(view.gl.TRIANGLE_STRIP, 0, 4);
|
|
|
|
|
|
|
|
// Set state for ECAA resolve.
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, null);
|
|
|
|
view.gl.viewport(0, 0, this.framebufferSize.width, this.framebufferSize.height);
|
|
|
|
view.gl.disable(view.gl.DEPTH_TEST);
|
|
|
|
view.drawBuffersExt.drawBuffersWEBGL([view.gl.BACK]);
|
|
|
|
|
|
|
|
// Set up the ECAA resolve VAO.
|
|
|
|
const resolveProgram = shaders.ecaaResolve;
|
|
|
|
view.gl.useProgram(resolveProgram.program);
|
|
|
|
initQuadVAO(view, resolveProgram.attributes);
|
|
|
|
|
|
|
|
// Perform ECAA resolution.
|
|
|
|
view.gl.uniform2i(resolveProgram.uniforms.uFramebufferSize,
|
|
|
|
this.framebufferSize.width,
|
|
|
|
this.framebufferSize.height);
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE0);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.bgColorTexture);
|
|
|
|
view.gl.uniform1i(resolveProgram.uniforms.uBGColor, 0);
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE1);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.fgColorTexture);
|
|
|
|
view.gl.uniform1i(resolveProgram.uniforms.uFGColor, 1);
|
|
|
|
view.gl.drawArrays(view.gl.TRIANGLE_STRIP, 0, 4);
|
2017-08-16 01:09:09 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
directColorTexture: WebGLTexture;
|
|
|
|
directPathIDTexture: WebGLTexture;
|
|
|
|
directDepthTexture: WebGLTexture;
|
|
|
|
directFramebuffer: WebGLFramebuffer;
|
2017-08-16 19:37:39 -04:00
|
|
|
bgColorTexture: WebGLTexture;
|
|
|
|
fgColorTexture: WebGLTexture;
|
|
|
|
aaDepthTexture: WebGLTexture;
|
|
|
|
edgeDetectFramebuffer: WebGLFramebuffer;
|
2017-08-16 01:09:09 -04:00
|
|
|
framebufferSize: Size2D;
|
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
interface AntialiasingStrategyTable {
|
2017-08-15 18:57:52 -04:00
|
|
|
none: typeof NoAAStrategy;
|
|
|
|
ssaa: typeof SSAAStrategy;
|
2017-08-16 01:09:09 -04:00
|
|
|
ecaa: typeof ECAAStrategy;
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
const ANTIALIASING_STRATEGIES: AntialiasingStrategyTable = {
|
|
|
|
none: NoAAStrategy,
|
|
|
|
ssaa: SSAAStrategy,
|
2017-08-16 01:09:09 -04:00
|
|
|
ecaa: ECAAStrategy,
|
2017-08-15 16:38:54 -04:00
|
|
|
};
|
|
|
|
|
2017-08-08 14:23:30 -04:00
|
|
|
function main() {
|
|
|
|
const controller = new AppController;
|
|
|
|
window.addEventListener('load', () => controller.start(), false);
|
|
|
|
}
|
|
|
|
|
|
|
|
main();
|