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:
parent
0087c1ed50
commit
42151cc334
|
@ -26,7 +26,9 @@ import * as _ from "lodash";
|
||||||
import PathfinderBufferTexture from "./buffer-texture";
|
import PathfinderBufferTexture from "./buffer-texture";
|
||||||
|
|
||||||
const TEXT_AVAILABLE_WIDTH: number = 150000;
|
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";
|
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 FOV: number = 45.0;
|
||||||
const NEAR_CLIP_PLANE: number = 0.1;
|
const NEAR_CLIP_PLANE: number = 0.1;
|
||||||
const FAR_CLIP_PLANE: number = 3000.0;
|
const FAR_CLIP_PLANE: number = 10000.0;
|
||||||
|
|
||||||
const SCALE: glmatrix.vec3 = glmatrix.vec3.fromValues(1.0 / 200.0, 1.0 / 200.0, 1.0 / 200.0);
|
|
||||||
|
|
||||||
const TEXT_TRANSLATION: number[] = [
|
const TEXT_TRANSLATION: number[] = [
|
||||||
-(TEXT_AVAILABLE_WIDTH + PADDING) * 0.5,
|
-TEXT_AVAILABLE_WIDTH * 0.5,
|
||||||
0.0,
|
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_TRANSLATION: glmatrix.vec3 = glmatrix.vec3.fromValues(0.0, -690.0, 0.0);
|
||||||
const MONUMENT_SCALE: glmatrix.vec3 =
|
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,
|
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 TEXT_COLOR: Uint8Array = new Uint8Array([0xf2, 0xf8, 0xf8, 0xff]);
|
||||||
const MONUMENT_COLOR: number[] = [0x70 / 0xff, 0x80 / 0xff, 0x80 / 0xff];
|
const MONUMENT_COLOR: number[] = [0x70 / 0xff, 0x80 / 0xff, 0x80 / 0xff];
|
||||||
|
@ -290,6 +288,10 @@ class ThreeDView extends PathfinderDemoView {
|
||||||
|
|
||||||
// Draw the monument!
|
// Draw the monument!
|
||||||
this.gl.drawElements(this.gl.TRIANGLES, CUBE_INDICES.length, this.gl.UNSIGNED_SHORT, 0);
|
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 {}
|
protected compositeIfNecessary(): void {}
|
||||||
|
@ -339,7 +341,7 @@ class ThreeDView extends PathfinderDemoView {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected get worldTransform() {
|
protected get worldTransform() {
|
||||||
return this.calculateWorldTransform(glmatrix.vec3.create(), SCALE);
|
return this.calculateWorldTransform(glmatrix.vec3.create(), TEXT_SCALE);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getModelviewTransform(objectIndex: number): glmatrix.mat4 {
|
protected getModelviewTransform(objectIndex: number): glmatrix.mat4 {
|
||||||
|
@ -349,6 +351,18 @@ class ThreeDView extends PathfinderDemoView {
|
||||||
return transform;
|
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 directCurveProgramName: keyof ShaderMap<void> = 'direct3DCurve';
|
||||||
protected directInteriorProgramName: keyof ShaderMap<void> = 'direct3DInterior';
|
protected directInteriorProgramName: keyof ShaderMap<void> = 'direct3DInterior';
|
||||||
|
|
||||||
|
|
|
@ -329,6 +329,9 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
|
|
||||||
private renderDirect() {
|
private renderDirect() {
|
||||||
for (let objectIndex = 0; objectIndex < this.meshes.length; objectIndex++) {
|
for (let objectIndex = 0; objectIndex < this.meshes.length; objectIndex++) {
|
||||||
|
if (!this.shouldRenderObject(objectIndex))
|
||||||
|
continue;
|
||||||
|
|
||||||
const meshes = this.meshes[objectIndex];
|
const meshes = this.meshes[objectIndex];
|
||||||
|
|
||||||
// Set up implicit cover state.
|
// 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);
|
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected shouldRenderObject(objectIndex: number): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
uploadPathColors(objectCount: number) {
|
uploadPathColors(objectCount: number) {
|
||||||
this.pathColorsBufferTextures = [];
|
this.pathColorsBufferTextures = [];
|
||||||
|
|
||||||
|
@ -540,7 +547,6 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
pathTransformBufferTexture.upload(this.gl, pathTransforms);
|
pathTransformBufferTexture.upload(this.gl, pathTransforms);
|
||||||
this.pathTransformBufferTextures.push(pathTransformBufferTexture);
|
this.pathTransformBufferTextures.push(pathTransformBufferTexture);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected newTimingsReceived() {}
|
protected newTimingsReceived() {}
|
||||||
|
|
Loading…
Reference in New Issue