accommodate VR presentation changes for WebVR v1.0 API

docs/components/material.md

@@ -46,8 +46,8 @@ The material component has only a few base properties, but more properties will
 
 | Event Name              | Description                                                                                |
 |-------------------------|--------------------------------------------------------------------------------------------|
-| material-texture-loaded | Texture loaded onto material. Or when the first frame is playing for video textures.       |
-| material-video-ended    | For video textures, emitted when the video has reached its end (may not work with `loop`). |
+| materialtextureloaded | Texture loaded onto material. Or when the first frame is playing for video textures.       |
+| materialvideoended    | For video textures, emitted when the video has reached its end (may not work with `loop`). |
 
 ## Textures
 

package.json

@@ -36,7 +36,7 @@
     "style-attr": "^1.0.2",
     "three": "^0.75.0",
     "tween.js": "^15.0.0",
-    "webvr-polyfill": "borismus/webvr-polyfill#3f47796"
+    "webvr-polyfill": "borismus/webvr-polyfill#57ba04e"
   },
   "devDependencies": {
     "browserify": "^11.0.1",

src/components/scene/keyboard-shortcuts.js

@@ -16,13 +16,26 @@ module.exports.Component = registerComponent('keyboard-shortcuts', {
 
     this.listener = window.addEventListener('keyup', function (event) {
       if (!shouldCaptureKeyEvent(event)) { return; }
-      if (self.enterVREnabled && event.keyCode === 70) {  // f.
-        scene.enterVR();
+
+      if (self.enterVREnabled) {
+        if (event.keyCode === 70) {  // f.
+          scene.enterVR();
+          return;
+        }
+
+        if (navigator.getVRDisplays && event.keyCode === 27) {  // Escape.
+          // The new WebVR API doesn't use Fullscreen, so let's
+          // still exit VR when the Escape key is pressed. This also works
+          // fine in older builds using the old WebVR API.
+          scene.exitVR();
+          return;
+        }
       }
+
       if (self.resetSensorEnabled && event.keyCode === 90) {  // z.
         controls.resetSensor();
       }
-    }, false);
+    });
   },
 
   update: function (oldData) {

src/components/scene/vr-mode-ui.js

@@ -120,8 +120,8 @@ function createEnterVR (enterVRHandler, isMobile) {
   var compatModal;
   var compatModalLink;
   var compatModalText;
-  // window.hasNonPolyfillWebVRSupport is set in src/index.js.
-  var hasWebVR = isMobile || window.hasNonPolyfillWebVRSupport;
+  // window.hasNativeWebVRSupport is set in src/index.js.
+  var hasWebVR = isMobile || window.hasNativeWebVRSupport;
   var orientation;
   var vrButton;
   var wrapper;
@@ -138,6 +138,7 @@ function createEnterVR (enterVRHandler, isMobile) {
   compatModalLink.innerHTML = 'Learn more.';
   vrButton = document.createElement('button');
   vrButton.className = ENTER_VR_BTN_CLASS;
+  vrButton.title = 'Enter VR';
 
   // Insert elements.
   wrapper.appendChild(vrButton);

src/core/scene/a-scene.js

@@ -72,13 +72,15 @@ var AScene = module.exports = registerElement('a-scene', {
 
     attachedCallback: {
       value: function () {
+        var resize = this.resize.bind(this);
+        var exitVR = this.exitVR.bind(this);
         initFullscreen(this);
         initMetaTags(this);
         initWakelock(this);
-
-        window.addEventListener('load', this.resize.bind(this));
-        window.addEventListener('resize', this.resize.bind(this), false);
-        this.addEventListener('fullscreen-exit', this.exitVR.bind(this));
+        window.addEventListener('load', resize);
+        window.addEventListener('resize', resize);
+        window.addEventListener('beforeunload', exitVR);
+        this.addEventListener('fullscreen-exit', exitVR);
         this.play();
       },
       writable: window.debug
@@ -128,22 +130,27 @@ var AScene = module.exports = registerElement('a-scene', {
      */
     enterVR: {
       value: function (event) {
-        this.setStereoRenderer();
-        if (isMobile) {
-          setFullscreen(this.canvas);
-        } else {
-          this.stereoRenderer.setFullScreen(true);
-        }
-        this.addState('vr-mode');
-        this.emit('enter-vr', event);
+        var self = this;
+        self.setStereoRenderer();
+        self.stereoRenderer.requestPresent()
+        .then(function () {
+          self.addState('vr-mode');
+          self.emit('enter-vr', event);
+        })
+        .catch(console.error.bind(console));
       }
     },
 
     exitVR: {
       value: function () {
-        this.setMonoRenderer();
-        this.removeState('vr-mode');
-        this.emit('exit-vr', { target: this });
+        var self = this;
+        self.stereoRenderer.exitPresent()
+        .then(function () {
+          self.setMonoRenderer();
+          self.removeState('vr-mode');
+          self.emit('exit-vr', {target: self});
+        })
+        .catch(console.error.bind(console));
       }
     },
 
@@ -180,7 +187,7 @@ var AScene = module.exports = registerElement('a-scene', {
         camera.updateProjectionMatrix();
 
         // Notify renderer of size change.
-        this.renderer.setSize(size.width, size.height, true);
+        this.renderer.setSize(size.width, size.height);
       },
       writable: window.debug
     },
@@ -216,7 +223,7 @@ var AScene = module.exports = registerElement('a-scene', {
           antialias: antialias,
           alpha: true
         });
-        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setPixelRatio(Math.floor(window.devicePixelRatio));
         renderer.sortObjects = false;
         AScene.renderer = renderer;
         this.stereoRenderer = new THREE.VREffect(renderer);
@@ -340,19 +347,3 @@ function getCanvasSize (canvas) {
     width: canvas.offsetWidth
   };
 }
-
-/**
- * Manually handles fullscreen for non-VR mobile where the renderer' VR
- * display is not polyfilled.
- *
- * Desktop just works so use the renderer.setFullScreen in that case.
- */
-function setFullscreen (canvas) {
-  if (canvas.requestFullscreen) {
-    canvas.requestFullscreen();
-  } else if (canvas.mozRequestFullScreen) {
-    canvas.mozRequestFullScreen();
-  } else if (canvas.webkitRequestFullscreen) {
-    canvas.webkitRequestFullscreen();
-  }
-}

src/geometries/icosahedron.js

@@ -0,0 +1,13 @@
+var registerGeometry = require('../core/geometry').registerGeometry;
+var THREE = require('../lib/three');
+
+registerGeometry('icosahedron', {
+  schema: {
+    detail: {default: 0, min: 0, max: 1},
+    radius: {default: 1, min: 0}
+  },
+
+  init: function (data) {
+    this.geometry = new THREE.IcosahedronGeometry(data.radius, data.detail);
+  }
+});

src/geometries/index.js

@@ -2,6 +2,7 @@ require('./box.js');
 require('./circle.js');
 require('./cone.js');
 require('./cylinder.js');
+require('./icosahedron.js');
 require('./plane.js');
 require('./ring.js');
 require('./sphere.js');

src/index.js

@@ -30,11 +30,12 @@ require('./systems/index'); // Register standard systems.
 var ANode = require('./core/a-node');
 var AEntity = require('./core/a-entity'); // Depends on ANode and core components.
 
-// WebVR polyfill configuration.
-window.hasNonPolyfillWebVRSupport = !!navigator.getVRDevices || !!navigator.getVRDisplays;
+window.hasNativeWebVRSupport = !!navigator.getVRDevices || !!navigator.getVRDisplays;
 window.WebVRConfig = window.WebVRConfig || {
   TOUCH_PANNER_DISABLED: true,
-  MOUSE_KEYBOARD_CONTROLS_DISABLED: true
+  MOUSE_KEYBOARD_CONTROLS_DISABLED: true,
+  ENABLE_DEPRECATED_API: true,
+  BUFFER_SCALE: 0.5
 };
 require('webvr-polyfill');
 

src/lib/three.js

@@ -22,7 +22,7 @@ if (THREE.Cache) {
 require('../../node_modules/three/examples/js/loaders/OBJLoader');  // THREE.OBJLoader
 require('../../node_modules/three/examples/js/loaders/MTLLoader');  // THREE.MTLLoader
 require('../../node_modules/three/examples/js/loaders/ColladaLoader');  // THREE.ColladaLoader
-require('../../node_modules/three/examples/js/controls/VRControls');  // THREE.VRControls
-require('../../node_modules/three/examples/js/effects/VREffect');  // THREE.VREffect
+require('../../vendor/VRControls');  // THREE.VRControls
+require('../../vendor/VREffect');  // THREE.VREffect
 
 module.exports = THREE;