Bringing Light to WebVR with AFrame
In one terminal window:
npm i ; grunt
In another:
node server/index.js
On your viewer device, go to http://localhost:3000/duckhunt.html
On your controller device, go to http://localhost:3000/controller.html
Select the gyronorm
controller mode
Select the socketio
network mode
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.
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
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:
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
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.
GooCreate WebGL 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.
npm install selenium-standalone@latest -g
selenium-standalone install
selenium-standalone start
node server/index.js
npm install webdriverio --save-dev
All code here is GPLv2 licensed. Copyright 2016 Jim Yang (jim.yang@thisplace.com)