Use correct projection and view matrices
This commit is contained in:
parent
975685c23b
commit
148e77d995
|
@ -124,6 +124,15 @@ interface MeshDescriptor {
|
||||||
positions: glmatrix.vec2[];
|
positions: glmatrix.vec2[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function F32ArrayToMat4(array: Float32Array): mat4 {
|
||||||
|
const mat = glmatrix.mat4.create();
|
||||||
|
glmatrix.mat4.set(mat, array[0], array[1], array[2], array[3],
|
||||||
|
array[4], array[5], array[6], array[7],
|
||||||
|
array[8], array[9], array[10], array[11],
|
||||||
|
array[12], array[13], array[14], array[15]);
|
||||||
|
return mat;
|
||||||
|
}
|
||||||
|
|
||||||
class ThreeDController extends DemoAppController<ThreeDView> {
|
class ThreeDController extends DemoAppController<ThreeDView> {
|
||||||
font!: PathfinderFont;
|
font!: PathfinderFont;
|
||||||
textFrames!: TextFrame[];
|
textFrames!: TextFrame[];
|
||||||
|
@ -422,6 +431,8 @@ class ThreeDRenderer extends Renderer {
|
||||||
|
|
||||||
private distantGlyphVAO: WebGLVertexArrayObjectOES | null;
|
private distantGlyphVAO: WebGLVertexArrayObjectOES | null;
|
||||||
|
|
||||||
|
private vrProjectionMatrix: Float32Array | null;
|
||||||
|
|
||||||
constructor(renderContext: ThreeDView) {
|
constructor(renderContext: ThreeDView) {
|
||||||
super(renderContext);
|
super(renderContext);
|
||||||
|
|
||||||
|
@ -433,7 +444,7 @@ class ThreeDRenderer extends Renderer {
|
||||||
this.glyphSizes = [];
|
this.glyphSizes = [];
|
||||||
|
|
||||||
this.distantGlyphVAO = null;
|
this.distantGlyphVAO = null;
|
||||||
|
this.vrProjectionMatrix = null;
|
||||||
this.camera = new PerspectiveCamera(renderContext.canvas, {
|
this.camera = new PerspectiveCamera(renderContext.canvas, {
|
||||||
innerCollisionExtent: MONUMENT_SCALE[0],
|
innerCollisionExtent: MONUMENT_SCALE[0],
|
||||||
});
|
});
|
||||||
|
@ -472,6 +483,15 @@ class ThreeDRenderer extends Renderer {
|
||||||
this.renderContext.gl.uniform4f(uniforms.uHints, 0, 0, 0, 0);
|
this.renderContext.gl.uniform4f(uniforms.uHints, 0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
redrawVR(frame: VRFrameData): void {
|
||||||
|
this.vrProjectionMatrix = frame.leftProjectionMatrix;
|
||||||
|
this.camera.setView(F32ArrayToMat4(frame.leftViewMatrix), frame.pose);
|
||||||
|
this.redraw();
|
||||||
|
this.vrProjectionMatrix = frame.rightProjectionMatrix;
|
||||||
|
this.camera.setView(F32ArrayToMat4(frame.rightViewMatrix), frame.pose);
|
||||||
|
this.redraw();
|
||||||
|
}
|
||||||
|
|
||||||
pathTransformsForObject(objectIndex: number): PathTransformBuffers<Float32Array> {
|
pathTransformsForObject(objectIndex: number): PathTransformBuffers<Float32Array> {
|
||||||
const meshDescriptor = this.renderContext.appController.meshDescriptors[objectIndex];
|
const meshDescriptor = this.renderContext.appController.meshDescriptors[objectIndex];
|
||||||
const pathCount = this.pathCountForObject(objectIndex);
|
const pathCount = this.pathCountForObject(objectIndex);
|
||||||
|
@ -811,6 +831,9 @@ class ThreeDRenderer extends Renderer {
|
||||||
}
|
}
|
||||||
|
|
||||||
private calculateProjectionTransform(): glmatrix.mat4 {
|
private calculateProjectionTransform(): glmatrix.mat4 {
|
||||||
|
if (this.vrProjectionMatrix != null) {
|
||||||
|
return F32ArrayToMat4(this.vrProjectionMatrix);
|
||||||
|
}
|
||||||
const canvas = this.renderContext.canvas;
|
const canvas = this.renderContext.canvas;
|
||||||
const projection = glmatrix.mat4.create();
|
const projection = glmatrix.mat4.create();
|
||||||
glmatrix.mat4.perspective(projection,
|
glmatrix.mat4.perspective(projection,
|
||||||
|
|
|
@ -325,6 +325,8 @@ export class PerspectiveCamera extends Camera {
|
||||||
|
|
||||||
private readonly innerCollisionExtent: number;
|
private readonly innerCollisionExtent: number;
|
||||||
|
|
||||||
|
private vrRotationMatrix: glmatrix.mat4 | null;
|
||||||
|
|
||||||
constructor(canvas: HTMLCanvasElement, options?: PerspectiveCameraOptions) {
|
constructor(canvas: HTMLCanvasElement, options?: PerspectiveCameraOptions) {
|
||||||
super(canvas);
|
super(canvas);
|
||||||
|
|
||||||
|
@ -345,6 +347,7 @@ export class PerspectiveCamera extends Camera {
|
||||||
window.addEventListener('keyup', event => this.onKeyUp(event), false);
|
window.addEventListener('keyup', event => this.onKeyUp(event), false);
|
||||||
|
|
||||||
this.onChange = null;
|
this.onChange = null;
|
||||||
|
this.vrRotationMatrix = null;
|
||||||
|
|
||||||
this.wasdPress = _.fromPairs([
|
this.wasdPress = _.fromPairs([
|
||||||
['W'.charCodeAt(0), false],
|
['W'.charCodeAt(0), false],
|
||||||
|
@ -370,6 +373,10 @@ export class PerspectiveCamera extends Camera {
|
||||||
// TODO(pcwalton)
|
// TODO(pcwalton)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setView(rotation: glmatrix.mat4, pose: VRPose) {
|
||||||
|
this.vrRotationMatrix = rotation;
|
||||||
|
}
|
||||||
|
|
||||||
private onMouseDown(event: MouseEvent): void {
|
private onMouseDown(event: MouseEvent): void {
|
||||||
if (document.pointerLockElement !== this.canvas) {
|
if (document.pointerLockElement !== this.canvas) {
|
||||||
this.canvas.requestPointerLock();
|
this.canvas.requestPointerLock();
|
||||||
|
@ -487,6 +494,10 @@ export class PerspectiveCamera extends Camera {
|
||||||
}
|
}
|
||||||
|
|
||||||
get rotationMatrix(): glmatrix.mat4 {
|
get rotationMatrix(): glmatrix.mat4 {
|
||||||
|
if (this.vrRotationMatrix != null) {
|
||||||
|
// This actually is a rotation + translation matrix, but it works
|
||||||
|
return this.vrRotationMatrix;
|
||||||
|
}
|
||||||
const matrix = glmatrix.mat4.create();
|
const matrix = glmatrix.mat4.create();
|
||||||
glmatrix.mat4.fromXRotation(matrix, this.rotation[1]);
|
glmatrix.mat4.fromXRotation(matrix, this.rotation[1]);
|
||||||
glmatrix.mat4.rotateY(matrix, matrix, this.rotation[0]);
|
glmatrix.mat4.rotateY(matrix, matrix, this.rotation[0]);
|
||||||
|
|
Loading…
Reference in New Issue