Make some cool WebXR docs;

guides/Distribution.md

@@ -51,18 +51,84 @@ as well.
 
 Finally, `LÖVR.app` can be renamed to `Awesome VR Project.app` and distributed as a zip.
 
-WebVR
+WebXR
 ---
 
-To package a game for use in a browser, you can use the `file_packager` script that comes with the
-Emscripten SDK:
+To package a project for running a browser, first follow the steps in the "Creating an Archive"
+section above to get a zip file of the project.
+
+Next, you'll need an HTML file to visit in the browser.  See [`lovr.html`](https://github.com/bjornbytes/lovr/blob/master/src/resources/lovr.html)
+for a small example file that can be customized.  You can also create your own page, but at a
+minimum it should:
+
+- Have a `<canvas>` element with an id of `canvas`.
+- Declare a `Module` global in JavaScript to configure various settings.
+- Include a `preRun` function to download the archive and add it to the virtual filesystem.
+- Include a `<script>` tag with a web build of LÖVR.
+  - The latest web build is hosted at `https://lovr.org/static/f/lovr.js`.
+  - Versioned web builds are hosted at `https://lovr.org/static/f/<version>/lovr.js`.
+  - You can also use a custom web build, see the Compiling guide for more on that.
+
+The `Module.preRun` array contains functions to run before starting up LÖVR.  One of the functions
+in this array should use emscripten's `Module.FS_createPreloadedFile` function to download the
+project's archive and add it to the virtual filesystem.  The path in the filesystem should then be
+added as a command line argument by adding it to the `Module.arguments` array.  This will cause LÖVR
+to run the project file when it starts up, just like on the command line.  Here's an example:
 
 ```
-$ python "$EMSCRIPTEN/tools/file_packager.py" game.data --no-heap-copy --preload /path/to/game@/ --js-output=game.js
+var path = '/MegaExperience.lovr'; // The path in the virtual filesystem
+var url = '/projects/MegaExperience.lovr'; // The url to download
+
+// Add a preRun task to download the archive and put it in the filesystem
+Module.preRun.push(function() {
+  Module.FS_createPreloadedFile('/', path, url, true, false);
+});
+
+// Pass the filesystem path as a virtual command line argument
+Module.arguments = [path];
 ```
 
-This will output two files: `game.js` and `game.data` (note that the `@/` suffix is important).  The
-`game.js` file downloads the `game.data` contents and mounts it into the Emscripten filesystem,
-which LÖVR will then run at startup.
+Optionally, the page can include a button to enter and exit immersive VR mode, using
+`Module.lovr.enterVR` and `Module.lovr.exitVR`:
+
+```
+// Only do button-related things if WebXR is supported and working
+if (navigator.xr) {
+  navigator.xr.isSessionSupported('immersive-vr').then(function(supported) {
+    if (!supported) {
+      return;
+    }
+
+    // Ok, VR is supported.  Add a button to the page.
+    var button = document.createElement('button');
+    document.body.appendChild(button);
+    button.textContent = 'VR!';
+
+    // Keep track of whether VR is active.
+    var active = false;
+
+    // When the button is clicked, toggle VR state.
+    button.addEventListener('click', function() {
+      if (!active) {
+        Module.lovr.enterVR().then(function(session) {
+
+          // Once this promise resolves, VR is active.
+          active = true;
+
+          // The raw WebXR session object is accessible here.
+          // Listen for when the session ends.
+          session.addEventListener('end', function() {
+            active = false;
+          });
+        });
+      } else {
+        Module.lovr.exitVR().then(function() {
+          active = false;
+        });
+      }
+    });
+  });
+}
+```
 
-For full instructions on creating a web-enabled build of LÖVR, see the [Compiling guide](Compiling#webxr).
+The HTML file and zip file can then be distributed on a web server.