Add emscripten shell file;

To make it easier to build and test WebVR.
2018-09-06 16:04:58 -07:00 · 2018-09-06 16:04:58 -07:00 · 8b7bfec9d3
parent 0186a4a42f
commit 8b7bfec9d3
2 changed files with 97 additions and 1 deletions
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@ -19,7 +19,8 @@ if(EMSCRIPTEN)
      "'_quat_fromMat4','_quat_getAngleAxis'"
    "]\" "
    "-s \"EXTRA_EXPORTED_RUNTIME_METHODS=['getValue','setValue']\" "
-    "--js-library \"${CMAKE_CURRENT_SOURCE_DIR}/src/resources/lovr.js\""
+    "--js-library \"${CMAKE_CURRENT_SOURCE_DIR}/src/resources/lovr.js\" "
+    "--shell-file \"${CMAKE_CURRENT_SOURCE_DIR}/src/resources/lovr.html\""
  )
  set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} ${LOVR_EMSCRIPTEN_FLAGS}")
  set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} ${LOVR_EMSCRIPTEN_FLAGS}")
--- a/src/resources/lovr.html
+++ b/src/resources/lovr.html
@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+  <head>
+    <style>
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        font-family: 'sans-serif';
+      }
+
+      #canvas {
+        display: block;
+        border-radius: 8px;
+        background: #fff;
+        max-width: 80%;
+        width: 1080px;
+        height: auto;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
+        margin: 40px auto;
+      }
+
+      button {
+        display: block;
+        margin: 0 auto;
+        font-size: 18px;
+        border-radius: 4px;
+        padding: 8px 16px;
+      }
+    </style>
+
+    <meta charset="utf-8"/>
+    <title>LÖVR</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <canvas id="canvas" width="1080" height="600"></canvas>
+    </div>
+
+    <script type="text/javascript">
+      var container = document.querySelector('.container');
+      var canvas = document.getElementById('canvas');
+      var button = document.createElement('button');
+      button.textContent = 'Enter VR';
+
+      var context = canvas.getContext('webgl2', {
+        alpha: false,
+        antialias: true,
+        depth: true,
+        stencil: true,
+        preserveDrawingBuffer: true
+      });
+
+      var Module = window.Module = {
+        arguments: ['./'],
+        preRun: [findDisplay],
+        postRun: [],
+        print: console.log.bind(console),
+        printErr: console.error.bind(console),
+        thisProgram: './lovr',
+        canvas: canvas,
+        preinitializedWebGLContext: context
+      };
+
+      function findDisplay() {
+        if (navigator.getVRDisplays) {
+          Module.addRunDependency('lovrDisplay');
+          navigator.getVRDisplays().
+            then(function(displays) {
+              Module.lovrDisplay = displays[0];
+              container.appendChild(button);
+            }).finally(function() {
+              Module.removeRunDependency('lovrDisplay');
+            });
+        }
+      }
+
+      button.addEventListener('click', function() {
+        if (Module.lovrDisplay && Module.lovrDisplay.capabilities.canPresent) {
+          var eventName = Module.lovrDisplay.isPresenting ? 'lovr.exitvr' : 'lovr.entervr';
+          window.dispatchEvent(new CustomEvent(eventName));
+        }
+      });
+
+      window.addEventListener('vrdisplaypresentchange', function() {
+        button.textContent = Module.lovrDisplay.isPresenting ? 'Exit VR' : 'Enter VR';
+      });
+    </script>
+
+    {{{ SCRIPT }}}
+  </body>
+</html>