init

Author: keruwang

DataStore.js

@@ -0,0 +1,143 @@
+// this is intended to be a generic key value store in the context of low latency real-time 
+// streaming - additions to this code should bear that in mind, application specific logic 
+// that may not be useful to other contexts, should remain in the plugin itself, this should 
+// eventually integrated to library perhaps
+
+class DataStore {
+
+  constructor() {
+      // saved checkpoint
+      this.snapshot = {};
+      // deltas from snapshot in order
+      this.log = [];
+      // current store state
+      this.state = {};
+      this.state['objects'] = {};
+      // TODO: additional child that may need to be initialized at startup
+
+      // track statistics of usage
+      // TODO: integrate with the functions to track usage stats
+      // TODO: integrate optional timing profiling
+      this.stats = {};
+
+      // ttl timers for scheduled events
+      this.timers = {};
+      this.timers['lock'] = {};
+      this.timers['remove'] = {};
+
+      // three examples of metadata:
+      // 1) stream || static || dynamic
+      // stream - it should be broadcast at rate
+      // static - store object at fixed location
+      // dynamic - movable, broadcast deltas
+      // 2) compressed - have a few encodings and decoding available, such as 16 bit floats,
+      //              or dropping the third direction, or both, among others, such as 
+      //              KTX compression, or zip, etc for large binaries
+      // 3) physics
+      // ... arbitrary binary data as a payload
+      this.metadata = {};
+
+      // callbacks
+
+  }
+
+  // compare(self, kvstore):
+  //     return DeepDiff(self.state, kvstore, exclude_types={}, exclude_paths={}) == {}
+
+  // def delta(self, kvstore):
+  //     return DeepDiff(self.state, kvstore, exclude_types={}, exclude_paths={})
+
+  // // TODO fix timers
+  // def put(self, key, value, lock_ttl = None, remove_ttl = None):
+  //     if lock_ttl != None:
+  //         if self.timers['lock'][key]:
+  //             sched.cancel(self.timers['lock'][key])
+          
+  //         self.timers['lock'][key] = sched.enter(lock_ttl, 1, self.unlock, argument=(key,))
+      
+  //     if remove_ttl != None:
+  //         if self.timers['remove'][key]:
+  //             sched.cancel(self.timers['remove'][key])
+          
+  //         self.timers['remove'][key] = sched.enter(remove_ttl, 1, self.remove, argument=(key,))
+      
+  //     self.state[key] = value
+
+  clear() {
+      // immediately create a snapshot of state prior to clearing
+      this.snapshot = this.state;
+
+      // TODO: finish this function
+
+  }
+
+  //Checks if object is locked, true if free, false if locked
+  check(key) {
+      //If the object or lockid doesn't even exist yet, then it is unlocked.
+      if (!(key in this.state['objects']) || !('lockid' in this.state['objects'][key])) {
+          return true;
+      }
+
+      //Else check to see if lockid is blank.
+      return this.state['objects'][key]['lockid'] == '';
+  }
+
+  setObjectData(key, data) {
+      this.state['objects'][key]['state'] = data;
+      this.state['objects'][key]['dirty'] = true;
+  }
+
+  exists(key) {
+      return key in this.state['objects'];
+  }
+
+  add(key) {
+      this.state['objects'][key] = {};
+  }
+
+  // return key from state
+  get(key) {
+      return this.state['objects'][key];
+  }
+
+  remove(key) {
+      delete this.state['objects'][key];
+  }
+  
+  // attempt to acquire lock, returns true or false
+  acquire(key, lockid) {
+      return this.state['objects'][key]['lockid'] === -1 || this.state['objects'][key]['lockid'] === lockid;
+  }
+
+  lock(key, lockid) {
+      this.state['objects'][key]['lockid'] = lockid;
+  }
+
+  unlock(key) {
+      this.state['objects'][key]['lockid'] = -1;
+  }
+
+  // check if active
+  active(key) {
+      return this.state['objects'][key]["active"];
+  }
+
+  activate(key) {
+      if (key in this.state['objects']) {
+          this.state['objects'][key]["active"] = true;
+      } else {
+          console.log("Fun Fact: Tried activating an object that doesn't exist.")
+      }
+  }
+
+  deactivate(key) {
+      if (key in this.state['objects']) {
+           this.state['objects'][key]["active"] = false;
+      } else {
+          console.log("Fun Fact: Tried deactivating object that doesn't exist.")
+      }
+  }
+  
+}
+
+module.exports = DataStore;

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Future Reality Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,68 @@
+# NYU-FRL-XR
+
+Software for NYU Future Reality Lab webXR-based XR experience.
+
+# How to setup the environment
+
+install Node.js and npm if you haven't. Then in the command line, do
+```sh
+npm install
+cd server
+npm install
+source patch
+```
+
+# How to run on your local computer
+
+1. At the root folder, do ``./startserver``
+2. Go to chrome://flags/ in your Google Chrome browser
+3. Search: ***"Insecure origins treated as secure"*** and enable the flag
+4. Add http://[your-computer's-ip-address]:2024 to the text box. For example http://10.19.127.1:2024
+5. Relaunch the chrome browser on your computer and go to http://localhost:2024
+
+# How to run in VR
+
+1. Run the program locally on your computer
+2. Open the browser on your VR headset
+3. Go to chrome://flags/
+4. Search: ***"Insecure origins treated as secure"*** and enable the flag
+5. Add http://[your-computer's-ip-address]:2024 to the text box. For example http://10.19.127.1:2024
+7. Relaunch the browser on your VR headset and go to http://[your-computer's-ip-address]:2024 
+
+# How to debug in VR
+
+1. On your Oculus app, go to *Devices*, select your headset from the device list, and wait for it to connect. Then select *Developer Mode* and turn on *Developer Mode*.
+2. Connect your quest with your computer using your Oculus Quest cable.
+3. Go to chrome://inspect#devices on your computer
+4. Go to your VR headset and accept *Allow USB Debugging* when prompted on the headset
+5. On the chrome://inspect#devices on your computer, you should be able to see your device under the *Remote Target* and its active programs. You can then inspect the *NYU-FRL-XR* window on your computer.
+
+# How to create your own demo
+
+1. Go to the [scenes folder](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/scenes/) and create a .js file based on the template of [demoSimplest.js](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/scenes/demoSimplest.js)
+2. Change the name and the content of the demo to whatever you like!
+3. Go to [scenes.js](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/scenes/scenes.js), add the name of your demo and its path to the returned value of [```scenes```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/scenes/scenes.js#L11)
+4. Note that the [```enableSceneReloading```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/scenes/scenes.js#L10) is set to true so that you can hot-reload the changes in your demo. 
+
+# How to enable your hand-tracking
+
+1. Enable the experimental feature in the browser (Oculus Browser 11)
+2. Visit chrome://flags/
+3. Enable WebXR experiences with joint tracking (#webxr-hands)
+4. Enable WebXR Layers depth sorting (#webxr-depth-sorting)
+5. Enable WebXR Layers (#webxr-layers)
+6. Enable phase sync support (#webxr-phase-sync)
+7. Enable "Auto Enable Hands or Controllers" (Quest Settings (Gear Icon) -> Device -> Hands and Controllers)
+8. Enter the VR experience
+
+# Notes on customizing your avatar
+1. To change the initial position of your avatar: go to [js/util/inline-viewer-helper.js](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/util/inline-viewer-helper.js) and change the values of [```this.lookYaw```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/util/inline-viewer-helper.js#L46), [```this.walkPosition```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/util/inline-viewer-helper.js#L47), [```this.lookPitch```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/util/inline-viewer-helper.js#L49). Notice that [```this.viewerHeight```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/util/inline-viewer-helper.js#L50) (the avatar's height) is set to be 1.6m from the [```inlineViewerHelper.setHeight(1.6)```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/immersive-pre.js#L503) in [js/immersive-pre.js](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/immersive-pre.js). You can change this if you like.
+2. To customize your own avatar: go to [js/primitive/avatar.js](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/primitive/avatar.js). You can change the GLTF models used in the [```Headset```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/primitive/avatar.js#L101) and the [```Controller```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/primitive/avatar.js#L114) classes. You can add additional arguments to the [```initAvatar```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/primitive/avatar.js#L8) function to specify the avatar's look, and pass those values from the [```addPawn```](https://github.com/futurerealitylab/NYU-FRL-XR/tree/master/js/util/croquetlib.js#L162) function.
+
+# How to connect an Arduino Camera
+1. Get the url you use to stream the camera feed (example: 'http://192.168.1.189/640x480.jpg'), and make sure the computer hosting the server is under the same LAN as the Arducam.
+2. Set up the environment by opening the terminal located in the folder and type ```pip install -r requirements.txt``` (or ```pip3 install -r requirements.txt``` based on your version of pip)
+3. Replace the url on line 19 of track.py (inside the urlopen() function) with your own url from the Arducam.
+4. After starting the server, open the terminal and locate to the current folder, type ```python track.py``` (or ```python3 track.py```)
+5. The default information from the camera contains the positional data and the context of the QR code inside the camera feed, if any, and the radius and positional data of the largest green object. To engineer your own CV method, consider the variable ```frame``` inside track.py, it is the pixel data of your current camera feed. After your own engineering, to make communication with the server regarding the new information, wrap the information into a JSON-formatted dictionary and send it by using ```requests.post('http://localhost:2024/your-own-function', json=your-data-dictionary)```. Then under server/main.js, open up a new app.route("/your-own-function").post(function (req, res), make sure to match the name with the name you defined in the python code, and receive the information by ```req.body```.
+6. If you're using a different computer for camera feed fetching and processing, make sure to change the url from http://localhost:2024/your-own-function to that of your own server (or the public server).

css/common.css

@@ -0,0 +1,83 @@
+body {
+  background-color: #F5E6D6;
+  font: 1rem/1.4 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+header {
+  position: relative;
+  z-index: 2;
+  left: 0px;
+  text-align: left;
+  max-width: 422px;
+  padding: 0.5em;
+  background-color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 0.5em;
+  border-radius: 2px;
+  border-top-left-radius:10px;
+  border-top-right-radius:10px;
+  border-bottom-left-radius:10px;
+  border-bottom-right-radius:10px;
+}
+
+details summary {
+  font-size: 1em;
+  font-weight: bold;
+}
+
+details[open] summary {
+  font-size: 1.4em;
+  font-weight: bold;
+}
+
+header h1 {
+  margin-top: 0px;
+}
+
+canvas {
+  position: absolute;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  touch-action: none;
+}
+
+.back {
+  float: right;
+  text-decoration: none;
+}
+
+.back:hover {
+  text-decoration: underline;
+}
+
+.back::before {
+  display: inline-block;
+  content: attr(data-index) "<";
+  font-weight: bold;
+  white-space: nowrap;
+  margin-right: 0.2em;
+  margin-left: 0.2em;
+}
+
+/* Used for the 'barebones' samples */
+.barebones-button {
+  font-family: "Karla", sans-serif;
+  border: rgb(80, 168, 252) 2px solid;
+  border-radius: 2px;
+  box-sizing: border-box;
+  background: none;
+  height: 55px;
+  min-width: 176px;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  font-size: 18px;
+  color: rgb(80, 168, 252);
+  background-color: rgba(255, 255, 255, 0.7);
+}