Fix text positioning and improve performance in the 3D demo.

This implements a simple form of software backface culling to reduce vertex shading load.
This commit is contained in:
Patrick Walton 2017-09-14 15:16:06 -07:00
parent 0087c1ed50
commit 42151cc334
2 changed files with 32 additions and 12 deletions

View File

@ -26,7 +26,9 @@ import * as _ from "lodash";
import PathfinderBufferTexture from "./buffer-texture";
const TEXT_AVAILABLE_WIDTH: number = 150000;
const PADDING: number = 2000;
const TEXT_PADDING: number = 2000;
const TEXT_SCALE: glmatrix.vec3 = glmatrix.vec3.fromValues(1.0 / 200.0, 1.0 / 200.0, 1.0 / 200.0);
const TEXT_DATA_URI: string = "/data/mozmonument.json";
@ -36,23 +38,19 @@ const PIXELS_PER_UNIT: number = 1.0;
const FOV: number = 45.0;
const NEAR_CLIP_PLANE: number = 0.1;
const FAR_CLIP_PLANE: number = 3000.0;
const SCALE: glmatrix.vec3 = glmatrix.vec3.fromValues(1.0 / 200.0, 1.0 / 200.0, 1.0 / 200.0);
const FAR_CLIP_PLANE: number = 10000.0;
const TEXT_TRANSLATION: number[] = [
-(TEXT_AVAILABLE_WIDTH + PADDING) * 0.5,
-TEXT_AVAILABLE_WIDTH * 0.5,
0.0,
(TEXT_AVAILABLE_WIDTH + PADDING) * 0.5
TEXT_AVAILABLE_WIDTH * 0.5 + TEXT_PADDING,
];
const TEXT_DECAL_OFFSET: number = 5.0;
const MONUMENT_TRANSLATION: glmatrix.vec3 = glmatrix.vec3.fromValues(0.0, -690.0, 0.0);
const MONUMENT_SCALE: glmatrix.vec3 =
glmatrix.vec3.fromValues((TEXT_AVAILABLE_WIDTH + PADDING) / 400.0 - TEXT_DECAL_OFFSET,
glmatrix.vec3.fromValues((TEXT_AVAILABLE_WIDTH * 0.5 + TEXT_PADDING) * TEXT_SCALE[0],
700.0,
(TEXT_AVAILABLE_WIDTH + PADDING) / 400.0 - TEXT_DECAL_OFFSET);
(TEXT_AVAILABLE_WIDTH * 0.5 + TEXT_PADDING) * TEXT_SCALE[2]);
const TEXT_COLOR: Uint8Array = new Uint8Array([0xf2, 0xf8, 0xf8, 0xff]);
const MONUMENT_COLOR: number[] = [0x70 / 0xff, 0x80 / 0xff, 0x80 / 0xff];
@ -290,6 +288,10 @@ class ThreeDView extends PathfinderDemoView {
// Draw the monument!
this.gl.drawElements(this.gl.TRIANGLES, CUBE_INDICES.length, this.gl.UNSIGNED_SHORT, 0);
// Clear to avoid Z-fighting.
this.gl.clearDepth(1.0);
this.gl.clear(this.gl.DEPTH_BUFFER_BIT);
}
protected compositeIfNecessary(): void {}
@ -339,7 +341,7 @@ class ThreeDView extends PathfinderDemoView {
}
protected get worldTransform() {
return this.calculateWorldTransform(glmatrix.vec3.create(), SCALE);
return this.calculateWorldTransform(glmatrix.vec3.create(), TEXT_SCALE);
}
protected getModelviewTransform(objectIndex: number): glmatrix.mat4 {
@ -349,6 +351,18 @@ class ThreeDView extends PathfinderDemoView {
return transform;
}
// Cheap but effective backface culling.
protected shouldRenderObject(objectIndex: number): boolean {
const translation = this.camera.translation;
const extent = TEXT_TRANSLATION[2] * TEXT_SCALE[2];
switch (objectIndex) {
case 0: return translation[2] < -extent;
case 1: return translation[0] < -extent;
case 2: return translation[2] > extent;
default: return translation[0] > extent;
}
}
protected directCurveProgramName: keyof ShaderMap<void> = 'direct3DCurve';
protected directInteriorProgramName: keyof ShaderMap<void> = 'direct3DInterior';

View File

@ -329,6 +329,9 @@ export abstract class PathfinderDemoView extends PathfinderView {
private renderDirect() {
for (let objectIndex = 0; objectIndex < this.meshes.length; objectIndex++) {
if (!this.shouldRenderObject(objectIndex))
continue;
const meshes = this.meshes[objectIndex];
// Set up implicit cover state.
@ -518,6 +521,10 @@ export abstract class PathfinderDemoView extends PathfinderView {
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
}
protected shouldRenderObject(objectIndex: number): boolean {
return true;
}
uploadPathColors(objectCount: number) {
this.pathColorsBufferTextures = [];
@ -540,7 +547,6 @@ export abstract class PathfinderDemoView extends PathfinderView {
pathTransformBufferTexture.upload(this.gl, pathTransforms);
this.pathTransformBufferTextures.push(pathTransformBufferTexture);
}
}
protected newTimingsReceived() {}