Jim's AFrame experiments

---

Experimentation Summary

Bringing Light to WebVR with AFrame

Getting started

In one terminal window:

npm i ; grunt

In another:

node server/index.js

Duck Hunt

See it on YouTube

1. On your viewer device, go to http://localhost:3000/duckhunt.html

2. On your controller device, go to http://localhost:3000/controller.html

3. Select the gyronorm controller mode

4. Select the socketio network mode

5. You need to align both the viewer and the controller in the same orientation, if they get out of sync, you will need to long-press on the controller to reset it.

On your viewer, you need to face north as you re-sync.

---

Learnings

• Google W3C WebVR presentation

• Models with faces that have more than 3 vertices will not load in THREE.js loaders (which is what AFrame is using)

• Ctrl + Alt + I opens the AFrame Inspector which you can use to rearrange entities in the scene. You can copy the resultant HTML

• Youtube Videos need to be downloaded as MP4 or proxied to be viewable as textures

• <script/> after </body> produces undefined behavior and should be avoided.

• aframe-cubemap-component order diagram:

   px   py
     \  |
      \ |
       \|
 pz-----*----> nz
        |\
        | \
        |  \
        ny  nx


  -->   indicates direction of camera relative to the inside faces of
        the cubemap

• iOS: make sure you clear the cache. textures are cached requests.

• Use Firebase as a fast DB to sync controllers via network, if no bluetooth/ direct input is available. Firebase console

• Dynamic mesh modification

• Embedding Google Street View images into AFrame

• Bitmap fonts at good at any distance

• Templating for AFrame scene nodes

• Cursor component doesn't filter elements like raycaster component does

• AR foundation: aframe-passthrough (get live camera image)

• HTMLElement.appendChild doesn't work. Use HTMLElement.insertAdjacentHTML() instead.

• Open source alternative to Firebase: gunDB Real-time sync'd graph DB that's available locally.

• FeathersJS another alt to Firebase: https://docs.feathersjs.com/getting-started/quick-start.html

• ProxyControls Polished version of devices connecting to others via WebRTC + WebSockets. Differences:

  • paradigm limits it strictly to 1 type (client/host) per device (pc/mobile)

• HTMLElement.remove() does not work for removing entities through the DOM. Instead use HTMLElement.parentNode.removeChild(HTMLElement)

• Early handwriting recognition DIY version $1 unistroke recognizer

• Frustum Lock component

• ReDollar gesture recognizer

• Cannon.js 3D non-ported physics

• Gyronorm values don't implement sensor fusion... will need to use that to get better orientation values

• Needs to sync with consumer to recalibrate the sensor when the scene is done loading.

---

Existing VR Guidelines

• Google Cardboard VR design specs

• Unreal Engine VR Guidelines Doc

• Hololens Design Patterns

• GooCreate WebGL creation tool

• Vizor creation tool

• Ray-input Similar to the solution that's to be created, but mine is substitution of inputs as a way to keep the experience interactive.

Blender Recap

• Blender HotKeys
• After selection (A to select all), TAB enters Edit mode.
• Rotate texture

Notable AFrame projects

• Sense of promise

AR libraries

• JS Aruco

Duck hunt resources

• SFX

Conduit tech

• Electron app for the controller host
• SocketIO iOS
• selenium-standalone

npm install selenium-standalone@latest -g
selenium-standalone install
selenium-standalone start
node server/index.js

• webdriverio

• Inversion of control in a DooM mod

• 3D Scene to cubemap for streaming to cubemap viewer?

npm install webdriverio --save-dev

• Webdriver usage example
• Capture entire web document
• RobotJS desktop automation

---

Contact & License

• Twitter
• Medium

All code here is GPLv2 licensed. Copyright 2016 Jim Yang (jim.yang@thisplace.com)