Revert "extend PR #2985 (moved canvas init) to also solve issue #2967 …

…(vr2vr traversal in Oculus Browser)" (#2995)

* Revert "Update master CDN URL. (https://rawgit.com/aframevr/aframe/fad376f/dist/aframe-master.min.js)"

This reverts commit d576691.

* Revert "Bump aframe-master dist/ builds. (c9c7bfc...5214a16)"

This reverts commit fad376f.

* Revert "extend PR #2985 (moved canvas init) to also solve issue #2967 (vr2vr traversal in Oculus Browser) (#2991)"

This reverts commit 5214a16.

src/components/index.js

@@ -26,6 +26,7 @@ require('./visible');
 require('./vive-controls');
 require('./wasd-controls');
 
+require('./scene/canvas');
 require('./scene/debug');
 require('./scene/embedded');
 require('./scene/inspector');

src/components/scene/canvas.js

@@ -0,0 +1,43 @@
+var bind = require('../../utils/bind');
+var registerComponent = require('../../core/component').registerComponent;
+
+module.exports.Component = registerComponent('canvas', {
+  init: function () {
+    var canvasEl;
+    var sceneEl = this.el;
+
+    canvasEl = document.createElement('canvas');
+    canvasEl.classList.add('a-canvas');
+    // Mark canvas as provided/injected by A-Frame.
+    canvasEl.dataset.aframeCanvas = true;
+    sceneEl.appendChild(canvasEl);
+
+    document.addEventListener('fullscreenchange', onFullScreenChange);
+    document.addEventListener('mozfullscreenchange', onFullScreenChange);
+    document.addEventListener('webkitfullscreenchange', onFullScreenChange);
+
+    // Prevent overscroll on mobile.
+    canvasEl.addEventListener('touchmove', function (event) {
+      event.preventDefault();
+    });
+
+    // Set canvas on scene.
+    sceneEl.canvas = canvasEl;
+    sceneEl.emit('render-target-loaded', {target: canvasEl});
+
+    // For unknown reasons a syncrhonous resize does not work on desktop when
+    // entering/exiting fullscreen.
+    setTimeout(bind(sceneEl.resize, sceneEl), 0);
+
+    function onFullScreenChange () {
+      var fullscreenEl =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement;
+      // No fullscren element === exit fullscreen
+      if (!fullscreenEl) { sceneEl.exitVR(); }
+      document.activeElement.blur();
+      document.body.focus();
+    }
+  }
+});

src/core/scene/a-scene.js

