Merge pull request #229 from TiborUdvari/docs/emulator

docs: immersive web emulator
stalgiag · Sep 11, 2024 · a92573a · a92573a
2 parents 282111f + f54cb56
commit a92573a
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ p5.xr sketches can be run with [p5's online editor.](https://editor.p5js.org/) A
 
 ## Getting Started
 1. Use the [the most recent version of p5.js](https://p5js.org/download/) 
-2. Check out the [Device and Browser Support Section](https://stalgiag.github.io/p5.xr/#/quick-start/device-support).
+2. Check out the [Device and Browser Support Section](https://stalgiag.github.io/p5.xr/#/device-support.html) or use the [Immersive Web Emulator](https://stalgiag.github.io/p5.xr/#/quick-start/emulator)
 3. Add p5.xr to your project. This can be done most easily by adding the script link to a CDN in the `<head>` of your HTML file underneath the p5 link:
     ```
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js"></script>

diff --git a/docs/README.md b/docs/README.md
@@ -16,7 +16,7 @@ p5.xr sketches can be run with [p5's online editor.](https://editor.p5js.org/) A
 
 ## Getting Started
 1. Use the [the most recent version of p5.js](https://p5js.org/download/) 
-2. Check out the [Device and Browser Support Section](https://stalgiag.github.io/p5.xr/#/quick-start/device-support).
+2. Check out the [Device and Browser Support Section](https://stalgiag.github.io/p5.xr/#/device-support.html) or use the [Immersive Web Emulator](https://stalgiag.github.io/p5.xr/#/quick-start/emulator)
 3. Add p5.xr to your project. This can be done most easily by adding the script link to a CDN in the `<head>` of your HTML file underneath the p5 link:
     ```
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js"></script>

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -5,7 +5,8 @@
 
 ***
 - __QUICK START__
-  - [Device and Browser Support](webxr-test.html)
+  - [Device and Browser Support](device-support.html)
+  - [Immersive Web Emulator](quick-start/emulator.md)
   - [Examples](quick-start/examples.md)
 ***
 - __REFERENCE__

diff --git a/docs/webxr-test.html → docs/device-support.html b/docs/webxr-test.html → docs/device-support.html
@@ -71,7 +71,7 @@ <h2>Device Support Overview</h2>
     <p>
       <strong>Emulator:</strong> The Immersive Web Emulator simulates a
       supported device, allowing you to test and debug VR and AR experiences
-      directly in your browser.
+      directly in your browser. See how to <a href="/#/quick-start/emulator">set it up</a>.
     </p>
     <p>
       For the most up-to-date information, please refer to the

diff --git a/docs/index.html b/docs/index.html
@@ -23,6 +23,10 @@
     <link rel="stylesheet" href="./styles/custom-theme.css" />
     <link rel="stylesheet" href="./assets/prism.css" />
     <style>
+      video {
+        width: 100%;
+      }
+
       nav.app-nav li ul {
         min-width: 100px;
       }

diff --git a/docs/quick-start/emulator.md b/docs/quick-start/emulator.md
@@ -0,0 +1,17 @@
+# Immersive Web Emulator
+
+The [Immersive Web Emulator](https://github.com/meta-quest/immersive-web-emulator) is a Chrome extension that allows you to simulate a WebXR device in a desktop browser using a polyfill. It closely aligns with the features of the Meta Quest, enabling the simulation of features like hand tracking. This tool helps develop locally on a desktop before testing an actual device.
+
+Currently, the version available in the Chrome extension store does not work with the p5 Web Editor (awaiting merging of [PR #65](https://github.com/meta-quest/immersive-web-emulator/pull/65)). However, you can make it work by loading a patched version. 
+
+## Installation
+
+To install the patched version, follow these steps:
+1. Download the [patched release zip file](https://github.com/TiborUdvari/immersive-web-emulator/releases/tag/1.5.1) and unzip it 
+1. Go to `chrome://extensions` and enable developer mode
+1. Load the unpacked extension
+1. Test a [working example](https://editor.p5js.org/TiborUdvari/sketches/G1S1g40xx)
+
+<video controls>
+  <source src="https://rawcdn.githack.com/TiborUdvari/p5.xr-videos/main/videos/emulator-installation.mp4">
+</video>
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "generate-cert": "openssl x509 -req -days 365 -in csr.pem -signkey key.pem -out cert.pem",
     "dev-server": "http-server -S -C cert.pem -K key.pem -o",
     "jsdoc2md": "grunt jsdoc2md",
+    "docs": "npx docsify serve docs",
     "release": "commit-and-tag-version"
   },
   "repository": {