Fix WebXR display issue for angled screens when using OpenVR

Sending the full head-from-eye transformation matrix instead of just
the translation component and then multiplying the view matrix by it
fixesthe issue of having double vision when using a headset such as the
pimax 5k with significantly angled screens through OpenVR.

Also updated naming of transforms in XRView to be more readable.

Platforms that now send the actual head-from-eye transform:
- OpenVR
- GVR

Platforms that still only send the offset, but have at least been
updated to send it via the transformation matrix. These can be updated
in separate CLs.
- WMR
- Oculus (getting full transform would require updating libovr version)
- OpenXR

Because WebVR blink code uses the same mojo structs, it required a
small update to extract the translation component from the
transformation matrix that it receives. I verified that the WebVR
behavior is still the same (doesn't work with angled screens before or
after this change, but non-angled screens work fine).

Bug: 928433
Change-Id: Icf1004bb6ced033c5e4d68bf80686aeb77c393a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1775229
Commit-Queue: Jacob DeWitt <jacde@chromium.org>
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Reviewed-by: Alexander Cooper <alcooper@chromium.org>
Reviewed-by: Klaus Weidner <klausw@chromium.org>
Cr-Commit-Position: refs/heads/master@{#693311}
diff --git a/resources/chromium/webxr-test.js b/resources/chromium/webxr-test.js
index b52ee3b..73dda09 100644
--- a/resources/chromium/webxr-test.js
+++ b/resources/chromium/webxr-test.js
@@ -45,6 +45,15 @@
           m14, m24, m34, 1];
 }
 
+function getGFXTransformFromPosition(x, y, z) {
+  let transform = new gfx.mojom.Transform();
+  transform.matrix = getMatrixFromTransform({
+    position: [x, y, z],
+    orientation: [0, 0, 0, 1]
+  });
+  return transform;
+}
+
 class ChromeXRTest {
   constructor() {
     this.mockVRService_ = new MockVRService(mojo.frameInterfaces);
@@ -369,7 +378,7 @@
           leftDegrees: 50.899,
           rightDegrees: 35.197
         },
-        offset: { x: -0.032, y: 0, z: 0 },
+        headFromEye: getGFXTransformFromPosition(-0.032, 0, 0),
         renderWidth: 20,
         renderHeight: 20
       },
@@ -380,7 +389,7 @@
           leftDegrees: 50.899,
           rightDegrees: 35.197
         },
-        offset: { x: 0.032, y: 0, z: 0 },
+        headFromEye: getGFXTransformFromPosition(0.032, 0, 0),
         renderWidth: 20,
         renderHeight: 20
       },
@@ -415,7 +424,7 @@
         leftDegrees: toDegrees(leftTan),
         rightDegrees: toDegrees(rightTan)
       },
-      offset: { x: offset[0], y: offset[1], z: offset[2] },
+      headFromEye: getGFXTransformFromPosition(offset[0], offset[1], offset[2]),
       renderWidth: fakeXRViewInit.resolution.width,
       renderHeight: fakeXRViewInit.resolution.height
     };