Slides from Mega VR Meetup night http://www.meetup.com/sfhtml5/events/206776382/

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