The document discusses virtual reality (VR) experiences on the open web compared to closed VR systems, and some early experiments with VR on the web. It notes that while VR today relies on closed platforms, the open web may enable high-quality VR without downloads by using technologies like WebGL, WebSockets and browser extensions. It also introduces some VR experiments built with tools like vr.js, Three.js and GLAM that allow VR experiences to be built for browsers.

1. virtually anywhere:
VR and the open web
Tony Parisi
Vizi, inc.
June 11, 2014

2. VR today
closed-system development
native code + proprietary development tools (Unity, UDK)
integration with web is whatever you get from those tools…
fine for high-performance games and single isolated
experiences…
MASSIVE downloads
6/11/2014http://www.tonyparisi.com

3. the open web
60FPS mind-blowing graphics in WebGL
programming in JavaScript
all your web data at your fingertips
NO downloads
6/11/2014http://www.tonyparisi.com

4. two great tastes… ?
6/11/2014http://www.tonyparisi.com

5. Oculus Rift™ and browsers
no native browser support for stereo rendering and head tracking… yet
OculusBridge
https://github.com/Instrument/oculus-bridge
Three.js-based renderer and camera controller
native app does head tracking; sends updates to browser via Web Sockets
10ms+ latency, not great
vr.js
https://github.com/benvanik/vr.js
Three.js-based renderer and camera controller
browser extension (Chrome and FF) does head tracking in native code, talks to
JavaScript via plugin API
< 10ms latency, better
it would be ideal if browsers had built-in support
head tracking
stereo rendering
or at least a USB interface… (not in an extension)
6/11/2014http://www.tonyparisi.com

6. early experiments
6/11/2014http://www.tonyparisi.com
water world
paint with particles!
http://vizi.gl/engine/tests/waterworld/waterRif
t.html
based on PartiArt
by Eric Levin (@ericrius)
http://ericrius1.github.io/PartiArt/
Futurgo city
car test drive
http://vizi.gl/engine/tests/futurgo/futurgoCity
Rift.html
based on Futurgo City
from my book examples
https://github.com/tparisi/Programming3DAp
plications/
frame rate: good
latency: seems ok.
experience: fun.
frame rate: ok
latency: not great.
experience: meh.
the stack:
vr.js
OculusBridge
Three.js
Vizi

7. GLAM (GL And Markup) - a
declarative language for 3D web
content
https://github.com/tparisi/glam/
define 3D scene content in markup;
style it in CSS
vr + ml
6/11/2014http://www.tonyparisi.com
<glam>
<renderer type="rift"></renderer>
<scene>
<controller
type="rift"></controller>
<background id="sb1"
class="skybox"></background>
<group y ='1' z='-3'>
<sphere class="bubble
skybox" animation="bubbleBounce"></sphere>
<sphere x='-1' z='-2'
class="bubble skybox"
animation="bubbleBounce2"></sphere>
</group>
…
the markup
<style>
.skybox {
envmap-right:url(../images/Park2/posx.jpg);
…
}
.bubble {
radius:.5;
shader-vertex:url(../shaders/fresnel.vs);
shader-fragment:url(../shaders/fresnel.fs);
shader-uniforms:mRefractionRatio f 1.02
mFresnelBias f 0.1 mFresnelPower f 2.0 mFresnelScale
f 1.0 tCube t null;
}
#sb1 {
background-type:box;
}
</style>
the CSS

8. links
the demos (require vr.js)
http://vizi.gl/engine/tests/waterworld/waterRift.html
http://vizi.gl/engine/tests/futurgo/futurgoCityRift.html
http://vizi.gl/glam/examples/glamcityvr.html
http://vizi.gl/glam/examples/glamshaderfresnelvr.html
tools and libs
Oculus Bridge https://github.com/Instrument/oculus-bridge
vr.js https://github.com/benvanik/vr.js
Three.js https://github.com/mrdoob/three.js/
Vizi https://github.com/tparisi/vizi
GLAM https://github.com/tparisi/glam/
6/11/2014http://www.tonyparisi.com