Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Introduction to Web VR January 2015

3,662 views

Published on

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

  • Be the first to comment

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

×