Successfully reported this slideshow.
Your SlideShare is downloading. ×

An Introduction to Web VR January 2015

Ad

TONY PARISI
JANUARY, 2015
AN
INTRODUCTION
TO WEBVR

Ad

CONSUMER VR IS HERE!
1/16/2015http://www.tonyparisi.com
 Oculus Rift
 Developer Kit CHEAP $350
 In production late 2015...

Ad

1/16/2015http://www.tonyparisi.com
 Giant downloads
 App store installs
 Proprietary stacks
 Closed culture
 Experts ...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 15 Ad
1 of 15 Ad

More Related Content

Slideshows for you (19)

An Introduction to Web VR January 2015

  1. 1. TONY PARISI JANUARY, 2015 AN INTRODUCTION TO WEBVR
  2. 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. 3. 1/16/2015http://www.tonyparisi.com  Giant downloads  App store installs  Proprietary stacks  Closed culture  Experts only! VR APPS TODAY
  4. 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. 5. THE WEB + VR TWO GREAT TASTES… ? 1/16/2015http://www.tonyparisi.com
  6. 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. 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. 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. 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. 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. 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. 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. 13. COMING IN MAY 2015 1/16/2015http://www.tonyparisi.com
  14. 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. 15. TONY PARISI JANUARY, 2015 AN INTRODUCTION TO WEBVR

×