The document introduces WebVR, which allows building virtual reality applications using web technologies like JavaScript. It discusses several VR hardware options including Oculus Rift, Samsung Gear VR, and Google Cardboard. WebVR provides an API for these devices to work within web browsers, avoiding proprietary app stores and enabling more open development. While there are still challenges around latency and input, WebVR has the potential to make VR more accessible and collaborative through the open web.

1. TONY PARISI
JANUARY, 2015
AN
INTRODUCTION
TO WEBVR

2. CONSUMER VR IS HERE!
1/16/2015http://www.tonyparisi.com
 Oculus Rift
 Developer Kit CHEAP $350
 In production late 2015/early 2016
 The GOLD STANDARD of VR devices
 Samsung GearVR
 Technology licensed from Oculus
 The best VR experience out there! (Look
Ma, no wires)
 BUT $200 + requires new Phone NOT
CHEAP $1,000
 Google Cardboard
 $2 in parts or $25 ready-to-assemble Kits
WAY CHEAP
 Just Add SmartPhone
 Not as nice… but great for the price!
AFFORDABLE STEREOSCOPIC DISPLAYS AND MOTION TRACKING FTW!

3. 1/16/2015http://www.tonyparisi.com
 Giant downloads
 App store installs
 Proprietary stacks
 Closed culture
 Experts only!
VR APPS TODAY

4. WEB APPS TODAY
 Instant access
 No gatekeepers
 Instant publishing
 Your choice of tools
 Culture of collaboration
 Source code
 No barriers to entry
1/16/2015http://www.tonyparisi.com
image: Mark Surman
http://commonspace.wordpress.com/2014/03/12/happybirthday/

5. THE WEB + VR
TWO GREAT TASTES… ?
1/16/2015http://www.tonyparisi.com

6. WEBVR
FAST, CHEAP, AND
DEMOCRATIZED
 Build Oculus VR apps in
JavaScript
 Rendered in WebGL
 Head-tracking and fullscreen
VR support now in browser
dev builds (SOON IN
NIGHTLY CHANNEL!!!)
 All in the browser – no
downloads, installs or app
stores!
1/16/2015http://www.tonyparisi.com
 Mobile WebVR: Just Add
Smartphone
 Side-by-side stereo
rendering with Google
Cardboard VR
 Head tracking with phone’s
accelerometer
 Run in mobile browser or
“hybrid” app

7. 1/16/2015http://www.tonyparisi.com
Mozilla VR Showcase
http://mozvr.com/
Powered by Firefox Built with GLAM
https://github.com/tparisi/glam
EARLY EXPERIMENTS

8. THE WEBVR API
1/16/2015http://www.tonyparisi.com
RUNS IN DEV BUILDS OF FIREFOX AND CHROME – SAME API
 Query the browser for VR Devices
 Use VR device, if found, to set Fullscreen mode – it will do the
Oculus Rift rendering
 During requestAnimationFrame, query position- and
orientation-tracking devices for current values
 Three.js supports it (r68 and up)
examples/js/effects/VREffect.js
examples/js/controls/VRControls.js

9. WEBVR AND CARDBOARD
 Google Cardboard showcase
 Mobile Chrome http://g.co/chromevr
 Desktop Chrome http://vr.chromeexperiments.com/
 Even easier than Oculus…
 Render WebGL side-by-side stereo (no need to query devices)
 Use existing browser fullscreen mode
 Use existing browser device orientation API for head tracking
 Three.js makes it super easy
examples/js/effects/StereoEffect.js
examples/js/controls/DeviceOrientationControls.js
1/16/2015http://www.tonyparisi.com

10. CHALLENGES
 WebVR on Oculus is not ready for prime time
 That’s OK neither is Oculus! D-)
 Latency is the biggest issue – browser needs to un-throttle at 60fps (It’s in the works…)
 Software installation and device setup is still pretty clunky
 GearVR requires hybrid native/mobile – uses custom sensor
 But we’re good to go on Cardboard!
 60fps works great
 Nearly 2 billion VR devices already deployed
 500k+ Cardboard headsets shipped
 Still need to figure out input – we’re flying blind (literally)
 Tools are rough, especially compared to pro tools like Unity and Unreal
1/16/2015http://www.tonyparisi.com

11. VR + ML
A MARKUP LANGUAGE FOR THE
METAVERSE
1/16/2015http://www.tonyparisi.com
 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
<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”>
</sphere>
<sphere class="bubble skybox”>
</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
Or check out SceneVR from Ben Nolan
http://twitter.com/scenevr/

12. LINKS
 Simple WebVR examples to get up and running
https://github.com/tparisi/WebVR
 Browser Dev Builds
Firefox http://blog.bitops.com/blog/2014/08/20/updated-firefox-vr-builds/
Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ
 Mozilla VR Showcase
http://mozvr.com/
 Cardboard VR Showcase
http://vr.chromeexperiments.com/
 WebVR Mailing List
web-vr-discuss@mozilla.org
1/16/2015http://www.tonyparisi.com

13. COMING IN MAY 2015
1/16/2015http://www.tonyparisi.com

14. KEEP IN TOUCH
http://www.tonyparisi.com 1/16/2015
CONTACT
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe http://www.tonypa
risi.com/
http://www.learningwebgl.com/
GET THE BOOKS!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-HTML5-WebGL-
Visualization/dp/1449362966
GET VIZI
https://github.com/tparisi/Vizi
MEETUPS
http://www.meetup.com/WebGL-Developers-Meetup/
http://www.meetup.com/Web-VR/
BOOK CODE
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
GET GLAM
http://www.glamjs.org/
https://github.com/tparisi/glam/
WORK
http://www.thirdeye.gl/
CREDS
Co-creator, VRML and X3D

15. TONY PARISI
JANUARY, 2015
AN
INTRODUCTION
TO WEBVR