Merge pull request #328 from caseyyee/js-refactor

Refactors webvr.js

Author: caseyyee

Assets/WebGLTemplates/WebVR/index.html

@@ -38,32 +38,12 @@
           onProgress: unityProgress
         });
 
-        function onActivate (evt) {
-          return new Promise(function (resolve, reject) {
-            if (!evt.display) {
-              return reject(new Error('No `display` property found on event'));
-            }
-            if (evt.reason && evt.reason !== 'navigation') {
-              return reject(new Error("Unexpected `reason` (expected to be 'navigation')"));
-            }
-            if (!evt.display.capabilities || !evt.display.capabilities.canPresent) {
-              return reject(new Error('VR display is not capable of presenting'));
-            }
-            gameInstance.vrDisplay = evt.display;
-            return evt.display.requestPresent([{source: gameInstance.Module.canvas}]).then(function () {
-              console.log('Entered VR mode');
-            }).catch(function (err) {
-              console.error('Unable to enter VR mode:', err);
-            });
-          });
-        }
-        window.addEventListener('vrdisplayactivate', onActivate);
-
         function unityProgress (gameInstance, progress) {
           if (!gameInstance.progress) {
             gameInstance.loader = document.getElementById('loader');
             gameInstance.progress = document.getElementById('progress');
             gameInstance.loading = document.getElementById('loading');
+            document.dispatchEvent(new CustomEvent('UnityProgressStart'));
           }
           gameInstance.progress.style.width = (100 * progress) + '%';
           if (progress === 1) {
@@ -95,19 +75,9 @@ <h3>You&rsquo;ll need a <a href="https://webvr.rocks/">WebVR-enabled browser</a>
       </div>
     </div>
 
-    <div id="vr">
-      <div id="status">
-        <strong>Ready!</strong>
-        <div id="icons">
-          <img src="vr.png" height="36" alt="VR icon">
-          <template id="motion-controller">
-            <img src="motion-controllers.png" height="33" alt="Motion Controller icon">
-          </template>
-        </div>
-        <small><a href="https://webvr.rocks/">Not working?</a></small>
-      </div>
-      <button id="entervr" value="Enter VR"></button>
-    </div>
+    <button id="entervr" value="Enter VR"></button>
+
+    <div id="performance" data-enabled="false"></div>
 
     <script src="vendor/gl-matrix-min.js"></script>
     <script src="vendor/webvr-polyfill.min.js"></script>

Assets/WebGLTemplates/WebVR/styles/webvr.css

@@ -82,20 +82,27 @@ a:link, a:visited {
   z-index: 0;
 }
 
-#vr {
-  position: absolute;
-  display: flex;
-  right: 30px;
-  bottom: 30px;
-}
-
 #status {
   display: none;
   background: #fff;
   margin-right: 15px;
   padding: 10px;
 }
 
+#performance[data-enabled='true'] {
+  display: block;
+  position: absolute;
+  left: 30px;
+  bottom: 30px;
+  color: #fff;
+  padding: 10px;
+  background: #000;
+}
+
+#performance[data-enabled='false'] {
+  display: none;
+}
+
 [data-unity-loaded='true'] #status[data-enabled='true'] {
   display: block;
 }
@@ -105,12 +112,16 @@ a:link, a:visited {
 }
 
 #entervr {
-  background: #fff url(../vr.png) center no-repeat;
-  background-size: 80%;
-  cursor: pointer;
   display: none;
+  position: absolute;
   height: 100px;
   width: 100px;
+  right: 30px;
+  bottom: 30px;
+  background: #fff url(../vr.png) center no-repeat;
+  background-size: 80%;
+  border: none;
+  cursor: pointer;
 }
 
 [data-unity-loaded='true'] #entervr[data-enabled='true'] {
@@ -137,6 +148,7 @@ a:link, a:visited {
 #instruction button {
   color: #fff;
   cursor: pointer;
+  border: none;
   font-size: 25px;
   padding: 15px 20px;
 }