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.

WebVR: Virtual Reality on the Web for Everyone


Published on

WebVR is the future of the Internet. Imagine building a VR experience with just a few lines of HTML! This talk introduces WebVR, covers the capabilities exposed to modern day web browsers through WebVR and A-Frame, and highlights UI/UX design considerations when transitioning to this new paradigm.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebVR: Virtual Reality on the Web for Everyone

  1. 1. WebVR: Kesha Williams Virtual Reality on the Web for Everyone @KeshaWillz
  3. 3. Code in VR Demo @KeshaWillz
  4. 4. This Talk • WebVR & Benefits • Tools Needed • Browsers & Devices • Development & A-Frame • Case Study: Code in VR • UI/UX Design Considerations • Testing Tools • Deployment Strategy @KeshaWillz
  5. 5. Raffle & Prize Giveaway @KeshaWillz
  6. 6. About Me Kesha Williams Software Engineer 20+ @KeshaWillz
  7. 7. WebVR WebVR is an experimental JavaScript API that provides access to virtual reality devices in your browser. @KeshaWillz
  8. 8. Mozilla @KeshaWillz
  9. 9. Benefits of WebVR @KeshaWillz
  10. 10. Browser Support @KeshaWillz
  11. 11. Device Support •Wired Headsets •Smartphone VR •Standalone @KeshaWillz
  12. 12. HTC Vive Wired @KeshaWillz
  13. 13. Oculus Rift @KeshaWillz Wired
  14. 14. Samsung GearVR @KeshaWillz Smartphone VR
  15. 15. Google Daydream @KeshaWillz Smartphone VR
  16. 16. Google Cardboard @KeshaWillz Smartphone VR
  17. 17. Headset Features Headset Controllers Positional Tracking Rotational Tracking HTC Vive Oculus Rift Samsung GearVR Google Daydream Google Cardboard @KeshaWillz
  18. 18. What’s Missing @KeshaWillz
  19. 19. What’s Missing @KeshaWillz
  20. 20. Standalone @KeshaWillz
  21. 21. Microsoft HoloLens Windows Mixed Reality @KeshaWillz
  22. 22. Lessons Learned • Mac developers are out of luck • Certain headsets only work on certain systems • Only certain browsers support WebVR • Google Daydream only works with “daydream- ready” phones • Not every headset provides positional tracking • Opens up a brand new world to web developers @KeshaWillz
  23. 23. Case Study: Code in VR @KeshaWillz
  24. 24. Tools & Development Android device with WebVR browser Google Cardboard A-Frame @KeshaWillz
  25. 25. A-Frame A-Frame is a web framework for building virtual reality (VR) experiences in your browser. @KeshaWillz
  26. 26. Benefits of A-Frame • Based on top of HTML • Provides a lot of components (called primitives) • No installation required; no build required • Supports most VR headsets • Has a Registry • Entity Component System • Has an active Slack community @KeshaWillz
  27. 27. Adding a Basic Scene <html> <head> <script src=""> </script> </head> <body> <a-scene> </a-scene> </body> </html> @KeshaWillz
  28. 28. Explanation @KeshaWillz PRIMITIVE DESCRITION <script> Links to A-Frame library allowing use of components <a-scene> The scene is the global root object; all entities are contained within the scene Handles 3D & WebVR boilerplate: • Sets up canvas, renderer, render loop • Default camera and lights
  29. 29. Adding Background <a-scene> <a-assets> <img id="skyTexture” src=""> </a-assets> <a-sky src="#skyTexture"></a-sky> </a-scene> @KeshaWillz
  30. 30. Explanation @KeshaWillz PRIMITIVE DESCRITION <a-assets> Places our assets in one place and preloads and caches assets for better performance • 3D Models • Images • Audio • Video imgur (IMAGE-ER) – a popular image hosting service <a-sky> Adds a background color or 360° image to a scene.
  31. 31. Sound <a-scene > <a-assets> <audio src=" guide/audio/backgroundnoise.wav" autoplay preload> </audio> </a-assets> </a-scene> @KeshaWillz
  32. 32. Add demo video with sound
  33. 33. Explanation @KeshaWillz PRIMITIVE DESCRITION <audio> Loads audio source from CDN network autoplay Automatically play sound once set preload Preloads; blocks the scene
  34. 34. Adding Text <a-text text='font: sourcecodepro;value: def main(): a = int(input("Enter an int: ")) b = int(input("Enter an int: ")) sumProblem(a, b) print(sumProblemString(a, b)) ; width:2.5;' position="-2 3 -3" color="#FFFFFF" rotation="0 0 0" scale="2 2 2"> </a-text> @KeshaWillz
  35. 35. Explanation @KeshaWillz PRIMITIVE DESCRITION <a-text> Renders font text text The text to layout. Newline characters ( n ) will cause line breaks. position The position component places entities at certain spots in 3D space. Position takes a coordinate value as three space-delimited numbers. • X - Negative X axis extends left. Positive X Axis extends right. • Y - Negative Y axis extends down. Positive Y Axis extends up. • Z - Negative Z axis extends in. Positive Z Axis extends out. color Text color; default color is white. rotation The rotation component defines the orientation of an entity as X, Y, Z scale Defines a shrinking, stretching, or skewing transformation of an entity as X,Y,Z
  36. 36. Adding Animation … <a-text …. <a-animation attribute="position" to="-2 2.2 -3" direction="alternate" dur="2000" repeat="3"> </a-animation> </a-text> … @KeshaWillz
  37. 37. Add demo video with animation
  38. 38. Explanation @KeshaWillz PRIMITIVE DESCRITION <a-animation> Adds animation to the scene. attribute Attribute to animate. to Ending value – where the item should end up direction Direction of the animation (between from and to) dur Duration in (milliseconds) of the animation. repeat Repeat count (or indefinite).
  39. 39. Adding Links <a-assets> …. <img id="thumbProblems" crossOrigin="anonymous" src=" traversal/thumbs/mountains.png"> <img id="thumbProbString" crossOrigin="anonymous" src=""> </a-assets> .… <a-link href="aframedemo.html" position="-5 3 -5" image="#thumbProblems"></a-link> <a-link href="sumProblemString.html" position="5 3 -5" image="#thumbProbString"></a-link> @KeshaWillz
  40. 40. Explanation @KeshaWillz PRIMITIVE DESCRITION <a-link> The link primitive provides a compact API to define links that resemble the traditional <a> tag href The file to display position The position component places entities at certain spots in 3D space. Position takes a coordinate value as three space- delimited numbers. X - Negative X axis extends left. Positive X Axis extends right. Y - Negative Y axis extends down. Positive Y Axis extends up. Z - Negative Z axis extends in. Positive Z Axis extends out image The image to display for the click
  41. 41. A-Frame Inspector Open up any A-Frame scene, hit <ctrl> + <alt> + i, and fly around to peek under the hood! @KeshaWillz
  42. 42. Motion Capture Tool The motion capture components allow us to emulate the presence of a VR headset and controllers without any user intervention • build test automation tools for VR experiences • replay the recorded user behavior • assert the state of the entities at the end @KeshaWillz
  43. 43. UI/UX design considerations • Comfort • Interface • Sound & Music • Movement • Interaction • Model Detail • Testing @KeshaWillz
  44. 44. Comfort • Simulator Sickness • Visually Induced Motion Sickness @KeshaWillz
  45. 45. User Interface (UI) •Should be a 3D part of the virtual world •Don’t require the user to swivel their eyes in their sockets to see the UI @KeshaWillz
  46. 46. Sound & Music •Positional audio •Sounds should get louder as the user leans towards their source @KeshaWillz
  47. 47. The display should respond to the user’s movements at all times, without exception @KeshaWillz Movement
  48. 48. Interaction •End of the mouse cursor /click •Users can now move their viewpoint to look places •Maintain VR immersion from start to finish •Design environments that make sense from a 3D spatial standpoint @KeshaWillz
  49. 49. Model Detail •Consider the size and texture of your virtual objects •Pay close to the level of detail on virtual objects @KeshaWillz
  50. 50. Testing •User testing will be more critical than ever before •Make sure your VR worlds don't make users sick @KeshaWillz
  51. 51. Deployment Model Deployment model of WebVR allows more content to reach more people than traditional models @KeshaWillz
  52. 52. Development Lessons Learned •Development is easy and accessible to all developers •Don’t have to invest in expensive controllers/equipment to get started •During testing the image was blurry •A-Frame is continually enhanced
  53. 53. Code in VR 2.0 • Update code to work on a wired device with laser pointer controls • Use A-Frame device specific controls – Daydream – Oculus – Vive – GearVR • Integration with GitHub to visualize an entire code base @KeshaWillz
  54. 54. You @KeshaWillz A-Frame
  55. 55. Questions
  56. 56. Contact @KeshaWillz 470-215-6442
  57. 57. Resources • A-Frame – • Case Study (GitHub) – • Case Study (Website) – • VR Best Practices – • Slide Deck – @KeshaWillz
  58. 58. Raffle @KeshaWillz
  59. 59. Raffle @KeshaWillz FREE ACCESS CODE
  60. 60. 40% Off All Manning Books & Videos @KeshaWillz Discount Code: ctwsyntaxcon18