Change how the VR reticle distance is determined.

chrome/browser/resources/vr_shell/vr_shell_ui.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var vrShellUi = (function() {
   'use strict';
 
   let ui = new scene.Scene();
   let uiManager;
   let nativeCommandHandler;
@@ skipping 20 matching lines @@
       /** @const */ this.SCREEN_HEIGHT = 1.6;
       /** @const */ this.SCREEN_RATIO = 16 / 9;
       /** @const */ this.BROWSING_SCREEN_DISTANCE = 2.0;
       /** @const */ this.FULLSCREEN_DISTANCE = 3.0;
       /** @const */ this.CSS_WIDTH_PIXELS = 960.0;
       /** @const */ this.CSS_HEIGHT_PIXELS = 640.0;
       /** @const */ this.DPR = 1.2;
       /** @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 = 1.414;
 
       this.menuMode = false;
       this.fullscreen = false;
 
       let element = new api.UiElement(0, 0, 0, 0);
       element.setFill(new api.Content());
       element.setVisible(false);
       element.setSize(
           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) {
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
       ui.updateElement(this.elementId, update);
       if (enabled) {
         api.setContentCssSize(
             this.CSS_WIDTH_PIXELS, this.CSS_HEIGHT_PIXELS, this.DPR);
       } else {
@@ skipping 12 matching lines @@
     setFullscreen(enabled) {
       if (this.fullscreen == enabled)
         return;
       this.fullscreen = enabled;
       this.updateState()
     }
 
     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
     // animation of changing it).
 
     getElementId() {
       return this.elementId;
     }
   };
 
@@ skipping 132 matching lines @@
       this.devMode = false;
 
       this.uiElement = new DomUiElement('#reload-ui-button');
       this.uiElement.domElement.addEventListener('click', function() {
         ui.purge();
         api.doAction(api.Action.RELOAD_UI, {});
       });
 
       let update = new api.UiElementUpdate();
       update.setVisible(false);
-      update.setSize(0.5, 0.2);
-      update.setTranslation(0, -2, -1);
+      update.setSize(0.25, 0.1);
+      update.setTranslation(0, -1.5, -1.5);
       update.setRotation(1, 0, 0, -0.8);
       ui.updateElement(this.uiElement.uiElementId, update);
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.updateState();
     }
 
     setDevMode(enabled) {
@@ skipping 292 matching lines @@
         g: this.HORIZON_COLOR.g,
         b: this.HORIZON_COLOR.b,
         a: 0
       };
       groundGrid.setFill(new api.GridGradient(
           transparentHorizonColor, this.HORIZON_COLOR, this.GRIDLINE_COUNT));
       groundGrid.setTranslation(0, -this.SCENE_HEIGHT / 2 + 0.01, 0);
       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) {
       let groundPlaneUpdate = new api.UiElementUpdate();
       groundPlaneUpdate.setVisible(enabled);
       ui.updateElement(this.groundPlaneId, groundPlaneUpdate);
       let ceilingPlaneUpdate = new api.UiElementUpdate();
       ceilingPlaneUpdate.setVisible(enabled);
       ui.updateElement(this.ceilingPlaneId, ceilingPlaneUpdate);
       let groundGridUpdate = new api.UiElementUpdate();
@@ skipping 377 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);