michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Draw distant glyphs as prerendered images in the 3D demo. 

This has known performance problems, but it's a good first cut.
This commit is contained in:
Patrick Walton 2017-10-17 15:30:33 -07:00
parent 024b00e479
commit 70201bb29c
9 changed files with 567 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

532
demo/client/src/3d-demo.ts
View File

@ -16,16 +16,19 @@ import {mat4, vec2} from "gl-matrix";
import {AntialiasingStrategy, AntialiasingStrategyName, NoAAStrategy} from "./aa-strategy";
import {SubpixelAAType} from "./aa-strategy";
import {DemoAppController} from "./app-controller";
import {Atlas, ATLAS_SIZE, AtlasGlyph, GlyphKey} from './atlas';
import PathfinderBufferTexture from "./buffer-texture";
import {PerspectiveCamera} from "./camera";
import {CameraView, PerspectiveCamera} from "./camera";
import {UniformMap} from './gl-utils';
import {PathfinderMeshData} from "./meshes";
import {Renderer} from './renderer';
import {ShaderMap, ShaderProgramSource} from "./shader-loader";
import SSAAStrategy from "./ssaa-strategy";
import {BUILTIN_FONT_URI, ExpandedMeshData} from "./text";
import {GlyphStore, Hint, PathfinderFont, TextFrame, TextRun} from "./text";
import {assert, panic, PathfinderError, unwrapNull} from "./utils";
import {calculatePixelRectForGlyph, GlyphStore, Hint, PathfinderFont} from "./text";
import {SimpleTextLayout, TextFrame, TextRun, UnitMetrics} from "./text";
import {TextRenderContext, TextRenderer} from './text-renderer';
import {assert, FLOAT32_SIZE, panic, PathfinderError, Range, unwrapNull} from "./utils";
import {DemoView, Timings} from "./view";
const TEXT_AVAILABLE_WIDTH: number = 150000;
@ -43,6 +46,10 @@ const FOV: number = 45.0;
const NEAR_CLIP_PLANE: number = 0.1;
const FAR_CLIP_PLANE: number = 10000.0;
const ATLAS_FONT_SIZE: number = 48;
const MAX_DISTANCE: number = 200.0;
const TEXT_TRANSLATION: number[] = [
-TEXT_AVAILABLE_WIDTH * 0.5,
0.0,
@ -103,11 +110,15 @@ interface MeshDescriptor {
}
class ThreeDController extends DemoAppController<ThreeDView> {
font: PathfinderFont;
textFrames: TextFrame[];
glyphStore: GlyphStore;
meshDescriptors: MeshDescriptor[];
private baseMeshes: PathfinderMeshData;
atlasGlyphs: AtlasGlyph[];
atlas: Atlas;
baseMeshes: PathfinderMeshData;
private expandedMeshes: PathfinderMeshData[];
private monumentPromise: Promise<MonumentSide[]>;
@ -115,6 +126,8 @@ class ThreeDController extends DemoAppController<ThreeDView> {
start() {
super.start();
this.atlas = new Atlas;
this.monumentPromise = window.fetch(TEXT_DATA_URI)
.then(response => response.json())
.then(textData => this.parseTextData(textData));
@ -123,8 +136,8 @@ class ThreeDController extends DemoAppController<ThreeDView> {
}
protected fileLoaded(fileData: ArrayBuffer, builtinName: string | null): void {
const font = new PathfinderFont(fileData, builtinName);
this.monumentPromise.then(monument => this.layoutMonument(font, fileData, monument));
this.font = new PathfinderFont(fileData, builtinName);
this.monumentPromise.then(monument => this.layoutMonument(fileData, monument));
}
protected createView(): ThreeDView {
@ -164,7 +177,7 @@ class ThreeDController extends DemoAppController<ThreeDView> {
return sides.map(side => ({ lines: side.upper.lines.concat(side.lower.lines) }));
}
private layoutMonument(font: PathfinderFont, fileData: ArrayBuffer, monument: MonumentSide[]) {
private layoutMonument(fileData: ArrayBuffer, monument: MonumentSide[]) {
this.textFrames = [];
let glyphsNeeded: number[] = [];
@ -173,9 +186,9 @@ class ThreeDController extends DemoAppController<ThreeDView> {
for (let lineNumber = 0; lineNumber < monumentSide.lines.length; lineNumber++) {
const line = monumentSide.lines[lineNumber];
const lineY = -lineNumber * font.opentypeFont.lineHeight();
const lineY = -lineNumber * this.font.opentypeFont.lineHeight();
const lineGlyphs = line.names.map(name => {
const glyphs = font.opentypeFont.stringToGlyphs(name);
const glyphs = this.font.opentypeFont.stringToGlyphs(name);
const glyphIDs = glyphs.map(glyph => (glyph as any).index);
const width = _.sumBy(glyphs, glyph => glyph.advanceWidth);
return { glyphs: glyphIDs, width: width };
@ -188,14 +201,14 @@ class ThreeDController extends DemoAppController<ThreeDView> {
let currentX = 0.0;
for (const glyphInfo of lineGlyphs) {
const textRunOrigin = [currentX, lineY];
const textRun = new TextRun(glyphInfo.glyphs, textRunOrigin, font);
const textRun = new TextRun(glyphInfo.glyphs, textRunOrigin, this.font);
textRun.layout();
textRuns.push(textRun);
currentX += glyphInfo.width + spacing;
}
}
const textFrame = new TextFrame(textRuns, font);
const textFrame = new TextFrame(textRuns, this.font);
this.textFrames.push(textFrame);
glyphsNeeded.push(...textFrame.allGlyphIDs);
}
@ -203,8 +216,17 @@ class ThreeDController extends DemoAppController<ThreeDView> {
glyphsNeeded.sort((a, b) => a - b);
glyphsNeeded = _.sortedUniq(glyphsNeeded);
this.glyphStore = new GlyphStore(font, glyphsNeeded);
this.glyphStore = new GlyphStore(this.font, glyphsNeeded);
this.glyphStore.partition().then(result => {
// Build the atlas glyphs needed.
this.atlasGlyphs = [];
for (const glyphID of glyphsNeeded) {
const glyphKey = new GlyphKey(glyphID, null);
const glyphStoreIndex = this.glyphStore.indexOfGlyphWithID(glyphID);
if (glyphStoreIndex != null)
this.atlasGlyphs.push(new AtlasGlyph(glyphStoreIndex, glyphKey));
}
const hint = new Hint(this.glyphStore.font, PIXELS_PER_UNIT, false);
this.baseMeshes = result.meshes;
@ -258,7 +280,41 @@ class ThreeDController extends DemoAppController<ThreeDView> {
}
}
class ThreeDView extends DemoView {
class ThreeDView extends DemoView implements TextRenderContext {
cameraView: CameraView;
get atlas(): Atlas {
return this.appController.atlas;
}
get atlasGlyphs(): AtlasGlyph[] {
return this.appController.atlasGlyphs;
}
set atlasGlyphs(newAtlasGlyphs: AtlasGlyph[]) {
this.appController.atlasGlyphs = newAtlasGlyphs;
}
get glyphStore(): GlyphStore {
return this.appController.glyphStore;
}
get font(): PathfinderFont {
return this.appController.font;
}
get fontSize(): number {
return ATLAS_FONT_SIZE;
}
get useHinting(): boolean {
return false;
}
get atlasPixelsPerUnit(): number {
return ATLAS_FONT_SIZE / this.font.opentypeFont.unitsPerEm;
}
renderer: ThreeDRenderer;
appController: ThreeDController;
@ -272,11 +328,15 @@ class ThreeDView extends DemoView {
shaderSources: ShaderMap<ShaderProgramSource>) {
super(commonShaderSource, shaderSources);
this.cameraView = new ThreeDAtlasCameraView;
this.appController = appController;
this.renderer = new ThreeDRenderer(this);
this.resizeToFit(true);
}
newTimingsReceived(timings: Timings): void {}
}
class ThreeDRenderer extends Renderer {
@ -307,7 +367,7 @@ class ThreeDRenderer extends Renderer {
return 'direct3DInterior';
}
protected get depthFunction(): number {
protected get depthFunction(): GLenum {
return this.renderContext.gl.LESS;
}
@ -325,6 +385,11 @@ class ThreeDRenderer extends Renderer {
private cubeVertexPositionBuffer: WebGLBuffer;
private cubeIndexBuffer: WebGLBuffer;
private glyphPositionsBuffer: WebGLBuffer;
private glyphPositions: number[];
private glyphPositionRanges: Range[];
private glyphTexCoords: glmatrix.vec4[];
private glyphSizes: glmatrix.vec2[];
constructor(renderContext: ThreeDView) {
super(renderContext);
@ -350,8 +415,12 @@ class ThreeDRenderer extends Renderer {
attachMeshes(expandedMeshes: PathfinderMeshData[]) {
super.attachMeshes(expandedMeshes);
this.renderAtlasGlyphs(this.renderContext.appController.atlasGlyphs);
this.uploadPathColors(expandedMeshes.length);
this.uploadPathTransforms(expandedMeshes.length);
this.uploadGlyphPositions();
}
pathCountForObject(objectIndex: number): number {
@ -368,46 +437,15 @@ class ThreeDRenderer extends Renderer {
}
protected drawSceneryIfNecessary(): void {
// Set up the cube VBO.
const shaderProgram = this.renderContext.shaderPrograms.demo3DMonument;
this.renderContext.gl.useProgram(shaderProgram.program);
this.renderContext.gl.bindBuffer(this.renderContext.gl.ARRAY_BUFFER,
this.cubeVertexPositionBuffer);
this.renderContext.gl.bindBuffer(this.renderContext.gl.ELEMENT_ARRAY_BUFFER,
this.cubeIndexBuffer);
this.renderContext.gl.vertexAttribPointer(shaderProgram.attributes.aPosition,
3,
this.renderContext.gl.FLOAT,
false,
0,
0);
this.renderContext.gl.enableVertexAttribArray(shaderProgram.attributes.aPosition);
const gl = this.renderContext.gl;
// Set uniforms for the monument.
const transform = this.calculateWorldTransform(MONUMENT_TRANSLATION, MONUMENT_SCALE);
this.renderContext.gl.uniformMatrix4fv(shaderProgram.uniforms.uTransform,
false,
transform);
this.renderContext.gl.uniform4f(shaderProgram.uniforms.uColor,
MONUMENT_COLOR[0],
MONUMENT_COLOR[1],
MONUMENT_COLOR[2],
1.0);
// Set state for the monument.
this.renderContext.gl.enable(this.renderContext.gl.DEPTH_TEST);
this.renderContext.gl.depthMask(true);
this.renderContext.gl.disable(this.renderContext.gl.SCISSOR_TEST);
// Draw the monument!
this.renderContext.gl.drawElements(this.renderContext.gl.TRIANGLES,
CUBE_INDICES.length,
this.renderContext.gl.UNSIGNED_SHORT,
0);
this.drawMonument();
// Clear to avoid Z-fighting.
this.renderContext.gl.clearDepth(1.0);
this.renderContext.gl.clear(this.renderContext.gl.DEPTH_BUFFER_BIT);
gl.clearDepth(1.0);
gl.clear(gl.DEPTH_BUFFER_BIT);
this.drawDistantGlyphs();
}
protected compositeIfNecessary(): void {}
@ -441,11 +479,11 @@ class ThreeDRenderer extends Renderer {
}
protected clearForDirectRendering(): void {
this.renderContext.gl.clearColor(1.0, 1.0, 1.0, 1.0);
this.renderContext.gl.clearDepth(1.0);
this.renderContext.gl.depthMask(true);
this.renderContext.gl.clear(this.renderContext.gl.COLOR_BUFFER_BIT |
this.renderContext.gl.DEPTH_BUFFER_BIT);
const gl = this.renderContext.gl;
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clearDepth(1.0);
gl.depthMask(true);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
protected getModelviewTransform(objectIndex: number): glmatrix.mat4 {
@ -460,8 +498,35 @@ class ThreeDRenderer extends Renderer {
return transform;
}
protected instanceRangeForObject(glyphDescriptorIndex: number): Range {
if (!this.objectIsVisible(glyphDescriptorIndex))
return new Range(0, 0);
const totalLength =
this.renderContext.appController.meshDescriptors[glyphDescriptorIndex].positions.length;
const cameraTransform = this.calculateCameraTransform(glmatrix.vec3.create(), TEXT_SCALE);
const worldTransform = this.calculateWorldTransform(glmatrix.vec3.create(), TEXT_SCALE);
const glyphsTransform = glmatrix.mat4.clone(cameraTransform);
const renderTransform = glmatrix.mat4.clone(worldTransform);
const modelviewTransform = this.getModelviewTransform(glyphDescriptorIndex);
glmatrix.mat4.mul(glyphsTransform, cameraTransform, modelviewTransform);
glmatrix.mat4.mul(renderTransform, renderTransform, modelviewTransform);
const nearbyRange = this.findNearbyGlyphPositions(glyphsTransform, glyphDescriptorIndex);
const glyphPositionRange = this.glyphPositionRanges[glyphDescriptorIndex];
nearbyRange.start -= glyphPositionRange.start;
nearbyRange.end -= glyphPositionRange.start;
return nearbyRange;
}
protected newTimingsReceived(): void {
const newTimings: Timings = _.pick(this.lastTimings, ['rendering']);
this.renderContext.appController.newTimingsReceived(newTimings);
}
// Cheap but effective backface culling.
protected shouldRenderObject(objectIndex: number): boolean {
private objectIsVisible(objectIndex: number): boolean {
const textFrameIndex = this.renderContext
.appController
.meshDescriptors[objectIndex]
@ -476,9 +541,200 @@ class ThreeDRenderer extends Renderer {
default: return translation[0] > extent;
}
}
protected newTimingsReceived() {
const newTimings: Timings = _.pick(this.lastTimings, ['rendering']);
this.renderContext.appController.newTimingsReceived(newTimings);
private uploadGlyphPositions(): void {
const gl = this.renderContext.gl;
const font = this.renderContext.font;
const meshDescriptors = this.renderContext.appController.meshDescriptors;
this.glyphPositions = [];
this.glyphPositionRanges = [];
for (const meshDescriptor of meshDescriptors) {
const glyphIndex = this.renderContext.atlasGlyphs.findIndex(atlasGlyph => {
return atlasGlyph.glyphKey.id === meshDescriptor.glyphID;
});
const glyph = this.renderContext.atlasGlyphs[glyphIndex];
const glyphMetrics = unwrapNull(font.metricsForGlyph(glyph.glyphKey.id));
const glyphUnitMetrics = new UnitMetrics(glyphMetrics, glmatrix.vec2.create());
const firstPosition = this.glyphPositions.length / 2;
for (const position of meshDescriptor.positions) {
this.glyphPositions.push(position[0] + glyphUnitMetrics.left,
position[1] + glyphUnitMetrics.descent);
}
const lastPosition = this.glyphPositions.length / 2;
this.glyphPositionRanges.push(new Range(firstPosition, lastPosition));
}
this.glyphPositionsBuffer = unwrapNull(gl.createBuffer());
gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphPositionsBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.glyphPositions), gl.STATIC_DRAW);
}
private drawMonument(): void {
const gl = this.renderContext.gl;
// Set up the cube VBO.
const monumentProgram = this.renderContext.shaderPrograms.demo3DMonument;
this.renderContext.gl.useProgram(monumentProgram.program);
this.renderContext.gl.bindBuffer(this.renderContext.gl.ARRAY_BUFFER,
this.cubeVertexPositionBuffer);
this.renderContext.gl.bindBuffer(this.renderContext.gl.ELEMENT_ARRAY_BUFFER,
this.cubeIndexBuffer);
this.renderContext.gl.vertexAttribPointer(monumentProgram.attributes.aPosition,
3,
this.renderContext.gl.FLOAT,
false,
0,
0);
this.renderContext.gl.enableVertexAttribArray(monumentProgram.attributes.aPosition);
// Set uniforms for the monument.
const transform = this.calculateWorldTransform(MONUMENT_TRANSLATION, MONUMENT_SCALE);
gl.uniformMatrix4fv(monumentProgram.uniforms.uTransform, false, transform);
gl.uniform4f(monumentProgram.uniforms.uColor,
MONUMENT_COLOR[0],
MONUMENT_COLOR[1],
MONUMENT_COLOR[2],
1.0);
// Set state for the monument.
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(this.depthFunction);
gl.depthMask(true);
gl.disable(gl.SCISSOR_TEST);
gl.disable(gl.BLEND);
// Draw the monument!
gl.drawElements(gl.TRIANGLES, CUBE_INDICES.length, gl.UNSIGNED_SHORT, 0);
}
private drawDistantGlyphs(): void {
const appController = this.renderContext.appController;
const gl = this.renderContext.gl;
// Prepare the distant glyph VAO.
const vao = this.renderContext.vertexArrayObjectExt.createVertexArrayOES();
this.renderContext.vertexArrayObjectExt.bindVertexArrayOES(vao);
const distantGlyphProgram = this.renderContext.shaderPrograms.demo3DDistantGlyph;
gl.useProgram(distantGlyphProgram.program);
gl.bindBuffer(gl.ARRAY_BUFFER, this.renderContext.quadPositionsBuffer);
gl.vertexAttribPointer(distantGlyphProgram.attributes.aQuadPosition,
2,
gl.FLOAT,
false,
0,
0);
gl.enableVertexAttribArray(distantGlyphProgram.attributes.aQuadPosition);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.renderContext.quadElementsBuffer);
// Set global uniforms.
gl.uniform4fv(distantGlyphProgram.uniforms.uColor,
_.map(TEXT_COLOR, number => number / 0xff));
const atlasTexture = this.renderContext.atlas.ensureTexture(this.renderContext);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, atlasTexture);
gl.uniform1i(distantGlyphProgram.uniforms.uAtlas, 0);
// Set state.
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.SCISSOR_TEST);
gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
// Draw textures for distant glyphs.
const cameraTransform = this.calculateCameraTransform(glmatrix.vec3.create(), TEXT_SCALE);
const worldTransform = this.calculateWorldTransform(glmatrix.vec3.create(), TEXT_SCALE);
for (let glyphDescriptorIndex = 0;
glyphDescriptorIndex < this.glyphPositionRanges.length;
glyphDescriptorIndex++) {
if (!this.objectIsVisible(glyphDescriptorIndex))
continue;
const meshDescriptor = appController.meshDescriptors[glyphDescriptorIndex];
const glyphIndex = this.renderContext.atlasGlyphs.findIndex(glyph => {
return glyph.glyphKey.id === meshDescriptor.glyphID;
});
// Calculate transforms.
const glyphsTransform = glmatrix.mat4.clone(cameraTransform);
const renderTransform = glmatrix.mat4.clone(worldTransform);
const modelviewTransform = this.getModelviewTransform(glyphDescriptorIndex);
glmatrix.mat4.mul(glyphsTransform, cameraTransform, modelviewTransform);
glmatrix.mat4.mul(renderTransform, renderTransform, modelviewTransform);
const glyphPositionRange = this.glyphPositionRanges[glyphDescriptorIndex];
const nearbyGlyphPositionRange = this.findNearbyGlyphPositions(glyphsTransform,
glyphDescriptorIndex);
// Set uniforms.
gl.uniformMatrix4fv(distantGlyphProgram.uniforms.uTransform, false, renderTransform);
const glyphTexCoords = this.glyphTexCoords[glyphIndex];
gl.uniform4f(distantGlyphProgram.uniforms.uGlyphTexCoords,
glyphTexCoords[0],
glyphTexCoords[1],
glyphTexCoords[2],
glyphTexCoords[3]);
const glyphSize = this.glyphSizes[glyphIndex];
gl.uniform2f(distantGlyphProgram.uniforms.uGlyphSize, glyphSize[0], glyphSize[1]);
const rangeBefore = new Range(glyphPositionRange.start,
nearbyGlyphPositionRange.start);
if (!rangeBefore.isEmpty) {
// Would be nice to have `glDrawElementsInstancedBaseInstance`...
// FIXME(pcwalton): Cache VAOs?
gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphPositionsBuffer);
gl.vertexAttribPointer(distantGlyphProgram.attributes.aPosition,
2,
gl.FLOAT,
false,
0,
rangeBefore.start * FLOAT32_SIZE * 2);
gl.enableVertexAttribArray(distantGlyphProgram.attributes.aPosition);
this.renderContext
.instancedArraysExt
.vertexAttribDivisorANGLE(distantGlyphProgram.attributes.aPosition, 1);
this.renderContext
.instancedArraysExt
.drawElementsInstancedANGLE(gl.TRIANGLES,
6,
gl.UNSIGNED_BYTE,
0,
rangeBefore.length);
}
const rangeAfter = new Range(nearbyGlyphPositionRange.end, glyphPositionRange.end);
if (!rangeAfter.isEmpty) {
gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphPositionsBuffer);
gl.vertexAttribPointer(distantGlyphProgram.attributes.aPosition,
2,
gl.FLOAT,
false,
0,
rangeAfter.start * FLOAT32_SIZE * 2);
gl.enableVertexAttribArray(distantGlyphProgram.attributes.aPosition);
this.renderContext
.instancedArraysExt
.vertexAttribDivisorANGLE(distantGlyphProgram.attributes.aPosition, 1);
this.renderContext
.instancedArraysExt
.drawElementsInstancedANGLE(gl.TRIANGLES,
6,
gl.UNSIGNED_BYTE,
0,
rangeAfter.length);
}
}
this.renderContext.vertexArrayObjectExt.deleteVertexArrayOES(vao);
this.renderContext.vertexArrayObjectExt.bindVertexArrayOES(null);
}
private calculateWorldTransform(modelviewTranslation: glmatrix.vec3,
@ -502,6 +758,162 @@ class ThreeDRenderer extends Renderer {
glmatrix.mat4.mul(transform, projection, modelview);
return transform;
}
private calculateCameraTransform(modelviewTranslation: glmatrix.vec3,
modelviewScale: glmatrix.vec3):
glmatrix.mat4 {
const transform = glmatrix.mat4.create();
glmatrix.mat4.translate(transform, transform, this.camera.translation);
glmatrix.mat4.translate(transform, transform, modelviewTranslation);
glmatrix.mat4.scale(transform, transform, modelviewScale);
return transform;
}
private renderAtlasGlyphs(atlasGlyphs: AtlasGlyph[]): void {
const hint = new Hint(this.renderContext.font,
this.renderContext.atlasPixelsPerUnit,
false);
this.renderContext.atlas.layoutGlyphs(atlasGlyphs,
this.renderContext.font,
this.renderContext.atlasPixelsPerUnit,
hint,
glmatrix.vec2.create());
const atlasRenderer = new ThreeDAtlasRenderer(this.renderContext, atlasGlyphs);
atlasRenderer.attachMeshes([this.renderContext.appController.baseMeshes]);
atlasRenderer.renderAtlas();
this.glyphTexCoords = atlasRenderer.glyphTexCoords;
this.glyphSizes = atlasRenderer.glyphSizes;
}
private findNearbyGlyphPositions(transform: glmatrix.mat4, glyphDescriptorIndex: number):
Range {
const glyphPositionRange = this.glyphPositionRanges[glyphDescriptorIndex];
const startPosition = this.findFirstGlyphPositionInRange(transform,
glyphPositionRange,
-MAX_DISTANCE);
const endPosition = this.findFirstGlyphPositionInRange(transform,
new Range(startPosition,
glyphPositionRange.end),
MAX_DISTANCE);
return new Range(startPosition, endPosition);
}
private findFirstGlyphPositionInRange(transform: glmatrix.mat4,
range: Range,
maxDistance: number):
number {
let lo = range.start, hi = range.end;
while (lo < hi) {
const mid = lo + ((hi - lo) >> 1);
const glyphPosition = this.calculateTransformedGlyphPosition(transform, mid);
const glyphDistance = -glyphPosition[1];
if (glyphDistance < maxDistance)
lo = mid + 1;
else
hi = mid;
}
return lo;
}
private calculateTransformedGlyphPosition(transform: glmatrix.mat4,
glyphPositionIndex: number):
glmatrix.vec4 {
const position = glmatrix.vec4.clone([
this.glyphPositions[glyphPositionIndex * 2 + 0],
this.glyphPositions[glyphPositionIndex * 2 + 1],
0.0,
1.0,
]);
glmatrix.vec4.transformMat4(position, position, transform);
return position;
}
}
class ThreeDAtlasRenderer extends TextRenderer {
glyphTexCoords: glmatrix.vec4[];
glyphSizes: glmatrix.vec2[];
private allAtlasGlyphs: AtlasGlyph[];
constructor(renderContext: ThreeDView, atlasGlyphs: AtlasGlyph[]) {
super(renderContext);
this.allAtlasGlyphs = atlasGlyphs;
}
renderAtlas(): void {
this.createAtlasFramebuffer();
this.buildAtlasGlyphs(this.allAtlasGlyphs);
this.redraw();
this.calculateGlyphTexCoords();
}
protected compositeIfNecessary(): void {}
private calculateGlyphTexCoords(): void {
const displayPixelsPerUnit = this.displayPixelsPerUnit;
const glyphCount = this.renderContext.atlasGlyphs.length;
const font = this.renderContext.font;
const hint = this.createHint();
this.glyphTexCoords = [];
this.glyphSizes = [];
for (let glyphIndex = 0; glyphIndex < glyphCount; glyphIndex++) {
const glyph = this.renderContext.atlasGlyphs[glyphIndex];
const glyphPixelOrigin = glyph.calculateSubpixelOrigin(displayPixelsPerUnit);
const glyphMetrics = font.metricsForGlyph(glyph.glyphKey.id);
if (glyphMetrics == null)
continue;
const glyphUnitMetrics = new UnitMetrics(glyphMetrics, glmatrix.vec2.create());
const atlasGlyphRect = calculatePixelRectForGlyph(glyphUnitMetrics,
glyphPixelOrigin,
displayPixelsPerUnit,
hint);
this.glyphSizes.push(glmatrix.vec2.clone([
glyphUnitMetrics.right - glyphUnitMetrics.left,
glyphUnitMetrics.ascent - glyphUnitMetrics.descent,
]));
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);
this.glyphTexCoords.push(glmatrix.vec4.clone([
atlasGlyphBL[0],
atlasGlyphBL[1],
atlasGlyphTR[0],
atlasGlyphTR[1],
]));
}
}
}
class ThreeDAtlasCameraView implements CameraView {
get width(): number {
return ATLAS_SIZE[0];
}
get height(): number {
return ATLAS_SIZE[1];
}
get classList(): DOMTokenList | null {
return null;
}
addEventListener<K extends keyof HTMLElementEventMap>(type: K,
listener: (this: HTMLCanvasElement,
ev: HTMLElementEventMap[K]) =>
any,
useCapture?: boolean): void {}
getBoundingClientRect(): ClientRect {
return new ClientRect();
}
}
function main() {

11
demo/client/src/atlas.ts
View File

@ -118,7 +118,8 @@ export class AtlasGlyph {
const pixelOrigin = glmatrix.vec2.create();
glmatrix.vec2.scale(pixelOrigin, this.origin, pixelsPerUnit);
glmatrix.vec2.round(pixelOrigin, pixelOrigin);
pixelOrigin[0] += this.glyphKey.subpixel / SUBPIXEL_GRANULARITY;
if (this.glyphKey.subpixel != null)
pixelOrigin[0] += this.glyphKey.subpixel / SUBPIXEL_GRANULARITY;
return pixelOrigin;
}
@ -136,20 +137,22 @@ export class AtlasGlyph {
}
get pathID(): number {
if (this.glyphKey.subpixel == null)
return this.glyphStoreIndex + 1;
return this.glyphStoreIndex * SUBPIXEL_GRANULARITY + this.glyphKey.subpixel + 1;
}
}
export class GlyphKey {
readonly id: number;
readonly subpixel: number;
readonly subpixel: number | null;
constructor(id: number, subpixel: number) {
constructor(id: number, subpixel: number | null) {
this.id = id;
this.subpixel = subpixel;
}
get sortKey(): number {
return this.id * SUBPIXEL_GRANULARITY + this.subpixel;
return this.subpixel == null ? this.id : this.id * SUBPIXEL_GRANULARITY + this.subpixel;
}
}

43
demo/client/src/renderer.ts
View File

@ -16,7 +16,7 @@ import PathfinderBufferTexture from "./buffer-texture";
import {UniformMap} from './gl-utils';
import {PathfinderMeshBuffers, PathfinderMeshData} from "./meshes";
import {ShaderMap} from './shader-loader';
import {UINT32_SIZE, unwrapNull} from './utils';
import {FLOAT32_SIZE, Range, UINT16_SIZE, UINT32_SIZE, unwrapNull} from './utils';
import {RenderContext, Timings} from "./view";
const MAX_PATHS: number = 65535;
@ -258,13 +258,9 @@ export abstract class Renderer {
return glmatrix.mat4.create();
}
protected meshInstanceCountForObject(objectIndex: number): number {
return 1;
}
// FIXME(pcwalton): Merge with `meshInstanceCountForObject`?
protected shouldRenderObject(objectIndex: number): boolean {
return true;
/// If non-instanced, returns instance 0. An empty range skips rendering the object entirely.
protected instanceRangeForObject(objectIndex: number): Range {
return new Range(0, 1);
}
/// Called whenever new GPU timing statistics are available.
@ -273,17 +269,12 @@ export abstract class Renderer {
private renderDirect() {
const renderContext = this.renderContext;
for (let objectIndex = 0; objectIndex < this.meshes.length; objectIndex++) {
if (!this.shouldRenderObject(objectIndex))
const instanceRange = this.instanceRangeForObject(objectIndex);
if (instanceRange.isEmpty)
continue;
const meshes = this.meshes[objectIndex];
let instanceCount: number | null;
if (!this.pathIDsAreInstanced)
instanceCount = null;
else
instanceCount = this.meshInstanceCountForObject(objectIndex);
// Set up implicit cover state.
renderContext.gl.depthFunc(this.depthFunction);
renderContext.gl.depthMask(true);
@ -298,7 +289,7 @@ export abstract class Renderer {
const implicitCoverInteriorVAO = renderContext.vertexArrayObjectExt
.createVertexArrayOES();
renderContext.vertexArrayObjectExt.bindVertexArrayOES(implicitCoverInteriorVAO);
this.initImplicitCoverInteriorVAO(objectIndex);
this.initImplicitCoverInteriorVAO(objectIndex, instanceRange);
// Draw direct interior parts.
this.setTransformUniform(directInteriorProgram.uniforms, objectIndex);
@ -313,7 +304,7 @@ export abstract class Renderer {
let indexCount =
renderContext.gl.getBufferParameter(renderContext.gl.ELEMENT_ARRAY_BUFFER,
renderContext.gl.BUFFER_SIZE) / UINT32_SIZE;
if (instanceCount == null) {
if (!this.pathIDsAreInstanced) {
renderContext.gl.drawElements(renderContext.gl.TRIANGLES,
indexCount,
renderContext.gl.UNSIGNED_INT,
@ -324,7 +315,7 @@ export abstract class Renderer {
indexCount,
renderContext.gl.UNSIGNED_INT,
0,
instanceCount);
instanceRange.length);
}
// Set up direct curve state.
@ -342,7 +333,7 @@ export abstract class Renderer {
const directCurveProgram = renderContext.shaderPrograms[this.directCurveProgramName];
const implicitCoverCurveVAO = renderContext.vertexArrayObjectExt.createVertexArrayOES();
renderContext.vertexArrayObjectExt.bindVertexArrayOES(implicitCoverCurveVAO);
this.initImplicitCoverCurveVAO(objectIndex);
this.initImplicitCoverCurveVAO(objectIndex, instanceRange);
// Draw direct curve parts.
this.setTransformUniform(directCurveProgram.uniforms, objectIndex);
@ -357,7 +348,7 @@ export abstract class Renderer {
indexCount =
renderContext.gl.getBufferParameter(renderContext.gl.ELEMENT_ARRAY_BUFFER,
renderContext.gl.BUFFER_SIZE) / UINT32_SIZE;
if (instanceCount == null) {
if (!this.pathIDsAreInstanced) {
renderContext.gl.drawElements(renderContext.gl.TRIANGLES,
indexCount,
renderContext.gl.UNSIGNED_INT,
@ -368,7 +359,7 @@ export abstract class Renderer {
indexCount,
renderContext.gl.UNSIGNED_INT,
0,
instanceCount);
instanceRange.length);
}
renderContext.vertexArrayObjectExt.bindVertexArrayOES(null);
@ -415,7 +406,7 @@ export abstract class Renderer {
}, TIME_INTERVAL_DELAY);
}
private initImplicitCoverCurveVAO(objectIndex: number): void {
private initImplicitCoverCurveVAO(objectIndex: number, instanceRange: Range): void {
const renderContext = this.renderContext;
const meshes = this.meshes[objectIndex];
@ -438,10 +429,10 @@ export abstract class Renderer {
renderContext.gl.UNSIGNED_SHORT,
false,
0,
0);
instanceRange.start * UINT16_SIZE);
if (this.pathIDsAreInstanced) {
renderContext.instancedArraysExt
.vertexAttribDivisorANGLE(directCurveProgram.attributes.aPathID, 1);
.vertexAttribDivisorANGLE(directCurveProgram.attributes.aPathID, 1);
}
renderContext.gl.bindBuffer(renderContext.gl.ARRAY_BUFFER, meshes.bVertexLoopBlinnData);
@ -465,7 +456,7 @@ export abstract class Renderer {
meshes.coverCurveIndices);
}
private initImplicitCoverInteriorVAO(objectIndex: number): void {
private initImplicitCoverInteriorVAO(objectIndex: number, instanceRange: Range): void {
const renderContext = this.renderContext;
const meshes = this.meshes[objectIndex];
@ -488,7 +479,7 @@ export abstract class Renderer {
renderContext.gl.UNSIGNED_SHORT,
false,
0,
0);
instanceRange.start * UINT16_SIZE);
if (this.pathIDsAreInstanced) {
renderContext.instancedArraysExt
.vertexAttribDivisorANGLE(directInteriorProgram.attributes.aPathID, 1);

6
demo/client/src/shader-loader.ts
View File

@ -34,6 +34,7 @@ export const SHADER_NAMES: Array<keyof ShaderMap<void>> = [
'xcaaMonoResolve',
'xcaaMonoSubpixelResolve',
'xcaaMultiResolve',
'demo3DDistantGlyph',
'demo3DMonument',
];
@ -42,6 +43,10 @@ const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
fragment: "/glsl/gles2/blit.fs.glsl",
vertex: "/glsl/gles2/blit.vs.glsl",
},
demo3DDistantGlyph: {
fragment: "/glsl/gles2/demo-3d-distant-glyph.fs.glsl",
vertex: "/glsl/gles2/demo-3d-distant-glyph.vs.glsl",
},
demo3DMonument: {
fragment: "/glsl/gles2/demo-3d-monument.fs.glsl",
vertex: "/glsl/gles2/demo-3d-monument.vs.glsl",
@ -106,6 +111,7 @@ const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
export interface ShaderMap<T> {
blit: T;
demo3DDistantGlyph: T;
demo3DMonument: T;
directCurve: T;
directInterior: T;

1
demo/client/src/text-demo.ts
View File

@ -204,7 +204,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
this.meshes = meshes;
view.attachText();
view.renderer.uploadPathColors(1);
view.attachMeshes([this.meshes]);
});
});

1
demo/client/src/text-renderer.ts
View File

@ -226,6 +226,7 @@ export abstract class TextRenderer extends Renderer {
this.stemDarkeningAmount);
this.uploadPathTransforms(1);
this.uploadPathColors(1);
}
protected pathColorsForObject(objectIndex: number): Uint8Array {

18
demo/client/src/utils.ts
View File

@ -63,3 +63,21 @@ export class PathfinderError extends Error {
super(message);
}
}
export class Range {
start: number;
end: number;
get isEmpty(): boolean {
return this.start >= this.end;
}
get length(): number {
return this.end - this.start;
}
constructor(start: number, end: number) {
this.start = start;
this.end = end;
}
}

20
shaders/gles2/demo-3d-distant-glyph.fs.glsl Normal file
View File

@ -0,0 +1,20 @@
// pathfinder/shaders/gles2/demo-3d-distant-glyph.fs.glsl
//
// Copyright (c) 2017 The Pathfinder Project Developers.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
precision highp float;
uniform vec4 uColor;
uniform sampler2D uAtlas;
varying vec2 vTexCoord;
void main() {
gl_FragColor = uColor * texture2D(uAtlas, vTexCoord).aaaa;
}

26
shaders/gles2/demo-3d-distant-glyph.vs.glsl Normal file
View File

@ -0,0 +1,26 @@
// pathfinder/shaders/gles2/demo-3d-distant-glyph.vs.glsl
//
// Copyright (c) 2017 The Pathfinder Project Developers.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
precision highp float;
uniform mat4 uTransform;
uniform vec4 uGlyphTexCoords;
uniform vec2 uGlyphSize;
attribute vec2 aQuadPosition;
attribute vec2 aPosition;
varying vec2 vTexCoord;
void main() {
vec2 positionBL = aPosition, positionTR = aPosition + uGlyphSize;
gl_Position = uTransform * vec4(mix(positionBL, positionTR, aQuadPosition), 0.0, 1.0);
vTexCoord = mix(uGlyphTexCoords.xy, uGlyphTexCoords.zw, aQuadPosition);
}