Change how the VR reticle distance is determined.

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index d0082161a09b61aa6363955f026b8212fe441f38..e36be57dfbeb91a4bf5e6fe117f9e9dd098f41a1 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -38,6 +38,7 @@ var vrShellUi = (function() {
       /** @const */ this.MENU_MODE_SCREEN_DISTANCE = 1.2;
       /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.5;
       /** @const */ this.MENU_MODE_SCREEN_ELEVATION = 0.1;
+      /** @const */ this.BACKGROUND_DISTANCE_MULTIPLIER = 2.0;

[mthiesse, 2017/02/21 15:40:45]

Multiplier seems strange, probably a constant offset would be better? (2x
distance sounds like it would be too far back too, but I haven't played with it)

[cjgrant, 2017/02/21 16:25:33]

The multiplier approach is trying to make the distance scale with the quad (for
example, if we switch to a huge content quad 10 meters back, but use a constant
offset, our radius may then be 11 meters, which could cut through the content
quad itself).  I think we need to scale with content distance and size. 
However, maybe a better multiplier is root(2) times distance to the backing
plane, such that we transition from backing to sphere at 45 degrees from center,
rather than farther out.

Thoughts?

 
       this.menuMode = false;
       this.fullscreen = false;
@@ -49,6 +50,18 @@ var vrShellUi = (function() {
           this.SCREEN_HEIGHT * this.SCREEN_RATIO, this.SCREEN_HEIGHT);
       element.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
       this.elementId = ui.addElement(element);
+
+      // Place an invisible but hittable plane behind the content quad, to keep
+      // the reticle roughly planar with the content if near content.
+      let backPlane = new api.UiElement(0, 0, 0, 0);
+      backPlane.setVisible(false);
+      backPlane.setHitTestable(true);
+      backPlane.setSize(1000, 1000);
+      backPlane.setTranslation(0, 0, -0.01);
+      backPlane.setParentId(this.elementId);
+      ui.addElement(backPlane);
+
+      this.updateState();
     }
 
     setEnabled(enabled) {
@@ -81,25 +94,27 @@ var vrShellUi = (function() {
     updateState() {
       // Defaults content quad parameters.
       let y = 0;
-      let z = -this.BROWSING_SCREEN_DISTANCE;
+      let distance = this.BROWSING_SCREEN_DISTANCE;
       let height = this.SCREEN_HEIGHT;
 
       // Mode-specific overrides.
       if (this.menuMode) {
         y = this.MENU_MODE_SCREEN_ELEVATION;
-        z = -this.MENU_MODE_SCREEN_DISTANCE;
+        distance = this.MENU_MODE_SCREEN_DISTANCE;
         height = this.MENU_MODE_SCREEN_HEIGHT;
       } else if (this.fullscreen) {
-        z = -this.FULLSCREEN_DISTANCE;
+        distance = this.FULLSCREEN_DISTANCE;
       }
 
       let anim;
       anim = new api.Animation(this.elementId, ANIM_DURATION);
-      anim.setTranslation(0, y, z);
+      anim.setTranslation(0, y, -distance);
       ui.addAnimation(anim);
       anim = new api.Animation(this.elementId, ANIM_DURATION);
       anim.setSize(height * this.SCREEN_RATIO, height);
       ui.addAnimation(anim);
+
+      ui.setBackgroundDistance(distance * this.BACKGROUND_DISTANCE_MULTIPLIER);
     }
 
     // TODO(crbug/643815): Add a method setting aspect ratio (and possible
@@ -566,6 +581,8 @@ var vrShellUi = (function() {
       groundGrid.setRotation(1.0, 0.0, 0.0, -Math.PI / 2);
       groundGrid.setDrawPhase(0);
       this.groundGridId = ui.addElement(groundGrid);
+
+      ui.setBackgroundColor(this.HORIZON_COLOR);
     }
 
     setEnabled(enabled) {