2017-08-08 14:23:30 -04:00
|
|
|
// pathfinder/demo/src/index.ts
|
2017-08-18 20:12:58 -04:00
|
|
|
//
|
|
|
|
// Copyright © 2017 Mozilla Foundation
|
2017-08-08 14:23:30 -04:00
|
|
|
|
2017-08-19 19:34:02 -04:00
|
|
|
import * as _ from 'lodash';
|
|
|
|
import * as base64js from 'base64-js';
|
|
|
|
import * as glmatrix from 'gl-matrix';
|
|
|
|
import * as opentype from 'opentype.js';
|
2017-08-08 14:23:30 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
//const TEXT: string = "Lorem ipsum dolor sit amet";
|
|
|
|
const TEXT: string = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
const INITIAL_FONT_SIZE: number = 72.0;
|
2017-08-10 21:38:54 -04:00
|
|
|
|
2017-08-19 01:11:52 -04:00
|
|
|
const SCALE_FACTOR: number = 1.0 / 100.0;
|
|
|
|
|
2017-08-19 12:57:54 -04:00
|
|
|
const TIME_INTERVAL_DELAY: number = 32;
|
|
|
|
|
2017-08-10 21:38:54 -04:00
|
|
|
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-17 15:47:50 -04:00
|
|
|
const B_PATH_INDEX_SIZE: number = 2;
|
|
|
|
|
|
|
|
const B_LOOP_BLINN_DATA_SIZE: number = 4;
|
|
|
|
const B_LOOP_BLINN_DATA_TEX_COORD_OFFSET: number = 0;
|
|
|
|
const B_LOOP_BLINN_DATA_SIGN_OFFSET: number = 2;
|
2017-08-14 19:08:45 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
const B_QUAD_SIZE: number = 4 * 8;
|
|
|
|
const B_QUAD_UPPER_INDICES_OFFSET: number = 0;
|
|
|
|
const B_QUAD_LOWER_INDICES_OFFSET: number = 4 * 4;
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
const ATLAS_SIZE: glmatrix.vec2 = glmatrix.vec2.fromValues(3072, 3072);
|
2017-08-23 16:23:29 -04:00
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
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 22:51:13 -04:00
|
|
|
ecaaCover: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-cover.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-cover.fs.glsl",
|
|
|
|
},
|
2017-08-18 14:44:17 -04:00
|
|
|
ecaaLine: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-line.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-line.fs.glsl",
|
|
|
|
},
|
2017-08-18 20:12:58 -04:00
|
|
|
ecaaCurve: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-curve.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-curve.fs.glsl",
|
|
|
|
},
|
2017-08-24 15:08:58 -04:00
|
|
|
ecaaMonoResolve: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-mono-resolve.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-mono-resolve.fs.glsl",
|
|
|
|
},
|
|
|
|
ecaaMultiResolve: {
|
|
|
|
vertex: "/glsl/gles2/ecaa-multi-resolve.vs.glsl",
|
|
|
|
fragment: "/glsl/gles2/ecaa-multi-resolve.fs.glsl",
|
2017-08-18 14:44:17 -04:00
|
|
|
},
|
2017-08-12 00:26:25 -04:00
|
|
|
};
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface UnlinkedShaderProgram {
|
|
|
|
vertex: WebGLShader;
|
|
|
|
fragment: WebGLShader;
|
|
|
|
}
|
|
|
|
|
2017-08-19 01:11:52 -04:00
|
|
|
type Matrix4D = Float32Array;
|
|
|
|
|
2017-08-19 19:52:14 -04:00
|
|
|
type Rect = glmatrix.vec4;
|
2017-08-19 19:34:02 -04:00
|
|
|
|
2017-08-19 01:11:52 -04:00
|
|
|
interface Point2D {
|
|
|
|
x: number;
|
|
|
|
y: number;
|
|
|
|
}
|
2017-08-14 19:08:45 -04:00
|
|
|
|
2017-08-19 19:52:14 -04:00
|
|
|
type Size2D = glmatrix.vec2;
|
2017-08-15 00:24:58 -04:00
|
|
|
|
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 22:51:13 -04:00
|
|
|
ecaaCover: T;
|
2017-08-18 14:44:17 -04:00
|
|
|
ecaaLine: T;
|
2017-08-18 20:12:58 -04:00
|
|
|
ecaaCurve: T;
|
2017-08-24 15:08:58 -04:00
|
|
|
ecaaMonoResolve: T;
|
|
|
|
ecaaMultiResolve: 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-18 18:17:23 -04:00
|
|
|
interface UpperAndLower<T> {
|
|
|
|
upper: T;
|
|
|
|
lower: T;
|
|
|
|
}
|
|
|
|
|
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-22 21:25:32 -04:00
|
|
|
init(view: PathfinderView): void;
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
// Uploads any mesh data. This is called whenever a new set of meshes is supplied.
|
|
|
|
attachMeshes(view: PathfinderView): void;
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
// This is called whenever the framebuffer has changed.
|
|
|
|
setFramebufferSize(view: PathfinderView, framebufferSize: Size2D): void;
|
|
|
|
|
|
|
|
// Returns the transformation matrix that should be applied when directly rendering.
|
|
|
|
transform(): glmatrix.mat4;
|
|
|
|
|
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-17 23:09:18 -04:00
|
|
|
resolve(view: PathfinderView): void;
|
2017-08-24 14:43:38 -04:00
|
|
|
|
|
|
|
// True if direct rendering should occur.
|
|
|
|
shouldRenderDirect: boolean;
|
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-19 12:57:54 -04:00
|
|
|
type WebGLQuery = any;
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
type WebGLVertexArrayObject = any;
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
const QUAD_POSITIONS: Float32Array = new Float32Array([
|
2017-08-23 22:18:24 -04:00
|
|
|
0.0, 1.0,
|
|
|
|
1.0, 1.0,
|
|
|
|
0.0, 0.0,
|
|
|
|
1.0, 0.0,
|
2017-08-15 18:57:52 -04:00
|
|
|
]);
|
|
|
|
|
|
|
|
const QUAD_TEX_COORDS: Float32Array = new Float32Array([
|
|
|
|
0.0, 1.0,
|
|
|
|
1.0, 1.0,
|
|
|
|
0.0, 0.0,
|
|
|
|
1.0, 0.0,
|
|
|
|
]);
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
const QUAD_ELEMENTS: Uint8Array = new Uint8Array([2, 0, 1, 1, 3, 2]);
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
// `opentype.js` monkey patches
|
|
|
|
|
|
|
|
declare module 'opentype.js' {
|
|
|
|
interface Font {
|
|
|
|
isSupported(): boolean;
|
|
|
|
}
|
|
|
|
interface Glyph {
|
|
|
|
getIndex(): number;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
opentype.Font.prototype.isSupported = function() {
|
|
|
|
return (this as any).supported;
|
|
|
|
}
|
|
|
|
|
|
|
|
opentype.Glyph.prototype.getIndex = function() {
|
|
|
|
return (this as any).index;
|
|
|
|
}
|
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
// 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-25 18:39:13 -04:00
|
|
|
/// 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];
|
|
|
|
}
|
|
|
|
|
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.
|
2017-08-19 19:52:14 -04:00
|
|
|
const zeroes = new Uint8Array(size[0] * size[1] * UINT32_SIZE);
|
2017-08-16 19:37:39 -04:00
|
|
|
const texture = unwrapNull(gl.createTexture());
|
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
|
|
gl.texImage2D(gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
gl.RGBA,
|
2017-08-19 19:52:14 -04:00
|
|
|
size[0],
|
|
|
|
size[1],
|
2017-08-16 19:37:39 -04:00
|
|
|
0,
|
|
|
|
gl.RGBA,
|
|
|
|
gl.UNSIGNED_BYTE,
|
2017-08-19 19:52:14 -04:00
|
|
|
zeroes);
|
2017-08-16 19:37:39 -04:00
|
|
|
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,
|
2017-08-19 19:52:14 -04:00
|
|
|
size[0],
|
|
|
|
size[1],
|
2017-08-16 19:37:39 -04:00
|
|
|
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-17 23:09:18 -04:00
|
|
|
view.gl.bindBuffer(view.gl.ELEMENT_ARRAY_BUFFER, view.quadElementsBuffer);
|
2017-08-16 19:37:39 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
interface Meshes<T> {
|
|
|
|
readonly bQuads: T;
|
|
|
|
readonly bVertexPositions: T;
|
2017-08-17 15:47:50 -04:00
|
|
|
readonly bVertexPathIDs: T;
|
|
|
|
readonly bVertexLoopBlinnData: T;
|
2017-08-14 19:08:45 -04:00
|
|
|
readonly coverInteriorIndices: T;
|
|
|
|
readonly coverCurveIndices: T;
|
|
|
|
readonly edgeUpperLineIndices: T;
|
|
|
|
readonly edgeLowerLineIndices: T;
|
2017-08-18 18:17:23 -04:00
|
|
|
readonly edgeUpperCurveIndices: T;
|
2017-08-14 19:08:45 -04:00
|
|
|
readonly edgeLowerCurveIndices: T;
|
|
|
|
}
|
|
|
|
|
2017-08-17 15:47:50 -04:00
|
|
|
type BufferType = 'ARRAY_BUFFER' | 'ELEMENT_ARRAY_BUFFER';
|
2017-08-14 19:08:45 -04:00
|
|
|
|
|
|
|
const BUFFER_TYPES: Meshes<BufferType> = {
|
2017-08-17 15:47:50 -04:00
|
|
|
bQuads: 'ARRAY_BUFFER',
|
|
|
|
bVertexPositions: 'ARRAY_BUFFER',
|
|
|
|
bVertexPathIDs: 'ARRAY_BUFFER',
|
|
|
|
bVertexLoopBlinnData: 'ARRAY_BUFFER',
|
|
|
|
coverInteriorIndices: 'ELEMENT_ARRAY_BUFFER',
|
|
|
|
coverCurveIndices: 'ELEMENT_ARRAY_BUFFER',
|
2017-08-18 18:17:23 -04:00
|
|
|
edgeUpperLineIndices: 'ARRAY_BUFFER',
|
|
|
|
edgeLowerLineIndices: 'ARRAY_BUFFER',
|
|
|
|
edgeUpperCurveIndices: 'ARRAY_BUFFER',
|
|
|
|
edgeLowerCurveIndices: 'ARRAY_BUFFER',
|
2017-08-14 19:08:45 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
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-18 18:17:23 -04:00
|
|
|
for (const bufferName of Object.keys(BUFFER_TYPES) as Array<keyof Meshes<void>>)
|
2017-08-19 19:34:02 -04:00
|
|
|
this[bufferName] = base64js.toByteArray(meshes[bufferName]).buffer as ArrayBuffer;
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
this.bQuadCount = this.bQuads.byteLength / B_QUAD_SIZE;
|
2017-08-18 18:17:23 -04:00
|
|
|
this.edgeUpperLineIndexCount = this.edgeUpperLineIndices.byteLength / 8;
|
|
|
|
this.edgeLowerLineIndexCount = this.edgeLowerLineIndices.byteLength / 8;
|
|
|
|
this.edgeUpperCurveIndexCount = this.edgeUpperCurveIndices.byteLength / 16;
|
|
|
|
this.edgeLowerCurveIndexCount = this.edgeLowerCurveIndices.byteLength / 16;
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
readonly bQuads: ArrayBuffer;
|
|
|
|
readonly bVertexPositions: ArrayBuffer;
|
2017-08-17 15:47:50 -04:00
|
|
|
readonly bVertexPathIDs: ArrayBuffer;
|
|
|
|
readonly bVertexLoopBlinnData: ArrayBuffer;
|
2017-08-14 19:08:45 -04:00
|
|
|
readonly coverInteriorIndices: ArrayBuffer;
|
|
|
|
readonly coverCurveIndices: ArrayBuffer;
|
|
|
|
readonly edgeUpperLineIndices: ArrayBuffer;
|
|
|
|
readonly edgeLowerLineIndices: ArrayBuffer;
|
2017-08-18 18:17:23 -04:00
|
|
|
readonly edgeUpperCurveIndices: ArrayBuffer;
|
2017-08-14 19:08:45 -04:00
|
|
|
readonly edgeLowerCurveIndices: ArrayBuffer;
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
readonly bQuadCount: number;
|
2017-08-18 18:17:23 -04:00
|
|
|
readonly edgeUpperLineIndexCount: number;
|
|
|
|
readonly edgeLowerLineIndexCount: number;
|
|
|
|
readonly edgeUpperCurveIndexCount: number;
|
|
|
|
readonly edgeLowerCurveIndexCount: number;
|
2017-08-14 19:08:45 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
class PathfinderMeshBuffers implements Meshes<WebGLBuffer> {
|
|
|
|
constructor(gl: WebGLRenderingContext, meshData: PathfinderMeshData) {
|
|
|
|
for (const bufferName of Object.keys(BUFFER_TYPES) as Array<keyof PathfinderMeshBuffers>) {
|
2017-08-17 15:47:50 -04:00
|
|
|
const bufferType = gl[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;
|
2017-08-17 15:47:50 -04:00
|
|
|
readonly bVertexPathIDs: WebGLBuffer;
|
|
|
|
readonly bVertexLoopBlinnData: WebGLBuffer;
|
2017-08-14 19:08:45 -04:00
|
|
|
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 {
|
2017-08-23 16:23:29 -04:00
|
|
|
constructor() {
|
|
|
|
this._atlas = new Atlas;
|
|
|
|
}
|
2017-08-10 21:38:54 -04:00
|
|
|
|
2017-08-08 14:23:30 -04:00
|
|
|
start() {
|
2017-08-22 21:25:32 -04:00
|
|
|
this.fontSize = INITIAL_FONT_SIZE;
|
|
|
|
|
2017-08-19 12:57:54 -04:00
|
|
|
this.fpsLabel = unwrapNull(document.getElementById('pf-fps-label'));
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
const canvas = document.getElementById('pf-canvas') as HTMLCanvasElement;
|
|
|
|
const shaderLoader = new PathfinderShaderLoader;
|
|
|
|
shaderLoader.load();
|
|
|
|
this.view = Promise.all([shaderLoader.common, shaderLoader.shaders]).then(allShaders => {
|
2017-08-19 12:57:54 -04:00
|
|
|
return new PathfinderView(this, canvas, allShaders[0], allShaders[1]);
|
2017-08-17 23:09:18 -04:00
|
|
|
});
|
2017-08-08 14:23:30 -04:00
|
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private 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-24 22:30:53 -04:00
|
|
|
private updateAALevel() {
|
2017-08-15 16:38:54 -04:00
|
|
|
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));
|
2017-08-17 23:09:18 -04:00
|
|
|
this.view.then(view => view.setAntialiasingOptions(aaType, aaLevel));
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private fontLoaded() {
|
2017-08-10 21:38:54 -04:00
|
|
|
this.font = opentype.parse(this.fontData);
|
2017-08-22 21:25:32 -04:00
|
|
|
if (!this.font.isSupported())
|
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-22 21:25:32 -04:00
|
|
|
// Lay out the text.
|
2017-08-25 18:39:13 -04:00
|
|
|
this.textGlyphs = this.font.stringToGlyphs(TEXT).map(glyph => new TextGlyph(glyph));
|
2017-08-19 19:34:02 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
// Determine all glyphs potentially needed.
|
|
|
|
this.uniqueGlyphs = this.textGlyphs.map(textGlyph => textGlyph.glyph);
|
|
|
|
this.uniqueGlyphs.sort((a, b) => a.getIndex() - b.getIndex());
|
|
|
|
this.uniqueGlyphs = _.sortedUniqBy(this.uniqueGlyphs, glyph => glyph.getIndex());
|
2017-08-10 21:38:54 -04:00
|
|
|
|
2017-08-19 19:34:02 -04:00
|
|
|
// Build the partitioning request to the server.
|
2017-08-10 21:38:54 -04:00
|
|
|
const request = {
|
|
|
|
otf: base64js.fromByteArray(new Uint8Array(this.fontData)),
|
|
|
|
fontIndex: 0,
|
2017-08-25 18:39:13 -04:00
|
|
|
glyphs: this.uniqueGlyphs.map(glyph => {
|
|
|
|
const metrics = glyph.getMetrics();
|
2017-08-19 19:34:02 -04:00
|
|
|
return {
|
2017-08-25 18:39:13 -04:00
|
|
|
id: glyph.getIndex(),
|
2017-08-22 21:25:32 -04:00
|
|
|
transform: [1, 0, 0, 1, 0, 0],
|
2017-08-19 19:34:02 -04:00
|
|
|
};
|
|
|
|
}),
|
|
|
|
pointSize: this.font.unitsPerEm,
|
2017-08-10 21:38:54 -04:00
|
|
|
};
|
|
|
|
|
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-24 22:30:53 -04:00
|
|
|
private meshesReceived() {
|
2017-08-17 23:09:18 -04:00
|
|
|
this.view.then(view => {
|
2017-08-25 18:39:13 -04:00
|
|
|
view.attachText();
|
|
|
|
view.uploadPathData(this.uniqueGlyphs.length);
|
2017-08-17 23:09:18 -04:00
|
|
|
view.attachMeshes(this.meshes);
|
|
|
|
})
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
scaleFontSize(scale: number) {
|
|
|
|
this.setFontSize(scale * this.fontSize);
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private setFontSize(newPixelsPerEm: number) {
|
2017-08-22 21:25:32 -04:00
|
|
|
this.fontSize = newPixelsPerEm;
|
2017-08-25 18:39:13 -04:00
|
|
|
this.view.then(view => view.attachText());
|
2017-08-22 21:25:32 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
updateTiming(newTimes: {atlasRendering: number, compositing: number}) {
|
|
|
|
this.fpsLabel.innerHTML =
|
|
|
|
`${newTimes.atlasRendering} ms atlas, ${newTimes.compositing} ms compositing`;
|
2017-08-19 12:57:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
get atlas(): Atlas {
|
|
|
|
return this._atlas;
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private view: Promise<PathfinderView>;
|
|
|
|
private loadFontButton: HTMLInputElement;
|
|
|
|
private aaLevelSelect: HTMLSelectElement;
|
|
|
|
private fpsLabel: HTMLElement;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private fontData: ArrayBuffer;
|
2017-08-25 18:39:13 -04:00
|
|
|
font: opentype.Font;
|
|
|
|
textGlyphs: TextGlyph[];
|
|
|
|
uniqueGlyphs: opentype.Glyph[];
|
2017-08-23 16:23:29 -04:00
|
|
|
|
|
|
|
private _atlas: Atlas;
|
2017-08-25 18:39:13 -04:00
|
|
|
atlasGlyphs: AtlasGlyph[];
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private meshes: PathfinderMeshData;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
/// The font size in pixels per em.
|
|
|
|
fontSize: number;
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
class PathfinderShaderLoader {
|
|
|
|
load() {
|
|
|
|
this.common = window.fetch(COMMON_SHADER_URL).then(response => response.text());
|
|
|
|
|
|
|
|
const shaderKeys = Object.keys(SHADER_URLS) as Array<keyof ShaderMap<string>>;
|
|
|
|
let promises = [];
|
|
|
|
for (const shaderKey of shaderKeys) {
|
|
|
|
promises.push(Promise.all([
|
|
|
|
window.fetch(SHADER_URLS[shaderKey].vertex).then(response => response.text()),
|
|
|
|
window.fetch(SHADER_URLS[shaderKey].fragment).then(response => response.text()),
|
|
|
|
]).then(results => { return { vertex: results[0], fragment: results[1] } }));
|
|
|
|
}
|
|
|
|
|
|
|
|
this.shaders = Promise.all(promises).then(promises => {
|
|
|
|
let shaderMap: Partial<ShaderMap<ShaderProgramSource>> = {};
|
|
|
|
for (let keyIndex = 0; keyIndex < shaderKeys.length; keyIndex++)
|
|
|
|
shaderMap[shaderKeys[keyIndex]] = promises[keyIndex];
|
|
|
|
return shaderMap as ShaderMap<ShaderProgramSource>;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
common: Promise<string>;
|
|
|
|
shaders: Promise<ShaderMap<ShaderProgramSource>>;
|
|
|
|
}
|
|
|
|
|
2017-08-08 14:23:30 -04:00
|
|
|
class PathfinderView {
|
2017-08-19 12:57:54 -04:00
|
|
|
constructor(appController: AppController,
|
|
|
|
canvas: HTMLCanvasElement,
|
2017-08-17 23:09:18 -04:00
|
|
|
commonShaderSource: string,
|
|
|
|
shaderSources: ShaderMap<ShaderProgramSource>) {
|
2017-08-19 12:57:54 -04:00
|
|
|
this.appController = appController;
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
this.translation = glmatrix.vec2.create();
|
2017-08-19 01:11:52 -04:00
|
|
|
|
2017-08-08 14:23:30 -04:00
|
|
|
this.canvas = canvas;
|
2017-08-19 01:11:52 -04:00
|
|
|
this.canvas.addEventListener('wheel', event => this.onWheel(event), false);
|
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-17 23:09:18 -04:00
|
|
|
const shaderSource = this.compileShaders(commonShaderSource, shaderSources);
|
|
|
|
this.shaderPrograms = this.linkShaders(shaderSource);
|
2017-08-12 00:26:25 -04:00
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
this.atlasTransformBuffer = new PathfinderBufferTexture(this.gl, 'uPathTransform');
|
|
|
|
this.pathColorsBufferTexture = new PathfinderBufferTexture(this.gl, 'uPathColors');
|
|
|
|
|
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-22 21:25:32 -04:00
|
|
|
this.antialiasingStrategy.init(this);
|
2017-08-23 16:23:29 -04:00
|
|
|
this.antialiasingStrategy.setFramebufferSize(this, ATLAS_SIZE);
|
2017-08-17 23:09:18 -04:00
|
|
|
if (this.meshData != null)
|
|
|
|
this.antialiasingStrategy.attachMeshes(this);
|
2017-08-15 18:57:52 -04:00
|
|
|
|
|
|
|
this.setDirty();
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:33:58 -04:00
|
|
|
private 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-18 01:47:28 -04:00
|
|
|
this.colorBufferHalfFloatExt = this.gl.getExtension('EXT_color_buffer_half_float');
|
2017-08-17 23:09:18 -04:00
|
|
|
this.instancedArraysExt = this.gl.getExtension('ANGLE_instanced_arrays');
|
2017-08-18 01:47:28 -04:00
|
|
|
this.textureHalfFloatExt = this.gl.getExtension('OES_texture_half_float');
|
2017-08-19 12:57:54 -04:00
|
|
|
this.timerQueryExt = this.gl.getExtension('EXT_disjoint_timer_query');
|
2017-08-17 23:09:18 -04:00
|
|
|
this.vertexArrayObjectExt = this.gl.getExtension('OES_vertex_array_object');
|
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-17 23:09:18 -04:00
|
|
|
this.gl.getExtension('OES_texture_float');
|
2017-08-15 19:51:26 -04:00
|
|
|
this.gl.getExtension('WEBGL_depth_texture');
|
2017-08-15 18:57:52 -04:00
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
// Set up our timer queries for profiling.
|
|
|
|
this.atlasRenderingTimerQuery = this.timerQueryExt.createQueryEXT();
|
|
|
|
this.compositingTimerQuery = this.timerQueryExt.createQueryEXT();
|
2017-08-19 12:57:54 -04:00
|
|
|
|
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-17 23:09:18 -04:00
|
|
|
this.quadElementsBuffer = unwrapNull(this.gl.createBuffer());
|
|
|
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.quadElementsBuffer);
|
|
|
|
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, QUAD_ELEMENTS, this.gl.STATIC_DRAW);
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:33:58 -04:00
|
|
|
private compileShaders(commonSource: string, shaderSources: ShaderMap<ShaderProgramSource>):
|
|
|
|
ShaderMap<UnlinkedShaderProgram> {
|
2017-08-14 19:08:45 -04:00
|
|
|
let shaders: Partial<ShaderMap<Partial<UnlinkedShaderProgram>>> = {};
|
2017-08-17 23:09:18 -04:00
|
|
|
const shaderKeys = Object.keys(SHADER_URLS) as Array<keyof ShaderMap<string>>;
|
|
|
|
|
|
|
|
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 source = shaderSources[shaderKey][typeName];
|
|
|
|
const shader = this.gl.createShader(type);
|
|
|
|
if (shader == null)
|
|
|
|
throw new PathfinderError("Failed to create shader!");
|
|
|
|
|
|
|
|
this.gl.shaderSource(shader, commonSource + "\n#line 1\n" + source);
|
|
|
|
this.gl.compileShader(shader);
|
|
|
|
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-13 16:39:51 -04:00
|
|
|
}
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
if (shaders[shaderKey] == null)
|
|
|
|
shaders[shaderKey] = {};
|
|
|
|
shaders[shaderKey]![typeName] = shader;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
2017-08-17 23:09:18 -04:00
|
|
|
}
|
2017-08-12 13:08:35 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
return shaders as ShaderMap<UnlinkedShaderProgram>;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:33:58 -04:00
|
|
|
private linkShaders(shaders: ShaderMap<UnlinkedShaderProgram>):
|
|
|
|
ShaderMap<PathfinderShaderProgram> {
|
2017-08-17 23:09:18 -04:00
|
|
|
let shaderProgramMap: Partial<ShaderMap<PathfinderShaderProgram>> = {};
|
|
|
|
for (const shaderName of Object.keys(shaders) as Array<keyof ShaderMap<string>>) {
|
|
|
|
shaderProgramMap[shaderName] = new PathfinderShaderProgram(this.gl,
|
|
|
|
shaderName,
|
|
|
|
shaders[shaderName]);
|
|
|
|
}
|
|
|
|
return shaderProgramMap as ShaderMap<PathfinderShaderProgram>;
|
2017-08-12 00:26:25 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 00:24:58 -04:00
|
|
|
uploadPathData(pathCount: number) {
|
2017-08-24 19:23:02 -04:00
|
|
|
const pathColors = new Uint8Array(4 * (pathCount + 1));
|
2017-08-15 00:24:58 -04:00
|
|
|
for (let pathIndex = 0; pathIndex < pathCount; pathIndex++) {
|
|
|
|
for (let channel = 0; channel < 3; channel++)
|
2017-08-24 19:23:02 -04:00
|
|
|
pathColors[(pathIndex + 1) * 4 + channel] = 0x00; // RGB
|
|
|
|
pathColors[(pathIndex + 1) * 4 + 3] = 0xff; // alpha
|
2017-08-15 00:24:58 -04:00
|
|
|
}
|
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
this.pathColorsBufferTexture.upload(this.gl, pathColors);
|
2017-08-15 00:24:58 -04:00
|
|
|
}
|
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
attachMeshes(meshes: PathfinderMeshData) {
|
2017-08-17 23:09:18 -04:00
|
|
|
this.meshData = meshes;
|
2017-08-14 19:08:45 -04:00
|
|
|
this.meshes = new PathfinderMeshBuffers(this.gl, meshes);
|
2017-08-17 23:09:18 -04:00
|
|
|
this.antialiasingStrategy.attachMeshes(this);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
this.setDirty();
|
|
|
|
}
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
/// Lays out glyphs on the canvas.
|
|
|
|
private layoutGlyphs() {
|
|
|
|
const textGlyphs = this.appController.textGlyphs;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
this.pixelsPerUnit = this.appController.fontSize / this.appController.font.unitsPerEm;
|
|
|
|
|
|
|
|
this.textGlyphCount = textGlyphs.length;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
const glyphPositions = new Float32Array(textGlyphs.length * 8);
|
|
|
|
const glyphIndices = new Uint32Array(textGlyphs.length * 6);
|
|
|
|
|
|
|
|
const currentPosition = glmatrix.vec2.create();
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
for (let glyphIndex = 0; glyphIndex < textGlyphs.length; glyphIndex++) {
|
|
|
|
const textGlyph = textGlyphs[glyphIndex];
|
|
|
|
const glyphMetrics = textGlyph.glyph.getMetrics();
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
// Determine the atlas size.
|
|
|
|
const atlasSize = glmatrix.vec2.fromValues(glyphMetrics.xMax - glyphMetrics.xMin,
|
|
|
|
glyphMetrics.yMax - glyphMetrics.yMin);
|
|
|
|
glmatrix.vec2.scale(atlasSize, atlasSize, this.pixelsPerUnit);
|
|
|
|
glmatrix.vec2.ceil(atlasSize, atlasSize);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
// Set positions.
|
2017-08-25 15:20:36 -04:00
|
|
|
const textGlyphBL = glmatrix.vec2.create(), textGlyphTR = glmatrix.vec2.create();
|
2017-08-25 18:39:13 -04:00
|
|
|
const offset = glmatrix.vec2.fromValues(glyphMetrics.leftSideBearing,
|
|
|
|
glyphMetrics.yMin);
|
2017-08-25 15:20:36 -04:00
|
|
|
glmatrix.vec2.scale(offset, offset, this.pixelsPerUnit);
|
|
|
|
glmatrix.vec2.add(textGlyphBL, currentPosition, offset);
|
|
|
|
glmatrix.vec2.round(textGlyphBL, textGlyphBL);
|
2017-08-25 18:39:13 -04:00
|
|
|
glmatrix.vec2.add(textGlyphTR, textGlyphBL, atlasSize);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
glyphPositions.set([
|
|
|
|
textGlyphBL[0], textGlyphTR[1],
|
|
|
|
textGlyphTR[0], textGlyphTR[1],
|
|
|
|
textGlyphBL[0], textGlyphBL[1],
|
|
|
|
textGlyphTR[0], textGlyphBL[1],
|
2017-08-25 18:39:13 -04:00
|
|
|
], glyphIndex * 8);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
textGlyph.canvasRect = glmatrix.vec4.fromValues(textGlyphBL[0], textGlyphBL[1],
|
|
|
|
textGlyphTR[0], textGlyphTR[1]);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
// Set indices.
|
2017-08-25 18:39:13 -04:00
|
|
|
glyphIndices.set(QUAD_ELEMENTS.map(elementIndex => elementIndex + 4 * glyphIndex),
|
|
|
|
glyphIndex * 6);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
// Advance.
|
2017-08-25 18:39:13 -04:00
|
|
|
currentPosition[0] += textGlyph.glyph.advanceWidth * this.pixelsPerUnit;
|
2017-08-22 21:25:32 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
this.glyphPositionsBuffer = unwrapNull(this.gl.createBuffer());
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glyphPositionsBuffer);
|
|
|
|
this.gl.bufferData(this.gl.ARRAY_BUFFER, glyphPositions, this.gl.STATIC_DRAW);
|
|
|
|
this.glyphElementsBuffer = unwrapNull(this.gl.createBuffer());
|
|
|
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.glyphElementsBuffer);
|
|
|
|
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, glyphIndices, this.gl.STATIC_DRAW);
|
2017-08-14 19:08:45 -04:00
|
|
|
}
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
private buildAtlasGlyphs() {
|
|
|
|
const textGlyphs = this.appController.textGlyphs;
|
|
|
|
|
|
|
|
// Only build glyphs in view.
|
|
|
|
const canvasRect = glmatrix.vec4.fromValues(-this.translation[0],
|
|
|
|
-this.translation[1],
|
|
|
|
-this.translation[0] + this.canvas.width,
|
|
|
|
-this.translation[1] + this.canvas.height);
|
|
|
|
|
|
|
|
let atlasGlyphs =
|
|
|
|
textGlyphs.filter(textGlyph => rectsIntersect(textGlyph.canvasRect, canvasRect))
|
|
|
|
.map(textGlyph => new AtlasGlyph(textGlyph.glyph));
|
|
|
|
atlasGlyphs.sort((a, b) => a.index - b.index);
|
|
|
|
atlasGlyphs = _.sortedUniqBy(atlasGlyphs, glyph => glyph.index);
|
|
|
|
this.appController.atlasGlyphs = atlasGlyphs;
|
|
|
|
|
|
|
|
const fontSize = this.appController.fontSize;
|
|
|
|
const unitsPerEm = this.appController.font.unitsPerEm;
|
|
|
|
|
|
|
|
this.appController.atlas.layoutGlyphs(atlasGlyphs, fontSize, unitsPerEm);
|
|
|
|
|
|
|
|
const uniqueGlyphIndices = this.appController.uniqueGlyphs.map(glyph => glyph.getIndex());
|
|
|
|
uniqueGlyphIndices.sort((a, b) => a - b);
|
|
|
|
|
|
|
|
// TODO(pcwalton): Regenerate the IBOs to include only the glyphs we care about.
|
|
|
|
const transforms = new Float32Array((this.appController.uniqueGlyphs.length + 1) * 4);
|
|
|
|
for (let glyphIndex = 0; glyphIndex < atlasGlyphs.length; glyphIndex++) {
|
|
|
|
const glyph = atlasGlyphs[glyphIndex];
|
|
|
|
|
|
|
|
let pathID = _.sortedIndexOf(uniqueGlyphIndices, glyph.index);
|
|
|
|
assert(pathID >= 0, "No path ID!");
|
|
|
|
pathID++;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
const atlasLocation = glyph.atlasRect;
|
|
|
|
const metrics = glyph.metrics;
|
2017-08-22 21:25:32 -04:00
|
|
|
const left = metrics.xMin * this.pixelsPerUnit;
|
|
|
|
const bottom = metrics.yMin * this.pixelsPerUnit;
|
2017-08-25 18:39:13 -04:00
|
|
|
|
|
|
|
transforms[pathID * 4 + 0] = this.pixelsPerUnit;
|
|
|
|
transforms[pathID * 4 + 1] = this.pixelsPerUnit;
|
|
|
|
transforms[pathID * 4 + 2] = atlasLocation[0] - left;
|
|
|
|
transforms[pathID * 4 + 3] = atlasLocation[1] - bottom;
|
|
|
|
}
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
this.atlasTransformBuffer.upload(this.gl, transforms);
|
2017-08-25 18:39:13 -04:00
|
|
|
}
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
private createAtlasFramebuffer() {
|
|
|
|
const atlasColorTexture = this.appController.atlas.ensureTexture(this.gl);
|
|
|
|
this.atlasDepthTexture = createFramebufferDepthTexture(this.gl, ATLAS_SIZE);
|
|
|
|
this.atlasFramebuffer = createFramebuffer(this.gl,
|
|
|
|
this.drawBuffersExt,
|
|
|
|
[atlasColorTexture],
|
|
|
|
this.atlasDepthTexture);
|
|
|
|
|
|
|
|
// Allow the antialiasing strategy to set up framebuffers as necessary.
|
|
|
|
this.antialiasingStrategy.setFramebufferSize(this, ATLAS_SIZE);
|
|
|
|
}
|
|
|
|
|
|
|
|
private setGlyphTexCoords() {
|
|
|
|
const textGlyphs = this.appController.textGlyphs;
|
|
|
|
const atlasGlyphs = this.appController.atlasGlyphs;
|
|
|
|
|
|
|
|
const atlasGlyphIndices = atlasGlyphs.map(atlasGlyph => atlasGlyph.index);
|
|
|
|
|
|
|
|
const glyphTexCoords = new Float32Array(textGlyphs.length * 8);
|
|
|
|
|
|
|
|
const currentPosition = glmatrix.vec2.create();
|
|
|
|
|
|
|
|
for (let textGlyphIndex = 0; textGlyphIndex < textGlyphs.length; textGlyphIndex++) {
|
|
|
|
const textGlyph = textGlyphs[textGlyphIndex];
|
|
|
|
const textGlyphMetrics = textGlyph.glyph.getMetrics();
|
|
|
|
|
|
|
|
let atlasGlyphIndex = _.sortedIndexOf(atlasGlyphIndices, textGlyph.glyph.getIndex());
|
|
|
|
if (atlasGlyphIndex < 0)
|
|
|
|
continue;
|
|
|
|
|
|
|
|
// Set texture coordinates.
|
|
|
|
const atlasGlyph = atlasGlyphs[atlasGlyphIndex];
|
|
|
|
const atlasGlyphRect = atlasGlyph.atlasRect;
|
|
|
|
const atlasGlyphBL = atlasGlyphRect.slice(0, 2) as glmatrix.vec2;
|
|
|
|
const atlasGlyphTR = atlasGlyphRect.slice(2, 4) as glmatrix.vec2;
|
|
|
|
glmatrix.vec2.div(atlasGlyphBL, atlasGlyphBL, ATLAS_SIZE);
|
|
|
|
glmatrix.vec2.div(atlasGlyphTR, atlasGlyphTR, ATLAS_SIZE);
|
|
|
|
|
|
|
|
glyphTexCoords.set([
|
|
|
|
atlasGlyphBL[0], atlasGlyphTR[1],
|
|
|
|
atlasGlyphTR[0], atlasGlyphTR[1],
|
|
|
|
atlasGlyphBL[0], atlasGlyphBL[1],
|
|
|
|
atlasGlyphTR[0], atlasGlyphBL[1],
|
|
|
|
], textGlyphIndex * 8);
|
2017-08-23 16:23:29 -04:00
|
|
|
}
|
2017-08-22 21:25:32 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
this.glyphTexCoordsBuffer = unwrapNull(this.gl.createBuffer());
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glyphTexCoordsBuffer);
|
|
|
|
this.gl.bufferData(this.gl.ARRAY_BUFFER, glyphTexCoords, this.gl.STATIC_DRAW);
|
|
|
|
}
|
|
|
|
|
|
|
|
attachText() {
|
|
|
|
if (this.atlasFramebuffer == null)
|
|
|
|
this.createAtlasFramebuffer();
|
|
|
|
this.layoutGlyphs();
|
|
|
|
|
|
|
|
this.rebuildAtlasIfNecessary();
|
|
|
|
}
|
|
|
|
|
|
|
|
private rebuildAtlasIfNecessary() {
|
|
|
|
this.buildAtlasGlyphs();
|
|
|
|
this.setGlyphTexCoords();
|
|
|
|
this.setDirty();
|
2017-08-22 21:25:32 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private setDirty() {
|
2017-08-14 19:08:45 -04:00
|
|
|
if (this.dirty)
|
|
|
|
return;
|
|
|
|
this.dirty = true;
|
|
|
|
window.requestAnimationFrame(() => this.redraw());
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private onWheel(event: WheelEvent) {
|
2017-08-22 21:25:32 -04:00
|
|
|
event.preventDefault();
|
|
|
|
|
2017-08-19 01:11:52 -04:00
|
|
|
if (event.ctrlKey) {
|
|
|
|
// Zoom event: see https://developer.mozilla.org/en-US/docs/Web/Events/wheel
|
2017-08-24 16:34:45 -04:00
|
|
|
const mouseLocation = glmatrix.vec2.fromValues(event.clientX, event.clientY);
|
|
|
|
const canvasLocation = this.canvas.getBoundingClientRect();
|
|
|
|
mouseLocation[0] -= canvasLocation.left;
|
|
|
|
mouseLocation[1] = canvasLocation.bottom - mouseLocation[1];
|
|
|
|
glmatrix.vec2.scale(mouseLocation, mouseLocation, window.devicePixelRatio);
|
|
|
|
|
|
|
|
const absoluteTranslation = glmatrix.vec2.create();
|
|
|
|
glmatrix.vec2.sub(absoluteTranslation, this.translation, mouseLocation);
|
|
|
|
glmatrix.vec2.scale(absoluteTranslation,
|
|
|
|
absoluteTranslation,
|
|
|
|
1.0 / this.appController.fontSize);
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
const scale = 1.0 - event.deltaY * window.devicePixelRatio * SCALE_FACTOR;
|
|
|
|
this.appController.scaleFontSize(scale);
|
2017-08-24 16:34:45 -04:00
|
|
|
|
|
|
|
glmatrix.vec2.scale(absoluteTranslation,
|
|
|
|
absoluteTranslation,
|
|
|
|
this.appController.fontSize);
|
|
|
|
glmatrix.vec2.add(this.translation, absoluteTranslation, mouseLocation);
|
2017-08-22 21:25:32 -04:00
|
|
|
return;
|
2017-08-19 01:11:52 -04:00
|
|
|
}
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
// Pan event.
|
|
|
|
const delta = glmatrix.vec2.fromValues(-event.deltaX, event.deltaY);
|
|
|
|
glmatrix.vec2.scale(delta, delta, window.devicePixelRatio);
|
|
|
|
glmatrix.vec2.add(this.translation, this.translation, delta);
|
2017-08-25 18:39:13 -04:00
|
|
|
|
|
|
|
this.rebuildAtlasIfNecessary();
|
2017-08-19 01:11:52 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private 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
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
const canvasSize = new Float32Array([width, height]) as glmatrix.vec2;
|
|
|
|
glmatrix.vec2.scale(canvasSize, canvasSize, devicePixelRatio);
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
this.canvas.style.width = width + 'px';
|
|
|
|
this.canvas.style.height = height + 'px';
|
2017-08-22 21:25:32 -04:00
|
|
|
this.canvas.width = canvasSize[0];
|
|
|
|
this.canvas.height = canvasSize[1];
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
this.antialiasingStrategy.init(this);
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
this.setDirty();
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private redraw() {
|
2017-08-17 23:09:18 -04:00
|
|
|
if (this.meshes == null) {
|
|
|
|
this.dirty = false;
|
|
|
|
return;
|
|
|
|
}
|
2017-08-14 19:08:45 -04:00
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
// Start timing rendering.
|
|
|
|
if (this.timerQueryPollInterval == null) {
|
|
|
|
this.timerQueryExt.beginQueryEXT(this.timerQueryExt.TIME_ELAPSED_EXT,
|
|
|
|
this.atlasRenderingTimerQuery);
|
|
|
|
}
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
// Prepare for direct rendering.
|
|
|
|
this.antialiasingStrategy.prepare(this);
|
2017-08-15 18:57:52 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
// Perform direct rendering (Loop-Blinn).
|
2017-08-24 14:43:38 -04:00
|
|
|
if (this.antialiasingStrategy.shouldRenderDirect)
|
|
|
|
this.renderDirect();
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
// Antialias.
|
|
|
|
this.antialiasingStrategy.resolve(this);
|
2017-08-14 19:08:45 -04:00
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
// End the timer, and start a new one.
|
|
|
|
if (this.timerQueryPollInterval == null) {
|
|
|
|
this.timerQueryExt.endQueryEXT(this.timerQueryExt.TIME_ELAPSED_EXT);
|
|
|
|
this.timerQueryExt.beginQueryEXT(this.timerQueryExt.TIME_ELAPSED_EXT,
|
|
|
|
this.compositingTimerQuery);
|
|
|
|
}
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
// Draw the glyphs with the resolved atlas to the default framebuffer.
|
|
|
|
this.composite();
|
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
// Finish timing, clear dirty bit and finish.
|
|
|
|
this.finishTiming();
|
2017-08-17 23:09:18 -04:00
|
|
|
this.dirty = false;
|
2017-08-08 14:23:30 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private finishTiming() {
|
2017-08-19 12:57:54 -04:00
|
|
|
if (this.timerQueryPollInterval != null)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.timerQueryExt.endQueryEXT(this.timerQueryExt.TIME_ELAPSED_EXT);
|
|
|
|
|
|
|
|
this.timerQueryPollInterval = window.setInterval(() => {
|
2017-08-24 19:18:26 -04:00
|
|
|
for (const queryName of ['atlasRenderingTimerQuery', 'compositingTimerQuery'] as
|
|
|
|
Array<'atlasRenderingTimerQuery' | 'compositingTimerQuery'>) {
|
|
|
|
if (this.timerQueryExt.getQueryObjectEXT(this[queryName],
|
|
|
|
this.timerQueryExt
|
|
|
|
.QUERY_RESULT_AVAILABLE_EXT) == 0) {
|
|
|
|
return;
|
|
|
|
}
|
2017-08-19 12:57:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
const atlasRenderingTime =
|
|
|
|
this.timerQueryExt.getQueryObjectEXT(this.atlasRenderingTimerQuery,
|
2017-08-19 12:57:54 -04:00
|
|
|
this.timerQueryExt.QUERY_RESULT_EXT);
|
2017-08-24 19:18:26 -04:00
|
|
|
const compositingTime =
|
|
|
|
this.timerQueryExt.getQueryObjectEXT(this.compositingTimerQuery,
|
|
|
|
this.timerQueryExt.QUERY_RESULT_EXT);
|
|
|
|
this.appController.updateTiming({
|
|
|
|
atlasRendering: atlasRenderingTime / 1000000.0,
|
|
|
|
compositing: compositingTime / 1000000.0,
|
|
|
|
});
|
2017-08-19 12:57:54 -04:00
|
|
|
|
|
|
|
window.clearInterval(this.timerQueryPollInterval!);
|
|
|
|
this.timerQueryPollInterval = null;
|
|
|
|
}, TIME_INTERVAL_DELAY);
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private setTransformUniform(uniforms: UniformMap) {
|
2017-08-22 21:25:32 -04:00
|
|
|
const transform = this.antialiasingStrategy.transform();
|
|
|
|
this.gl.uniformMatrix4fv(uniforms.uTransform, false, this.antialiasingStrategy.transform());
|
2017-08-18 23:23:45 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
setFramebufferSizeUniform(uniforms: UniformMap) {
|
|
|
|
const currentViewport = this.gl.getParameter(this.gl.VIEWPORT);
|
|
|
|
this.gl.uniform2i(uniforms.uFramebufferSize, currentViewport[2], currentViewport[3]);
|
|
|
|
}
|
|
|
|
|
2017-08-23 22:18:24 -04:00
|
|
|
setIdentityTexScaleUniform(uniforms: UniformMap) {
|
|
|
|
this.gl.uniform2f(uniforms.uTexScale, 1.0, 1.0);
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private get usedSizeFactor(): glmatrix.vec2 {
|
2017-08-23 22:18:24 -04:00
|
|
|
const usedSize = glmatrix.vec2.create();
|
|
|
|
glmatrix.vec2.div(usedSize, this.appController.atlas.usedSize, ATLAS_SIZE);
|
|
|
|
return usedSize;
|
|
|
|
}
|
|
|
|
|
|
|
|
setTransformSTAndTexScaleUniformsForAtlas(uniforms: UniformMap) {
|
2017-08-24 22:30:53 -04:00
|
|
|
const usedSize = this.usedSizeFactor;
|
2017-08-23 22:18:24 -04:00
|
|
|
this.gl.uniform4f(uniforms.uTransformST, 2.0 * usedSize[0], 2.0 * usedSize[1], -1.0, -1.0);
|
|
|
|
this.gl.uniform2f(uniforms.uTexScale, usedSize[0], usedSize[1]);
|
|
|
|
}
|
|
|
|
|
|
|
|
setTransformAndTexScaleUniformsForAtlas(uniforms: UniformMap) {
|
2017-08-24 22:30:53 -04:00
|
|
|
const usedSize = this.usedSizeFactor;
|
2017-08-23 22:18:24 -04:00
|
|
|
|
|
|
|
const transform = glmatrix.mat4.create();
|
|
|
|
glmatrix.mat4.fromTranslation(transform, [-1.0, -1.0, 0.0]);
|
|
|
|
glmatrix.mat4.scale(transform, transform, [2.0 * usedSize[0], 2.0 * usedSize[1], 1.0]);
|
|
|
|
this.gl.uniformMatrix4fv(uniforms.uTransform, false, transform);
|
|
|
|
|
|
|
|
this.gl.uniform2f(uniforms.uTexScale, usedSize[0], usedSize[1]);
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private renderDirect() {
|
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.
|
2017-08-17 23:09:18 -04:00
|
|
|
const directInteriorProgram = this.shaderPrograms.directInterior;
|
2017-08-15 16:38:54 -04:00
|
|
|
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);
|
2017-08-17 15:47:50 -04:00
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexPathIDs);
|
2017-08-16 01:09:09 -04:00
|
|
|
this.gl.vertexAttribPointer(directInteriorProgram.attributes.aPathID,
|
2017-08-15 16:38:54 -04:00
|
|
|
1,
|
2017-08-17 15:47:50 -04:00
|
|
|
this.gl.UNSIGNED_SHORT,
|
2017-08-16 01:09:09 -04:00
|
|
|
false,
|
2017-08-17 15:47:50 -04:00
|
|
|
0,
|
|
|
|
0);
|
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.
|
2017-08-18 23:23:45 -04:00
|
|
|
this.setTransformUniform(directInteriorProgram.uniforms);
|
|
|
|
this.setFramebufferSizeUniform(directInteriorProgram.uniforms);
|
|
|
|
this.pathColorsBufferTexture.bind(this.gl, directInteriorProgram.uniforms, 0);
|
2017-08-22 21:25:32 -04:00
|
|
|
this.atlasTransformBuffer.bind(this.gl, directInteriorProgram.uniforms, 1);
|
2017-08-15 16:38:54 -04:00
|
|
|
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-17 23:09:18 -04:00
|
|
|
const directCurveProgram = this.shaderPrograms.directCurve;
|
2017-08-15 16:38:54 -04:00
|
|
|
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);
|
2017-08-17 15:47:50 -04:00
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexPathIDs);
|
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aPathID,
|
|
|
|
1,
|
|
|
|
this.gl.UNSIGNED_SHORT,
|
|
|
|
false,
|
|
|
|
0,
|
|
|
|
0);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexLoopBlinnData);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aTexCoord,
|
|
|
|
2,
|
|
|
|
this.gl.UNSIGNED_BYTE,
|
|
|
|
false,
|
2017-08-17 15:47:50 -04:00
|
|
|
B_LOOP_BLINN_DATA_SIZE,
|
|
|
|
B_LOOP_BLINN_DATA_TEX_COORD_OFFSET);
|
2017-08-15 16:38:54 -04:00
|
|
|
this.gl.vertexAttribPointer(directCurveProgram.attributes.aSign,
|
|
|
|
1,
|
|
|
|
this.gl.BYTE,
|
|
|
|
false,
|
2017-08-17 15:47:50 -04:00
|
|
|
B_LOOP_BLINN_DATA_SIZE,
|
|
|
|
B_LOOP_BLINN_DATA_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.
|
2017-08-18 23:23:45 -04:00
|
|
|
this.setTransformUniform(directCurveProgram.uniforms);
|
|
|
|
this.setFramebufferSizeUniform(directCurveProgram.uniforms);
|
|
|
|
this.pathColorsBufferTexture.bind(this.gl, directCurveProgram.uniforms, 0);
|
2017-08-22 21:25:32 -04:00
|
|
|
this.atlasTransformBuffer.bind(this.gl, directCurveProgram.uniforms, 1);
|
2017-08-15 16:38:54 -04:00
|
|
|
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-24 22:30:53 -04:00
|
|
|
private composite() {
|
2017-08-22 21:25:32 -04:00
|
|
|
// Set up composite state.
|
|
|
|
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
|
|
|
|
this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
this.gl.disable(this.gl.DEPTH_TEST);
|
|
|
|
this.gl.disable(this.gl.BLEND);
|
2017-08-24 19:18:26 -04:00
|
|
|
this.gl.disable(this.gl.SCISSOR_TEST);
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
// Clear.
|
|
|
|
this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
|
|
|
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
|
|
|
|
|
|
|
|
// Set up the composite VAO.
|
|
|
|
const blitProgram = this.shaderPrograms.blit;
|
|
|
|
const attributes = blitProgram.attributes;
|
|
|
|
this.gl.useProgram(blitProgram.program);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glyphPositionsBuffer);
|
|
|
|
this.gl.vertexAttribPointer(attributes.aPosition, 2, this.gl.FLOAT, false, 0, 0);
|
|
|
|
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glyphTexCoordsBuffer);
|
|
|
|
this.gl.vertexAttribPointer(attributes.aTexCoord, 2, this.gl.FLOAT, false, 0, 0);
|
|
|
|
this.gl.enableVertexAttribArray(attributes.aPosition);
|
|
|
|
this.gl.enableVertexAttribArray(attributes.aTexCoord);
|
|
|
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.glyphElementsBuffer);
|
|
|
|
|
|
|
|
// Create the transform.
|
|
|
|
const transform = glmatrix.mat4.create();
|
|
|
|
glmatrix.mat4.fromTranslation(transform, [-1.0, -1.0, 0.0]);
|
|
|
|
glmatrix.mat4.scale(transform,
|
|
|
|
transform,
|
|
|
|
[2.0 / this.canvas.width, 2.0 / this.canvas.height, 1.0]);
|
|
|
|
glmatrix.mat4.translate(transform,
|
|
|
|
transform,
|
|
|
|
[this.translation[0], this.translation[1], 0.0]);
|
|
|
|
|
|
|
|
// Blit.
|
|
|
|
this.gl.uniformMatrix4fv(blitProgram.uniforms.uTransform, false, transform);
|
|
|
|
this.gl.activeTexture(this.gl.TEXTURE0);
|
2017-08-23 16:23:29 -04:00
|
|
|
this.gl.bindTexture(this.gl.TEXTURE_2D, this.appController.atlas.ensureTexture(this.gl));
|
2017-08-22 21:25:32 -04:00
|
|
|
this.gl.uniform1i(blitProgram.uniforms.uSource, 0);
|
2017-08-23 22:18:24 -04:00
|
|
|
this.setIdentityTexScaleUniform(blitProgram.uniforms);
|
2017-08-22 21:25:32 -04:00
|
|
|
this.gl.drawElements(this.gl.TRIANGLES, this.textGlyphCount * 6, this.gl.UNSIGNED_INT, 0);
|
|
|
|
}
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
get bgColor(): glmatrix.vec4 {
|
|
|
|
return glmatrix.vec4.fromValues(1.0, 1.0, 1.0, 1.0);
|
|
|
|
}
|
|
|
|
|
|
|
|
get fgColor(): glmatrix.vec4 {
|
|
|
|
return glmatrix.vec4.fromValues(0.0, 0.0, 0.0, 1.0);
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private canvas: HTMLCanvasElement;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-12 00:26:25 -04:00
|
|
|
gl: WebGLRenderingContext;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private colorBufferHalfFloatExt: any;
|
2017-08-16 01:09:09 -04:00
|
|
|
drawBuffersExt: any;
|
2017-08-17 23:09:18 -04:00
|
|
|
instancedArraysExt: any;
|
2017-08-18 01:47:28 -04:00
|
|
|
textureHalfFloatExt: any;
|
2017-08-24 22:30:53 -04:00
|
|
|
private timerQueryExt: any;
|
2017-08-17 23:09:18 -04:00
|
|
|
vertexArrayObjectExt: any;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private antialiasingStrategy: AntialiasingStrategy;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
shaderPrograms: ShaderMap<PathfinderShaderProgram>;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-14 19:08:45 -04:00
|
|
|
meshes: PathfinderMeshBuffers;
|
2017-08-17 23:09:18 -04:00
|
|
|
meshData: PathfinderMeshData;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private atlasRenderingTimerQuery: WebGLQuery;
|
|
|
|
private compositingTimerQuery: WebGLQuery;
|
|
|
|
private timerQueryPollInterval: number | null;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private pathColorsBufferTexture: PathfinderBufferTexture;
|
2017-08-19 12:57:54 -04:00
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
quadPositionsBuffer: WebGLBuffer;
|
|
|
|
quadTexCoordsBuffer: WebGLBuffer;
|
2017-08-17 23:09:18 -04:00
|
|
|
quadElementsBuffer: WebGLBuffer;
|
2017-08-19 01:11:52 -04:00
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private translation: glmatrix.vec2;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
atlasFramebuffer: WebGLFramebuffer;
|
|
|
|
atlasDepthTexture: WebGLTexture;
|
|
|
|
|
2017-08-24 22:33:58 -04:00
|
|
|
private pixelsPerUnit: number;
|
|
|
|
private textGlyphCount: number;
|
2017-08-22 21:25:32 -04:00
|
|
|
|
|
|
|
glyphPositionsBuffer: WebGLBuffer;
|
|
|
|
glyphTexCoordsBuffer: WebGLBuffer;
|
|
|
|
glyphElementsBuffer: WebGLBuffer;
|
|
|
|
|
|
|
|
atlasTransformBuffer: PathfinderBufferTexture;
|
2017-08-19 01:11:52 -04:00
|
|
|
|
2017-08-19 12:57:54 -04:00
|
|
|
appController: AppController;
|
|
|
|
|
2017-08-24 22:33:58 -04:00
|
|
|
private 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 {
|
2017-08-23 16:23:29 -04:00
|
|
|
constructor(gl: WebGLRenderingContext, uniformName: string) {
|
|
|
|
this.texture = expectNotNull(gl.createTexture(), "Failed to create buffer texture!");
|
|
|
|
this.size = glmatrix.vec2.create();
|
|
|
|
this.capacity = glmatrix.vec2.create();
|
2017-08-18 23:23:45 -04:00
|
|
|
this.uniformName = uniformName;
|
2017-08-23 16:23:29 -04:00
|
|
|
this.glType = 0;
|
|
|
|
}
|
2017-08-18 23:23:45 -04:00
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
upload(gl: WebGLRenderingContext, data: Float32Array | Uint8Array) {
|
2017-08-15 00:24:58 -04:00
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
2017-08-23 16:23:29 -04:00
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
const glType = data instanceof Float32Array ? gl.FLOAT : gl.UNSIGNED_BYTE;
|
2017-08-23 16:23:29 -04:00
|
|
|
const area = Math.ceil(data.length / 4);
|
|
|
|
if (glType != this.glType || area > this.capacityArea) {
|
|
|
|
const width = Math.ceil(Math.sqrt(area));
|
|
|
|
const height = Math.ceil(area / width);
|
|
|
|
this.size = glmatrix.vec2.fromValues(width, height);
|
|
|
|
this.capacity = this.size;
|
|
|
|
this.glType = glType;
|
|
|
|
|
|
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, glType, null);
|
|
|
|
setTextureParameters(gl, gl.NEAREST);
|
|
|
|
}
|
2017-08-17 23:09:18 -04:00
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
const mainDimensions = glmatrix.vec4.fromValues(0,
|
|
|
|
0,
|
|
|
|
this.capacity[0],
|
|
|
|
Math.floor(area / this.capacity[0]));
|
|
|
|
const remainderDimensions = glmatrix.vec4.fromValues(0,
|
|
|
|
mainDimensions[3],
|
|
|
|
area % this.capacity[0],
|
|
|
|
1);
|
|
|
|
const splitIndex = mainDimensions[2] * mainDimensions[3] * 4;
|
|
|
|
|
|
|
|
if (mainDimensions[2] > 0 && mainDimensions[3] > 0) {
|
|
|
|
gl.texSubImage2D(gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
mainDimensions[0],
|
|
|
|
mainDimensions[1],
|
|
|
|
mainDimensions[2],
|
|
|
|
mainDimensions[3],
|
|
|
|
gl.RGBA,
|
|
|
|
this.glType,
|
|
|
|
data.slice(0, splitIndex));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (remainderDimensions[2] > 0) {
|
2017-08-23 22:18:24 -04:00
|
|
|
// Round data up to a multiple of 4 elements if necessary.
|
2017-08-23 16:23:29 -04:00
|
|
|
let remainderLength = data.length - splitIndex;
|
|
|
|
let remainder: Float32Array | Uint8Array;
|
|
|
|
if (remainderLength % 4 == 0) {
|
|
|
|
remainder = data.slice(splitIndex);
|
|
|
|
} else {
|
|
|
|
remainderLength += 4 - remainderLength % 4;
|
|
|
|
remainder = new (data.constructor as any)(remainderLength);
|
|
|
|
remainder.set(data.slice(splitIndex));
|
|
|
|
}
|
|
|
|
|
|
|
|
gl.texSubImage2D(gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
remainderDimensions[0],
|
|
|
|
remainderDimensions[1],
|
|
|
|
remainderDimensions[2],
|
|
|
|
remainderDimensions[3],
|
|
|
|
gl.RGBA,
|
|
|
|
this.glType,
|
|
|
|
remainder);
|
|
|
|
}
|
2017-08-15 00:24:58 -04:00
|
|
|
}
|
|
|
|
|
2017-08-18 23:23:45 -04:00
|
|
|
bind(gl: WebGLRenderingContext, uniforms: UniformMap, textureUnit: number) {
|
|
|
|
gl.activeTexture(gl.TEXTURE0 + textureUnit);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, this.texture);
|
2017-08-23 16:23:29 -04:00
|
|
|
gl.uniform2i(uniforms[`${this.uniformName}Dimensions`],
|
|
|
|
this.capacity[0],
|
|
|
|
this.capacity[1]);
|
2017-08-18 23:23:45 -04:00
|
|
|
gl.uniform1i(uniforms[this.uniformName], textureUnit);
|
|
|
|
}
|
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
private get area() {
|
|
|
|
return this.size[0] * this.size[1];
|
|
|
|
}
|
|
|
|
|
|
|
|
private get capacityArea() {
|
|
|
|
return this.capacity[0] * this.capacity[1];
|
|
|
|
}
|
|
|
|
|
2017-08-15 00:24:58 -04:00
|
|
|
readonly texture: WebGLTexture;
|
2017-08-18 23:23:45 -04:00
|
|
|
readonly uniformName: string;
|
2017-08-23 16:23:29 -04:00
|
|
|
private size: Size2D;
|
|
|
|
private capacity: Size2D;
|
|
|
|
private glType: number;
|
2017-08-15 00:24:58 -04:00
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
class NoAAStrategy implements AntialiasingStrategy {
|
|
|
|
constructor(level: number) {
|
2017-08-19 19:52:14 -04:00
|
|
|
this.framebufferSize = new Float32Array([0, 0]) as Size2D;
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
init(view: PathfinderView) {}
|
|
|
|
|
|
|
|
attachMeshes(view: PathfinderView) {}
|
|
|
|
|
|
|
|
setFramebufferSize(view: PathfinderView, framebufferSize: Size2D) {
|
2017-08-15 16:38:54 -04:00
|
|
|
this.framebufferSize = framebufferSize;
|
|
|
|
}
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
transform(): glmatrix.mat4 {
|
|
|
|
return glmatrix.mat4.create();
|
|
|
|
}
|
2017-08-17 23:09:18 -04:00
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
prepare(view: PathfinderView) {
|
2017-08-22 21:25:32 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, view.atlasFramebuffer);
|
2017-08-19 19:52:14 -04:00
|
|
|
view.gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]);
|
2017-08-24 19:18:26 -04:00
|
|
|
view.gl.disable(view.gl.SCISSOR_TEST);
|
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
|
|
|
}
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
resolve(view: PathfinderView) {}
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
get shouldRenderDirect() {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
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;
|
2017-08-22 21:25:32 -04:00
|
|
|
this.destFramebufferSize = new Float32Array([0, 0]) as Size2D;
|
2017-08-19 19:52:14 -04:00
|
|
|
this.supersampledFramebufferSize = new Float32Array([0, 0]) as Size2D;
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
init(view: PathfinderView) {}
|
|
|
|
|
|
|
|
attachMeshes(view: PathfinderView) {}
|
|
|
|
|
|
|
|
setFramebufferSize(view: PathfinderView, framebufferSize: Size2D) {
|
|
|
|
this.destFramebufferSize = framebufferSize;
|
2017-08-24 19:18:26 -04:00
|
|
|
|
|
|
|
this.supersampledFramebufferSize = glmatrix.vec2.create();
|
|
|
|
glmatrix.vec2.mul(this.supersampledFramebufferSize,
|
|
|
|
framebufferSize,
|
|
|
|
this.supersampleScale);
|
2017-08-15 18:57:52 -04:00
|
|
|
|
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,
|
2017-08-19 19:52:14 -04:00
|
|
|
this.supersampledFramebufferSize[0],
|
|
|
|
this.supersampledFramebufferSize[1],
|
2017-08-16 01:09:09 -04:00
|
|
|
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-22 21:25:32 -04:00
|
|
|
transform(): glmatrix.mat4 {
|
|
|
|
const scale = glmatrix.vec2.create();
|
|
|
|
glmatrix.vec2.div(scale, this.supersampledFramebufferSize, this.destFramebufferSize);
|
|
|
|
|
|
|
|
const transform = glmatrix.mat4.create();
|
|
|
|
glmatrix.mat4.fromScaling(transform, [scale[0], scale[1], 1.0]);
|
|
|
|
return transform;
|
|
|
|
}
|
2017-08-17 23:09:18 -04:00
|
|
|
|
2017-08-15 18:57:52 -04:00
|
|
|
prepare(view: PathfinderView) {
|
2017-08-24 19:18:26 -04:00
|
|
|
const framebufferSize = this.supersampledFramebufferSize;
|
|
|
|
const usedSize = this.usedSupersampledFramebufferSize(view);
|
2017-08-15 18:57:52 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.supersampledFramebuffer);
|
2017-08-24 19:18:26 -04:00
|
|
|
view.gl.viewport(0, 0, framebufferSize[0], framebufferSize[1]);
|
|
|
|
view.gl.scissor(0, 0, usedSize[0], usedSize[1]);
|
|
|
|
view.gl.enable(view.gl.SCISSOR_TEST);
|
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
|
|
|
}
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
resolve(view: PathfinderView) {
|
2017-08-22 21:25:32 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, view.atlasFramebuffer);
|
2017-08-23 16:23:29 -04:00
|
|
|
view.gl.viewport(0, 0, ATLAS_SIZE[0], ATLAS_SIZE[1]);
|
2017-08-15 18:57:52 -04:00
|
|
|
view.gl.disable(view.gl.DEPTH_TEST);
|
|
|
|
|
|
|
|
// Set up the blit program VAO.
|
2017-08-17 23:09:18 -04:00
|
|
|
const blitProgram = view.shaderPrograms.blit;
|
2017-08-15 18:57:52 -04:00
|
|
|
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);
|
2017-08-23 22:18:24 -04:00
|
|
|
view.setTransformAndTexScaleUniformsForAtlas(blitProgram.uniforms);
|
2017-08-17 23:09:18 -04:00
|
|
|
view.gl.bindBuffer(view.gl.ELEMENT_ARRAY_BUFFER, view.quadElementsBuffer);
|
|
|
|
view.gl.drawElements(view.gl.TRIANGLES, 6, view.gl.UNSIGNED_BYTE, 0);
|
2017-08-15 18:57:52 -04:00
|
|
|
}
|
2017-08-15 16:38:54 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
get shouldRenderDirect() {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
private get supersampleScale(): glmatrix.vec2 {
|
|
|
|
return glmatrix.vec2.fromValues(2, this.level == 2 ? 1 : 2);
|
|
|
|
}
|
|
|
|
|
|
|
|
private usedSupersampledFramebufferSize(view: PathfinderView): glmatrix.vec2 {
|
|
|
|
const result = glmatrix.vec2.create();
|
|
|
|
glmatrix.vec2.mul(result, view.appController.atlas.usedSize, this.supersampleScale);
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
|
|
|
private level: number;
|
|
|
|
private destFramebufferSize: Size2D;
|
|
|
|
private supersampledFramebufferSize: Size2D;
|
|
|
|
private supersampledColorTexture: WebGLTexture;
|
|
|
|
private supersampledDepthTexture: WebGLTexture;
|
|
|
|
private supersampledFramebuffer: WebGLFramebuffer;
|
2017-08-15 16:38:54 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
abstract class ECAAStrategy implements AntialiasingStrategy {
|
2017-08-16 01:09:09 -04:00
|
|
|
constructor(level: number) {
|
2017-08-19 19:52:14 -04:00
|
|
|
this.framebufferSize = new Float32Array([0, 0]) as Size2D;
|
2017-08-16 01:09:09 -04:00
|
|
|
}
|
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
init(view: PathfinderView) {
|
|
|
|
this.bVertexPositionBufferTexture = new PathfinderBufferTexture(view.gl,
|
|
|
|
'uBVertexPosition');
|
|
|
|
this.bVertexPathIDBufferTexture = new PathfinderBufferTexture(view.gl, 'uBVertexPathID');
|
|
|
|
}
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
attachMeshes(view: PathfinderView) {
|
|
|
|
const bVertexPositions = new Float32Array(view.meshData.bVertexPositions);
|
|
|
|
const bVertexPathIDs = new Uint8Array(view.meshData.bVertexPathIDs);
|
2017-08-23 16:23:29 -04:00
|
|
|
this.bVertexPositionBufferTexture.upload(view.gl, bVertexPositions);
|
|
|
|
this.bVertexPathIDBufferTexture.upload(view.gl, bVertexPathIDs);
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
this.createEdgeDetectVAO(view);
|
|
|
|
this.createCoverVAO(view);
|
2017-08-18 23:23:45 -04:00
|
|
|
this.createLineVAOs(view);
|
|
|
|
this.createCurveVAOs(view);
|
2017-08-17 23:09:18 -04:00
|
|
|
this.createResolveVAO(view);
|
2017-08-16 19:37:39 -04:00
|
|
|
}
|
2017-08-16 01:09:09 -04:00
|
|
|
|
2017-08-22 21:25:32 -04:00
|
|
|
setFramebufferSize(view: PathfinderView, framebufferSize: Size2D) {
|
|
|
|
this.framebufferSize = framebufferSize;
|
|
|
|
|
|
|
|
this.initDirectFramebuffer(view);
|
|
|
|
this.initEdgeDetectFramebuffer(view);
|
|
|
|
this.initAAAlphaFramebuffer(view);
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, null);
|
|
|
|
}
|
|
|
|
|
|
|
|
transform(): glmatrix.mat4 {
|
|
|
|
return glmatrix.mat4.create();
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
private initDirectFramebuffer(view: PathfinderView) {
|
2017-08-16 19:37:39 -04:00
|
|
|
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-24 14:43:38 -04:00
|
|
|
private initAAAlphaFramebuffer(view: PathfinderView) {
|
2017-08-18 01:47:28 -04:00
|
|
|
this.aaAlphaTexture = unwrapNull(view.gl.createTexture());
|
2017-08-17 23:09:18 -04:00
|
|
|
view.gl.activeTexture(view.gl.TEXTURE0);
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.aaAlphaTexture);
|
2017-08-17 23:09:18 -04:00
|
|
|
view.gl.texImage2D(view.gl.TEXTURE_2D,
|
|
|
|
0,
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.RGB,
|
2017-08-19 19:52:14 -04:00
|
|
|
this.framebufferSize[0],
|
|
|
|
this.framebufferSize[1],
|
2017-08-17 23:09:18 -04:00
|
|
|
0,
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.RGB,
|
|
|
|
view.textureHalfFloatExt.HALF_FLOAT_OES,
|
2017-08-17 23:09:18 -04:00
|
|
|
null);
|
2017-08-18 01:47:28 -04:00
|
|
|
setTextureParameters(view.gl, view.gl.NEAREST);
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
this.aaFramebuffer = createFramebuffer(view.gl,
|
|
|
|
view.drawBuffersExt,
|
|
|
|
[this.aaAlphaTexture],
|
2017-08-24 14:43:38 -04:00
|
|
|
view.atlasDepthTexture);
|
2017-08-17 23:09:18 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
private createCoverVAO(view: PathfinderView) {
|
2017-08-17 23:09:18 -04:00
|
|
|
this.coverVAO = view.vertexArrayObjectExt.createVertexArrayOES();
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.coverVAO);
|
|
|
|
|
|
|
|
const coverProgram = view.shaderPrograms.ecaaCover;
|
|
|
|
const attributes = coverProgram.attributes;
|
|
|
|
view.gl.useProgram(coverProgram.program);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, view.quadPositionsBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aQuadPosition, 2, view.gl.FLOAT, false, 0, 0);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, view.meshes.bQuads);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aUpperPointIndices,
|
|
|
|
4,
|
|
|
|
view.gl.UNSIGNED_SHORT,
|
|
|
|
false,
|
|
|
|
B_QUAD_SIZE,
|
|
|
|
B_QUAD_UPPER_INDICES_OFFSET);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aLowerPointIndices,
|
|
|
|
4,
|
|
|
|
view.gl.UNSIGNED_SHORT,
|
|
|
|
false,
|
|
|
|
B_QUAD_SIZE,
|
|
|
|
B_QUAD_LOWER_INDICES_OFFSET);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aQuadPosition);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aUpperPointIndices);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aLowerPointIndices);
|
|
|
|
view.instancedArraysExt.vertexAttribDivisorANGLE(attributes.aUpperPointIndices, 1);
|
|
|
|
view.instancedArraysExt.vertexAttribDivisorANGLE(attributes.aLowerPointIndices, 1);
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.bindBuffer(view.gl.ELEMENT_ARRAY_BUFFER, view.quadElementsBuffer);
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
private createLineVAOs(view: PathfinderView) {
|
2017-08-18 18:17:23 -04:00
|
|
|
const lineProgram = view.shaderPrograms.ecaaLine;
|
|
|
|
const attributes = lineProgram.attributes;
|
|
|
|
|
|
|
|
const vaos: Partial<UpperAndLower<WebGLVertexArrayObject>> = {};
|
|
|
|
for (const direction of ['upper', 'lower'] as Array<'upper' | 'lower'>) {
|
|
|
|
vaos[direction] = view.vertexArrayObjectExt.createVertexArrayOES();
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(vaos[direction]);
|
|
|
|
|
|
|
|
const lineIndexBuffer = {
|
|
|
|
upper: view.meshes.edgeUpperLineIndices,
|
|
|
|
lower: view.meshes.edgeLowerLineIndices,
|
|
|
|
}[direction];
|
|
|
|
|
|
|
|
view.gl.useProgram(lineProgram.program);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, view.quadPositionsBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aQuadPosition, 2, view.gl.FLOAT, false, 0, 0);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, lineIndexBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aLineIndices,
|
|
|
|
4,
|
|
|
|
view.gl.UNSIGNED_SHORT,
|
|
|
|
false,
|
|
|
|
0,
|
|
|
|
0);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aQuadPosition);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aLineIndices);
|
|
|
|
view.instancedArraysExt.vertexAttribDivisorANGLE(attributes.aLineIndices, 1);
|
|
|
|
view.gl.bindBuffer(view.gl.ELEMENT_ARRAY_BUFFER, view.quadElementsBuffer);
|
|
|
|
}
|
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
|
2017-08-18 23:23:45 -04:00
|
|
|
this.lineVAOs = vaos as UpperAndLower<WebGLVertexArrayObject>;
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
private createCurveVAOs(view: PathfinderView) {
|
2017-08-18 23:23:45 -04:00
|
|
|
const curveProgram = view.shaderPrograms.ecaaCurve;
|
|
|
|
const attributes = curveProgram.attributes;
|
|
|
|
|
|
|
|
const vaos: Partial<UpperAndLower<WebGLVertexArrayObject>> = {};
|
|
|
|
for (const direction of ['upper', 'lower'] as Array<'upper' | 'lower'>) {
|
|
|
|
vaos[direction] = view.vertexArrayObjectExt.createVertexArrayOES();
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(vaos[direction]);
|
|
|
|
|
|
|
|
const curveIndexBuffer = {
|
|
|
|
upper: view.meshes.edgeUpperCurveIndices,
|
|
|
|
lower: view.meshes.edgeLowerCurveIndices,
|
|
|
|
}[direction];
|
|
|
|
|
|
|
|
view.gl.useProgram(curveProgram.program);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, view.quadPositionsBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aQuadPosition, 2, view.gl.FLOAT, false, 0, 0);
|
|
|
|
view.gl.bindBuffer(view.gl.ARRAY_BUFFER, curveIndexBuffer);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aCurveEndpointIndices,
|
|
|
|
4,
|
|
|
|
view.gl.UNSIGNED_SHORT,
|
|
|
|
false,
|
|
|
|
UINT32_SIZE * 4,
|
|
|
|
0);
|
|
|
|
view.gl.vertexAttribPointer(attributes.aCurveControlPointIndex,
|
|
|
|
2,
|
|
|
|
view.gl.UNSIGNED_SHORT,
|
|
|
|
false,
|
|
|
|
UINT32_SIZE * 4,
|
|
|
|
UINT32_SIZE * 2);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aQuadPosition);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aCurveEndpointIndices);
|
|
|
|
view.gl.enableVertexAttribArray(attributes.aCurveControlPointIndex);
|
|
|
|
view.instancedArraysExt.vertexAttribDivisorANGLE(attributes.aCurveEndpointIndices, 1);
|
|
|
|
view.instancedArraysExt.vertexAttribDivisorANGLE(attributes.aCurveControlPointIndex, 1);
|
|
|
|
view.gl.bindBuffer(view.gl.ELEMENT_ARRAY_BUFFER, view.quadElementsBuffer);
|
|
|
|
}
|
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
|
|
|
|
this.curveVAOs = vaos as UpperAndLower<WebGLVertexArrayObject>;
|
2017-08-18 18:17:23 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 19:18:26 -04:00
|
|
|
private createResolveVAO(view: PathfinderView) {
|
2017-08-18 18:17:23 -04:00
|
|
|
this.resolveVAO = view.vertexArrayObjectExt.createVertexArrayOES();
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.resolveVAO);
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
const resolveProgram = this.getResolveProgram(view);
|
2017-08-18 18:17:23 -04:00
|
|
|
view.gl.useProgram(resolveProgram.program);
|
|
|
|
initQuadVAO(view, resolveProgram.attributes);
|
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
2017-08-16 01:09:09 -04:00
|
|
|
prepare(view: PathfinderView) {
|
2017-08-24 19:18:26 -04:00
|
|
|
const usedSize = view.appController.atlas.usedSize;
|
2017-08-16 01:09:09 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.directFramebuffer);
|
2017-08-19 19:52:14 -04:00
|
|
|
view.gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]);
|
2017-08-24 19:18:26 -04:00
|
|
|
view.gl.scissor(0, 0, usedSize[0], usedSize[1]);
|
|
|
|
view.gl.enable(view.gl.SCISSOR_TEST);
|
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
|
|
|
}
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
resolve(view: PathfinderView) {
|
2017-08-24 14:43:38 -04:00
|
|
|
// Detect edges if necessary.
|
|
|
|
this.detectEdgesIfNecessary(view);
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
// Conservatively cover.
|
|
|
|
this.cover(view);
|
|
|
|
|
2017-08-18 18:17:23 -04:00
|
|
|
// Antialias.
|
|
|
|
this.antialiasLines(view);
|
2017-08-18 23:23:45 -04:00
|
|
|
this.antialiasCurves(view);
|
2017-08-18 18:17:23 -04:00
|
|
|
|
2017-08-18 01:47:28 -04:00
|
|
|
// Resolve the antialiasing.
|
|
|
|
this.resolveAA(view);
|
2017-08-17 23:09:18 -04:00
|
|
|
}
|
|
|
|
|
2017-08-23 22:18:24 -04:00
|
|
|
private cover(view: PathfinderView) {
|
2017-08-17 23:09:18 -04:00
|
|
|
// Set state for conservative coverage.
|
|
|
|
const coverProgram = view.shaderPrograms.ecaaCover;
|
2017-08-24 19:18:26 -04:00
|
|
|
const usedSize = view.appController.atlas.usedSize;
|
2017-08-17 23:09:18 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.aaFramebuffer);
|
2017-08-19 19:52:14 -04:00
|
|
|
view.gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]);
|
2017-08-24 19:18:26 -04:00
|
|
|
view.gl.scissor(0, 0, usedSize[0], usedSize[1]);
|
|
|
|
view.gl.enable(view.gl.SCISSOR_TEST);
|
2017-08-16 19:37:39 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
this.setCoverDepthState(view);
|
|
|
|
|
2017-08-17 23:09:18 -04:00
|
|
|
view.gl.blendEquation(view.gl.FUNC_ADD);
|
|
|
|
view.gl.blendFunc(view.gl.ONE, view.gl.ONE);
|
|
|
|
view.gl.enable(view.gl.BLEND);
|
2017-08-16 19:37:39 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
this.clearForCover(view);
|
2017-08-17 23:09:18 -04:00
|
|
|
|
|
|
|
// Conservatively cover.
|
|
|
|
view.gl.useProgram(coverProgram.program);
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.coverVAO);
|
|
|
|
const uniforms = coverProgram.uniforms;
|
2017-08-18 23:23:45 -04:00
|
|
|
view.setFramebufferSizeUniform(uniforms);
|
|
|
|
this.bVertexPositionBufferTexture.bind(view.gl, uniforms, 0);
|
|
|
|
this.bVertexPathIDBufferTexture.bind(view.gl, uniforms, 1);
|
2017-08-22 21:25:32 -04:00
|
|
|
view.atlasTransformBuffer.bind(view.gl, uniforms, 2);
|
2017-08-17 23:09:18 -04:00
|
|
|
view.instancedArraysExt.drawElementsInstancedANGLE(view.gl.TRIANGLES,
|
|
|
|
6,
|
|
|
|
view.gl.UNSIGNED_BYTE,
|
|
|
|
0,
|
|
|
|
view.meshData.bQuadCount);
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
2017-08-16 01:09:09 -04:00
|
|
|
}
|
|
|
|
|
2017-08-23 22:18:24 -04:00
|
|
|
private setAAState(view: PathfinderView) {
|
2017-08-24 19:18:26 -04:00
|
|
|
const usedSize = view.appController.atlas.usedSize;
|
2017-08-18 18:17:23 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.aaFramebuffer);
|
2017-08-19 19:52:14 -04:00
|
|
|
view.gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]);
|
2017-08-24 19:18:26 -04:00
|
|
|
view.gl.scissor(0, 0, usedSize[0], usedSize[1]);
|
|
|
|
view.gl.enable(view.gl.SCISSOR_TEST);
|
2017-08-18 18:17:23 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
this.setAADepthState(view);
|
|
|
|
|
2017-08-18 18:17:23 -04:00
|
|
|
view.gl.blendEquation(view.gl.FUNC_REVERSE_SUBTRACT);
|
|
|
|
view.gl.blendFunc(view.gl.ONE, view.gl.ONE);
|
|
|
|
view.gl.enable(view.gl.BLEND);
|
2017-08-18 23:23:45 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
private setAAUniforms(view: PathfinderView, uniforms: UniformMap) {
|
2017-08-18 23:23:45 -04:00
|
|
|
view.setFramebufferSizeUniform(uniforms);
|
|
|
|
this.bVertexPositionBufferTexture.bind(view.gl, uniforms, 0);
|
|
|
|
this.bVertexPathIDBufferTexture.bind(view.gl, uniforms, 1);
|
2017-08-22 21:25:32 -04:00
|
|
|
view.atlasTransformBuffer.bind(view.gl, uniforms, 2);
|
2017-08-18 23:23:45 -04:00
|
|
|
}
|
2017-08-18 18:17:23 -04:00
|
|
|
|
2017-08-23 22:18:24 -04:00
|
|
|
private antialiasLines(view: PathfinderView) {
|
2017-08-18 23:23:45 -04:00
|
|
|
this.setAAState(view);
|
|
|
|
|
|
|
|
const lineProgram = view.shaderPrograms.ecaaLine;
|
2017-08-18 18:17:23 -04:00
|
|
|
view.gl.useProgram(lineProgram.program);
|
|
|
|
const uniforms = lineProgram.uniforms;
|
2017-08-18 23:23:45 -04:00
|
|
|
this.setAAUniforms(view, uniforms);
|
2017-08-18 18:17:23 -04:00
|
|
|
|
|
|
|
for (const direction of ['upper', 'lower'] as Array<keyof UpperAndLower<void>>) {
|
2017-08-18 23:23:45 -04:00
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.lineVAOs[direction]);
|
2017-08-18 18:17:23 -04:00
|
|
|
view.gl.uniform1i(uniforms.uLowerPart, direction === 'lower' ? 1 : 0);
|
|
|
|
const count = {
|
|
|
|
upper: view.meshData.edgeUpperLineIndexCount,
|
|
|
|
lower: view.meshData.edgeLowerLineIndexCount,
|
|
|
|
}[direction];
|
|
|
|
view.instancedArraysExt.drawElementsInstancedANGLE(view.gl.TRIANGLES,
|
|
|
|
6,
|
|
|
|
view.gl.UNSIGNED_BYTE,
|
|
|
|
0,
|
|
|
|
count);
|
|
|
|
}
|
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
2017-08-23 22:18:24 -04:00
|
|
|
private antialiasCurves(view: PathfinderView) {
|
2017-08-18 23:23:45 -04:00
|
|
|
this.setAAState(view);
|
|
|
|
|
|
|
|
const curveProgram = view.shaderPrograms.ecaaCurve;
|
|
|
|
view.gl.useProgram(curveProgram.program);
|
|
|
|
const uniforms = curveProgram.uniforms;
|
|
|
|
this.setAAUniforms(view, uniforms);
|
|
|
|
|
|
|
|
for (const direction of ['upper', 'lower'] as Array<keyof UpperAndLower<void>>) {
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.curveVAOs[direction]);
|
|
|
|
view.gl.uniform1i(uniforms.uLowerPart, direction === 'lower' ? 1 : 0);
|
|
|
|
const count = {
|
|
|
|
upper: view.meshData.edgeUpperCurveIndexCount,
|
|
|
|
lower: view.meshData.edgeLowerCurveIndexCount,
|
|
|
|
}[direction];
|
|
|
|
view.instancedArraysExt.drawElementsInstancedANGLE(view.gl.TRIANGLES,
|
|
|
|
6,
|
|
|
|
view.gl.UNSIGNED_BYTE,
|
|
|
|
0,
|
|
|
|
count);
|
|
|
|
}
|
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
2017-08-23 22:18:24 -04:00
|
|
|
private resolveAA(view: PathfinderView) {
|
2017-08-18 01:47:28 -04:00
|
|
|
// Set state for ECAA resolve.
|
2017-08-24 19:18:26 -04:00
|
|
|
const usedSize = view.appController.atlas.usedSize;
|
2017-08-22 21:25:32 -04:00
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, view.atlasFramebuffer);
|
2017-08-19 19:52:14 -04:00
|
|
|
view.gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]);
|
2017-08-24 19:18:26 -04:00
|
|
|
view.gl.scissor(0, 0, usedSize[0], usedSize[1]);
|
|
|
|
view.gl.enable(view.gl.SCISSOR_TEST);
|
2017-08-24 14:43:38 -04:00
|
|
|
this.setResolveDepthState(view);
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.disable(view.gl.BLEND);
|
2017-08-22 21:25:32 -04:00
|
|
|
view.drawBuffersExt.drawBuffersWEBGL([view.drawBuffersExt.COLOR_ATTACHMENT0_WEBGL]);
|
2017-08-18 01:47:28 -04:00
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
// Clear out the resolve buffer, if necessary.
|
|
|
|
this.clearForResolve(view);
|
|
|
|
|
2017-08-18 01:47:28 -04:00
|
|
|
// Resolve.
|
2017-08-24 15:08:58 -04:00
|
|
|
const resolveProgram = this.getResolveProgram(view);
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.useProgram(resolveProgram.program);
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.resolveVAO);
|
2017-08-18 23:23:45 -04:00
|
|
|
view.setFramebufferSizeUniform(resolveProgram.uniforms);
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.activeTexture(view.gl.TEXTURE0);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.aaAlphaTexture);
|
2017-08-24 15:08:58 -04:00
|
|
|
view.gl.uniform1i(resolveProgram.uniforms.uAAAlpha, 0);
|
|
|
|
this.setResolveUniforms(view, resolveProgram);
|
2017-08-23 22:18:24 -04:00
|
|
|
view.setTransformSTAndTexScaleUniformsForAtlas(resolveProgram.uniforms);
|
2017-08-18 01:47:28 -04:00
|
|
|
view.gl.drawElements(view.gl.TRIANGLES, 6, view.gl.UNSIGNED_BYTE, 0);
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
protected abstract getResolveProgram(view: PathfinderView): PathfinderShaderProgram;
|
2017-08-24 14:43:38 -04:00
|
|
|
protected abstract initEdgeDetectFramebuffer(view: PathfinderView): void;
|
|
|
|
protected abstract createEdgeDetectVAO(view: PathfinderView): void;
|
|
|
|
protected abstract detectEdgesIfNecessary(view: PathfinderView): void;
|
|
|
|
protected abstract setCoverDepthState(view: PathfinderView): void;
|
|
|
|
protected abstract clearForCover(view: PathfinderView): void;
|
|
|
|
protected abstract setAADepthState(view: PathfinderView): void;
|
|
|
|
protected abstract clearForResolve(view: PathfinderView): void;
|
|
|
|
protected abstract setResolveDepthState(view: PathfinderView): void;
|
2017-08-24 15:08:58 -04:00
|
|
|
protected abstract setResolveUniforms(view: PathfinderView,
|
|
|
|
program: PathfinderShaderProgram): void;
|
2017-08-24 14:43:38 -04:00
|
|
|
|
|
|
|
abstract shouldRenderDirect: boolean;
|
|
|
|
|
|
|
|
private bVertexPositionBufferTexture: PathfinderBufferTexture;
|
|
|
|
private bVertexPathIDBufferTexture: PathfinderBufferTexture;
|
|
|
|
private directDepthTexture: WebGLTexture;
|
|
|
|
private directFramebuffer: WebGLFramebuffer;
|
|
|
|
private aaAlphaTexture: WebGLTexture;
|
|
|
|
private aaFramebuffer: WebGLFramebuffer;
|
|
|
|
private coverVAO: WebGLVertexArrayObject;
|
|
|
|
private lineVAOs: UpperAndLower<WebGLVertexArrayObject>;
|
|
|
|
private curveVAOs: UpperAndLower<WebGLVertexArrayObject>;
|
|
|
|
private resolveVAO: WebGLVertexArrayObject;
|
|
|
|
|
|
|
|
protected directColorTexture: WebGLTexture;
|
|
|
|
protected directPathIDTexture: WebGLTexture;
|
|
|
|
protected framebufferSize: Size2D;
|
|
|
|
}
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
class ECAAMonochromeStrategy extends ECAAStrategy {
|
|
|
|
protected getResolveProgram(view: PathfinderView): PathfinderShaderProgram {
|
|
|
|
return view.shaderPrograms.ecaaMonoResolve;
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
protected initEdgeDetectFramebuffer(view: PathfinderView) {}
|
|
|
|
|
|
|
|
protected createEdgeDetectVAO(view: PathfinderView) {}
|
|
|
|
|
|
|
|
protected detectEdgesIfNecessary(view: PathfinderView) {}
|
|
|
|
|
|
|
|
protected setCoverDepthState(view: PathfinderView) {
|
|
|
|
view.gl.depthMask(true);
|
|
|
|
view.gl.depthFunc(view.gl.ALWAYS);
|
|
|
|
view.gl.enable(view.gl.DEPTH_TEST);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected clearForCover(view: PathfinderView) {
|
|
|
|
view.gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
|
|
view.gl.clearDepth(0.0);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT | view.gl.DEPTH_BUFFER_BIT);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected setAADepthState(view: PathfinderView) {
|
|
|
|
view.gl.disable(view.gl.DEPTH_TEST);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected setResolveDepthState(view: PathfinderView) {
|
|
|
|
view.gl.depthMask(false);
|
|
|
|
view.gl.depthFunc(view.gl.NOTEQUAL);
|
|
|
|
view.gl.enable(view.gl.DEPTH_TEST);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected clearForResolve(view: PathfinderView) {
|
|
|
|
view.gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT);
|
|
|
|
}
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
protected setResolveUniforms(view: PathfinderView, program: PathfinderShaderProgram) {
|
|
|
|
view.gl.uniform4fv(program.uniforms.uBGColor, view.bgColor);
|
|
|
|
view.gl.uniform4fv(program.uniforms.uFGColor, view.fgColor);
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
get shouldRenderDirect() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
class ECAAMulticolorStrategy extends ECAAStrategy {
|
|
|
|
protected getResolveProgram(view: PathfinderView): PathfinderShaderProgram {
|
|
|
|
return view.shaderPrograms.ecaaMultiResolve;
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
protected initEdgeDetectFramebuffer(view: PathfinderView) {
|
|
|
|
this.bgColorTexture = createFramebufferColorTexture(view.gl, this.framebufferSize);
|
|
|
|
this.fgColorTexture = createFramebufferColorTexture(view.gl, this.framebufferSize);
|
|
|
|
this.edgeDetectFramebuffer = createFramebuffer(view.gl,
|
|
|
|
view.drawBuffersExt,
|
|
|
|
[this.bgColorTexture, this.fgColorTexture],
|
|
|
|
view.atlasDepthTexture);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected createEdgeDetectVAO(view: PathfinderView) {
|
|
|
|
this.edgeDetectVAO = view.vertexArrayObjectExt.createVertexArrayOES();
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.edgeDetectVAO);
|
|
|
|
|
|
|
|
const edgeDetectProgram = view.shaderPrograms.ecaaEdgeDetect;
|
|
|
|
view.gl.useProgram(edgeDetectProgram.program);
|
|
|
|
initQuadVAO(view, edgeDetectProgram.attributes);
|
|
|
|
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected detectEdgesIfNecessary(view: PathfinderView) {
|
|
|
|
// Set state for edge detection.
|
|
|
|
const edgeDetectProgram = view.shaderPrograms.ecaaEdgeDetect;
|
|
|
|
view.gl.bindFramebuffer(view.gl.FRAMEBUFFER, this.edgeDetectFramebuffer);
|
|
|
|
view.gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]);
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
// Perform edge detection.
|
|
|
|
view.gl.useProgram(edgeDetectProgram.program);
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(this.edgeDetectVAO);
|
|
|
|
view.setFramebufferSizeUniform(edgeDetectProgram.uniforms);
|
|
|
|
view.setTransformSTAndTexScaleUniformsForAtlas(edgeDetectProgram.uniforms);
|
|
|
|
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.bindBuffer(view.gl.ELEMENT_ARRAY_BUFFER, view.quadElementsBuffer);
|
|
|
|
view.gl.drawElements(view.gl.TRIANGLES, 6, view.gl.UNSIGNED_BYTE, 0);
|
|
|
|
view.vertexArrayObjectExt.bindVertexArrayOES(null);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected setCoverDepthState(view: PathfinderView) {
|
|
|
|
view.gl.depthMask(false);
|
|
|
|
view.gl.depthFunc(view.gl.ALWAYS);
|
|
|
|
view.gl.enable(view.gl.DEPTH_TEST);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected clearForCover(view: PathfinderView) {
|
|
|
|
view.gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
|
|
|
view.gl.clear(view.gl.COLOR_BUFFER_BIT);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected setAADepthState(view: PathfinderView) {
|
|
|
|
view.gl.depthMask(false);
|
|
|
|
view.gl.depthFunc(view.gl.EQUAL);
|
|
|
|
view.gl.enable(view.gl.DEPTH_TEST);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected setResolveDepthState(view: PathfinderView) {
|
|
|
|
view.gl.depthMask(false);
|
|
|
|
view.gl.depthFunc(view.gl.NOTEQUAL);
|
|
|
|
view.gl.enable(view.gl.DEPTH_TEST);
|
|
|
|
}
|
|
|
|
|
|
|
|
protected clearForResolve(view: PathfinderView) {}
|
|
|
|
|
2017-08-24 15:08:58 -04:00
|
|
|
protected setResolveUniforms(view: PathfinderView, program: PathfinderShaderProgram) {
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE1);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.bgColorTexture);
|
|
|
|
view.gl.uniform1i(program.uniforms.uBGColor, 1);
|
|
|
|
view.gl.activeTexture(view.gl.TEXTURE2);
|
|
|
|
view.gl.bindTexture(view.gl.TEXTURE_2D, this.fgColorTexture);
|
|
|
|
view.gl.uniform1i(program.uniforms.uFGColor, 2);
|
|
|
|
}
|
|
|
|
|
2017-08-24 14:43:38 -04:00
|
|
|
get shouldRenderDirect() {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
private edgeDetectFramebuffer: WebGLFramebuffer;
|
|
|
|
private edgeDetectVAO: WebGLVertexArrayObject;
|
2017-08-24 15:08:58 -04:00
|
|
|
private bgColorTexture: WebGLTexture;
|
|
|
|
private fgColorTexture: WebGLTexture;
|
2017-08-16 01:09:09 -04:00
|
|
|
}
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
class TextGlyph {
|
|
|
|
constructor(glyph: opentype.Glyph) {
|
|
|
|
this.glyph = glyph;
|
|
|
|
}
|
|
|
|
|
|
|
|
get canvasRect() {
|
|
|
|
return this._canvasRect;
|
|
|
|
}
|
|
|
|
|
|
|
|
set canvasRect(rect: Rect) {
|
|
|
|
this._canvasRect = rect;
|
|
|
|
}
|
|
|
|
|
|
|
|
glyph: opentype.Glyph;
|
|
|
|
private _canvasRect: Rect;
|
|
|
|
}
|
|
|
|
|
|
|
|
class AtlasGlyph {
|
2017-08-19 19:34:02 -04:00
|
|
|
constructor(glyph: opentype.Glyph) {
|
|
|
|
this.glyph = glyph;
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
get atlasRect() {
|
|
|
|
return this._atlasRect;
|
2017-08-22 21:25:32 -04:00
|
|
|
}
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
set atlasRect(rect: Rect) {
|
|
|
|
this._atlasRect = rect;
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
get atlasSize(): Size2D {
|
2017-08-22 21:25:32 -04:00
|
|
|
let atlasSize = glmatrix.vec2.create();
|
|
|
|
glmatrix.vec2.sub(atlasSize,
|
2017-08-24 22:30:53 -04:00
|
|
|
this._atlasRect.slice(2, 4) as glmatrix.vec2,
|
|
|
|
this._atlasRect.slice(0, 2) as glmatrix.vec2);
|
2017-08-22 21:25:32 -04:00
|
|
|
return atlasSize;
|
2017-08-19 19:34:02 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
get index(): number {
|
2017-08-22 21:25:32 -04:00
|
|
|
return this.glyph.getIndex();
|
2017-08-19 19:34:02 -04:00
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
get metrics(): opentype.Metrics {
|
2017-08-19 19:34:02 -04:00
|
|
|
return this.glyph.getMetrics();
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:30:53 -04:00
|
|
|
private glyph: opentype.Glyph;
|
|
|
|
private _atlasRect: Rect;
|
2017-08-19 19:34:02 -04:00
|
|
|
}
|
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
class Atlas {
|
|
|
|
constructor() {
|
|
|
|
this._texture = null;
|
|
|
|
this._usedSize = glmatrix.vec2.create();
|
|
|
|
}
|
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
layoutGlyphs(glyphs: AtlasGlyph[], fontSize: number, unitsPerEm: number) {
|
2017-08-23 16:23:29 -04:00
|
|
|
const pixelsPerUnit = fontSize / unitsPerEm;
|
|
|
|
|
|
|
|
let nextOrigin = glmatrix.vec2.create();
|
|
|
|
let shelfBottom = 0.0;
|
|
|
|
|
|
|
|
for (const glyph of glyphs) {
|
2017-08-24 22:30:53 -04:00
|
|
|
const metrics = glyph.metrics;
|
2017-08-25 15:20:36 -04:00
|
|
|
|
2017-08-23 16:23:29 -04:00
|
|
|
const glyphSize = glmatrix.vec2.fromValues(metrics.xMax - metrics.xMin,
|
|
|
|
metrics.yMax - metrics.yMin);
|
|
|
|
glmatrix.vec2.scale(glyphSize, glyphSize, pixelsPerUnit);
|
|
|
|
glmatrix.vec2.ceil(glyphSize, glyphSize);
|
|
|
|
|
|
|
|
// Make a new shelf if necessary.
|
|
|
|
const initialGlyphRight = nextOrigin[0] + glyphSize[0] + 2;
|
|
|
|
if (initialGlyphRight > ATLAS_SIZE[0])
|
|
|
|
nextOrigin = glmatrix.vec2.fromValues(0.0, shelfBottom);
|
|
|
|
|
|
|
|
const glyphRect = glmatrix.vec4.fromValues(nextOrigin[0] + 1,
|
|
|
|
nextOrigin[1] + 1,
|
2017-08-24 22:39:07 -04:00
|
|
|
nextOrigin[0] + glyphSize[0] + 1,
|
|
|
|
nextOrigin[1] + glyphSize[1] + 1);
|
2017-08-23 16:23:29 -04:00
|
|
|
|
2017-08-25 18:39:13 -04:00
|
|
|
glyph.atlasRect = glyphRect;
|
2017-08-23 16:23:29 -04:00
|
|
|
|
2017-08-24 22:39:07 -04:00
|
|
|
nextOrigin[0] = glyphRect[2] + 1;
|
2017-08-23 16:23:29 -04:00
|
|
|
shelfBottom = Math.max(shelfBottom, glyphRect[3]);
|
|
|
|
}
|
|
|
|
|
|
|
|
// FIXME(pcwalton): Could be more precise if we don't have a full row.
|
|
|
|
this._usedSize = glmatrix.vec2.fromValues(ATLAS_SIZE[0], shelfBottom);
|
|
|
|
}
|
|
|
|
|
|
|
|
ensureTexture(gl: WebGLRenderingContext): WebGLTexture {
|
|
|
|
if (this._texture != null)
|
|
|
|
return this._texture;
|
|
|
|
|
|
|
|
const texture = unwrapNull(gl.createTexture());
|
|
|
|
this._texture = texture;
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
|
|
gl.texImage2D(gl.TEXTURE_2D,
|
|
|
|
0,
|
|
|
|
gl.RGBA,
|
|
|
|
ATLAS_SIZE[0],
|
|
|
|
ATLAS_SIZE[1],
|
|
|
|
0,
|
|
|
|
gl.RGBA,
|
|
|
|
gl.UNSIGNED_BYTE,
|
|
|
|
null);
|
|
|
|
setTextureParameters(gl, gl.NEAREST);
|
|
|
|
|
|
|
|
return texture;
|
|
|
|
}
|
|
|
|
|
|
|
|
get usedSize(): glmatrix.vec2 {
|
|
|
|
return this._usedSize;
|
|
|
|
}
|
|
|
|
|
|
|
|
private _texture: WebGLTexture | null;
|
|
|
|
private _usedSize: Size2D;
|
|
|
|
}
|
|
|
|
|
2017-08-15 16:38:54 -04:00
|
|
|
const ANTIALIASING_STRATEGIES: AntialiasingStrategyTable = {
|
|
|
|
none: NoAAStrategy,
|
|
|
|
ssaa: SSAAStrategy,
|
2017-08-24 15:08:58 -04:00
|
|
|
ecaa: ECAAMonochromeStrategy,
|
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();
|