@@ -39,6 +39,7 @@ module.exports.AScene = registerElement('a-scene', {
   prototype: Object.create(AEntity.prototype, {
     defaultComponents: {
       value: {
+        'canvas': '',
         'inspector': '',
         'keyboard-shortcuts': '',
         'screenshot': '',
@@ -67,9 +68,10 @@ module.exports.AScene = registerElement('a-scene', {
         this.isPlaying = false;
         this.originalHTML = this.innerHTML;
         this.renderTarget = null;
-        this.setupCanvas();
-        this.setupRenderer();
-        this.resize();
+        this.addEventListener('render-target-loaded', function () {
+          this.setupRenderer();
+          this.resize();
+        });
         this.addFullScreenStyles();
         initPostMessageAPI(this);
       },
@@ -120,8 +122,8 @@ module.exports.AScene = registerElement('a-scene', {
         this.exitVRBound = function () { self.exitVR(); };
         this.exitVRTrueBound = function () { self.exitVR(true); };
 
-        // There is already a listener for `vrdisplayactivate` (e.g. putting on Rift headset),
-        // since that event is also used for in-VR traversal, much earlier in the lifecycle.
+        // Enter VR on `vrdisplayactivate` (e.g. putting on Rift headset).
+        window.addEventListener('vrdisplayactivate', this.enterVRBound);
 
         // Exit VR on `vrdisplaydeactivate` (e.g. taking off Rift headset).
         window.addEventListener('vrdisplaydeactivate', this.exitVRBound);
@@ -222,14 +224,13 @@ module.exports.AScene = registerElement('a-scene', {
     enterVR: {
       value: function (fromExternal) {
         var self = this;
-        var effect = this.effect;
 
         // Don't enter VR if already in VR.
         if (this.is('vr-mode')) { return Promise.resolve('Already in VR.'); }
 
         // Enter VR via WebVR API.
         if (!fromExternal && (this.checkHeadsetConnected() || this.isMobile)) {
-          return effect && effect.requestPresent().then(enterVRSuccess, enterVRFailure) || Promise.reject(new Error('VREffect not initialized'));
+          return this.effect.requestPresent().then(enterVRSuccess, enterVRFailure);
         }
 
         // Either entered VR already via WebVR API or VR not supported.
@@ -430,9 +431,7 @@ module.exports.AScene = registerElement('a-scene', {
 
     setupRenderer: {
       value: function () {
-        var renderer;
-
-        renderer = this.renderer = new THREE.WebGLRenderer({
+        var renderer = this.renderer = new THREE.WebGLRenderer({
           canvas: this.canvas,
           antialias: shouldAntiAlias(this),
           alpha: true
@@ -450,46 +449,6 @@ module.exports.AScene = registerElement('a-scene', {
       writable: window.debug
     },
 
-    setupCanvas: {
-      value: function () {
-        var canvasEl;
-        var sceneEl = this;
-
-        canvasEl = document.createElement('canvas');
-        canvasEl.classList.add('a-canvas');
-        // Mark canvas as provided/injected by A-Frame.
-        canvasEl.dataset.aframeCanvas = true;
-        sceneEl.appendChild(canvasEl);
-
-        document.addEventListener('fullscreenchange', onFullScreenChange);
-        document.addEventListener('mozfullscreenchange', onFullScreenChange);
-        document.addEventListener('webkitfullscreenchange', onFullScreenChange);
-
-        // Prevent overscroll on mobile.
-        canvasEl.addEventListener('touchmove', function (event) {
-          event.preventDefault();
-        });
-
-        // Set canvas on scene.
-        sceneEl.canvas = canvasEl;
-        sceneEl.emit('render-target-loaded', {target: canvasEl});
-        // For unknown reasons a syncrhonous resize does not work on desktop when
-        // entering/exiting fullscreen.
-        setTimeout(bind(sceneEl.resize, sceneEl), 0);
-
-        function onFullScreenChange () {
-          var fullscreenEl =
-            document.fullscreenElement ||
-            document.mozFullScreenElement ||
-            document.webkitFullscreenElement;
-          // No fullscren element === exit fullscreen
-          if (!fullscreenEl) { sceneEl.exitVR(); }
-          document.activeElement.blur();
-          document.body.focus();
-        }
-      }
-    },
-
     /**
      * Handler attached to elements to help scene know when to kick off.
      * Scene waits for all entities to load.

src/index.js

@@ -113,11 +113,3 @@ module.exports = window.AFRAME = {
   utils: utils,
   version: pkg.version
 };
-
-// Enter VR on `vrdisplayactivate`, to handle in-VR traversal much earlier in the lifecycle.
-// This event may also fire in other circumstances (e.g. putting on the Rift headset).
-window.addEventListener('vrdisplayactivate', function (evt) {
-  if (window.AFRAME.scenes.length > 0) {
-    window.AFRAME.scenes[0].enterVR();
-  }
-});

tests/components/scene/canvas.test.js

@@ -0,0 +1,13 @@
+ /* global assert, process, suite, test */
+
+suite('canvas', function () {
+  test('adds canvas to a-scene element', function (done) {
+    var el = this.sceneEl = document.createElement('a-scene');
+    document.body.appendChild(el);
+    el.addEventListener('loaded', function () {
+      el.setAttribute('canvas', '');
+      assert.ok(el.querySelector('canvas'));
+      done();
+    });
+  });
+});

tests/core/scene/a-scene.test.js

@@ -385,7 +385,7 @@ suite('a-scene (without renderer)', function () {
       var sceneEl = this.el;
       sceneEl.innerHTML = 'NEW';
       sceneEl.reload();
-      assert.equal(sceneEl.innerHTML, '<canvas class="a-canvas" data-aframe-canvas="true"></canvas>');
+      assert.equal(sceneEl.innerHTML, '');
     });
 
     test('reloads the scene and pauses', function () {
@@ -605,16 +605,6 @@ suite('scenes', function () {
   });
 });
 
-suite('setupCanvas', function () {
-  test('adds canvas to a-scene element', function () {
-    var el = this.sceneEl = document.createElement('a-scene');
-    el.canvas = undefined;
-    assert.notOk(el.canvas);
-    el.setupCanvas();
-    assert.ok(el.canvas);
-  });
-});
-
 suite('shouldAntiAlias', function () {
   var sceneEl;