Use correct projection and view matrices

demo/client/src/3d-demo.ts

@@ -124,6 +124,15 @@ interface MeshDescriptor {
     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> {
     font!: PathfinderFont;
     textFrames!: TextFrame[];
@@ -422,6 +431,8 @@ class ThreeDRenderer extends Renderer {
 
     private distantGlyphVAO: WebGLVertexArrayObjectOES | null;
 
+    private vrProjectionMatrix: Float32Array | null;
+
     constructor(renderContext: ThreeDView) {
         super(renderContext);
 
@@ -433,7 +444,7 @@ class ThreeDRenderer extends Renderer {
         this.glyphSizes = [];
 
         this.distantGlyphVAO = null;
-
+        this.vrProjectionMatrix = null;
         this.camera = new PerspectiveCamera(renderContext.canvas, {
             innerCollisionExtent: MONUMENT_SCALE[0],
         });
@@ -472,6 +483,15 @@ class ThreeDRenderer extends Renderer {
         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> {
         const meshDescriptor = this.renderContext.appController.meshDescriptors[objectIndex];
         const pathCount = this.pathCountForObject(objectIndex);
@@ -811,6 +831,9 @@ class ThreeDRenderer extends Renderer {
     }
 
     private calculateProjectionTransform(): glmatrix.mat4 {
+        if (this.vrProjectionMatrix != null) {
+            return F32ArrayToMat4(this.vrProjectionMatrix);
+        }
         const canvas = this.renderContext.canvas;
         const projection = glmatrix.mat4.create();
         glmatrix.mat4.perspective(projection,

demo/client/src/camera.ts

@@ -325,6 +325,8 @@ export class PerspectiveCamera extends Camera {
 
     private readonly innerCollisionExtent: number;
 
+    private vrRotationMatrix: glmatrix.mat4 | null;
+
     constructor(canvas: HTMLCanvasElement, options?: PerspectiveCameraOptions) {
         super(canvas);
 
@@ -345,6 +347,7 @@ export class PerspectiveCamera extends Camera {
         window.addEventListener('keyup', event => this.onKeyUp(event), false);
 
         this.onChange = null;
+        this.vrRotationMatrix = null;
 
         this.wasdPress = _.fromPairs([
             ['W'.charCodeAt(0), false],
@@ -370,6 +373,10 @@ export class PerspectiveCamera extends Camera {
         // TODO(pcwalton)
     }
 
+    setView(rotation: glmatrix.mat4, pose: VRPose) {
+        this.vrRotationMatrix = rotation;
+    }
+
     private onMouseDown(event: MouseEvent): void {
         if (document.pointerLockElement !== this.canvas) {
             this.canvas.requestPointerLock();
@@ -487,6 +494,10 @@ export class PerspectiveCamera extends Camera {
     }
 
     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();
         glmatrix.mat4.fromXRotation(matrix, this.rotation[1]);
         glmatrix.mat4.rotateY(matrix, matrix, this.rotation[0]);