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

Slides from Mega VR Meetup night

Related Audiobooks

Free with a 30 day trial from Scribd

See all

An Introduction to Web VR January 2015

  2. 2. CONSUMER VR IS HERE! 1/16/2015  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/2015  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/2015 image: Mark Surman
  5. 5. THE WEB + VR TWO GREAT TASTES… ? 1/16/2015
  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/2015  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/2015 Mozilla VR Showcase Powered by Firefox Built with GLAM EARLY EXPERIMENTS
  8. 8. THE WEBVR API 1/16/2015 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  Desktop Chrome  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/2015
  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/2015
  11. 11. VR + ML A MARKUP LANGUAGE FOR THE METAVERSE 1/16/2015  GLAM (GL And Markup) - a declarative language for 3D web content  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
  12. 12. LINKS  Simple WebVR examples to get up and running  Browser Dev Builds Firefox Chrome  Mozilla VR Showcase  Cardboard VR Showcase  WebVR Mailing List 1/16/2015
  13. 13. COMING IN MAY 2015 1/16/2015
  14. 14. KEEP IN TOUCH 1/16/2015 CONTACT skype: auradeluxe http://www.tonypa GET THE BOOKS! WebGL: Up and Running Programming 3D Applications with HTML and WebGL Visualization/dp/1449362966 GET VIZI MEETUPS BOOK CODE GET GLAM WORK CREDS Co-creator, VRML and X3D