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.

of

WebVR: Virtual Reality on the Web for Everyone Slide 1 WebVR: Virtual Reality on the Web for Everyone Slide 2 WebVR: Virtual Reality on the Web for Everyone Slide 3 WebVR: Virtual Reality on the Web for Everyone Slide 4 WebVR: Virtual Reality on the Web for Everyone Slide 5 WebVR: Virtual Reality on the Web for Everyone Slide 6 WebVR: Virtual Reality on the Web for Everyone Slide 7 WebVR: Virtual Reality on the Web for Everyone Slide 8 WebVR: Virtual Reality on the Web for Everyone Slide 9 WebVR: Virtual Reality on the Web for Everyone Slide 10 WebVR: Virtual Reality on the Web for Everyone Slide 11 WebVR: Virtual Reality on the Web for Everyone Slide 12 WebVR: Virtual Reality on the Web for Everyone Slide 13 WebVR: Virtual Reality on the Web for Everyone Slide 14 WebVR: Virtual Reality on the Web for Everyone Slide 15 WebVR: Virtual Reality on the Web for Everyone Slide 16 WebVR: Virtual Reality on the Web for Everyone Slide 17 WebVR: Virtual Reality on the Web for Everyone Slide 18 WebVR: Virtual Reality on the Web for Everyone Slide 19 WebVR: Virtual Reality on the Web for Everyone Slide 20 WebVR: Virtual Reality on the Web for Everyone Slide 21 WebVR: Virtual Reality on the Web for Everyone Slide 22 WebVR: Virtual Reality on the Web for Everyone Slide 23 WebVR: Virtual Reality on the Web for Everyone Slide 24 WebVR: Virtual Reality on the Web for Everyone Slide 25 WebVR: Virtual Reality on the Web for Everyone Slide 26 WebVR: Virtual Reality on the Web for Everyone Slide 27 WebVR: Virtual Reality on the Web for Everyone Slide 28 WebVR: Virtual Reality on the Web for Everyone Slide 29 WebVR: Virtual Reality on the Web for Everyone Slide 30 WebVR: Virtual Reality on the Web for Everyone Slide 31 WebVR: Virtual Reality on the Web for Everyone Slide 32 WebVR: Virtual Reality on the Web for Everyone Slide 33 WebVR: Virtual Reality on the Web for Everyone Slide 34 WebVR: Virtual Reality on the Web for Everyone Slide 35 WebVR: Virtual Reality on the Web for Everyone Slide 36 WebVR: Virtual Reality on the Web for Everyone Slide 37 WebVR: Virtual Reality on the Web for Everyone Slide 38 WebVR: Virtual Reality on the Web for Everyone Slide 39 WebVR: Virtual Reality on the Web for Everyone Slide 40 WebVR: Virtual Reality on the Web for Everyone Slide 41 WebVR: Virtual Reality on the Web for Everyone Slide 42 WebVR: Virtual Reality on the Web for Everyone Slide 43 WebVR: Virtual Reality on the Web for Everyone Slide 44 WebVR: Virtual Reality on the Web for Everyone Slide 45 WebVR: Virtual Reality on the Web for Everyone Slide 46 WebVR: Virtual Reality on the Web for Everyone Slide 47 WebVR: Virtual Reality on the Web for Everyone Slide 48 WebVR: Virtual Reality on the Web for Everyone Slide 49 WebVR: Virtual Reality on the Web for Everyone Slide 50 WebVR: Virtual Reality on the Web for Everyone Slide 51 WebVR: Virtual Reality on the Web for Everyone Slide 52 WebVR: Virtual Reality on the Web for Everyone Slide 53 WebVR: Virtual Reality on the Web for Everyone Slide 54 WebVR: Virtual Reality on the Web for Everyone Slide 55 WebVR: Virtual Reality on the Web for Everyone Slide 56 WebVR: Virtual Reality on the Web for Everyone Slide 57 WebVR: Virtual Reality on the Web for Everyone Slide 58 WebVR: Virtual Reality on the Web for Everyone Slide 59 WebVR: Virtual Reality on the Web for Everyone Slide 60 WebVR: Virtual Reality on the Web for Everyone Slide 61 WebVR: Virtual Reality on the Web for Everyone Slide 62 WebVR: Virtual Reality on the Web for Everyone Slide 63 WebVR: Virtual Reality on the Web for Everyone Slide 64 WebVR: Virtual Reality on the Web for Everyone Slide 65 WebVR: Virtual Reality on the Web for Everyone Slide 66 WebVR: Virtual Reality on the Web for Everyone Slide 67 WebVR: Virtual Reality on the Web for Everyone Slide 68 WebVR: Virtual Reality on the Web for Everyone Slide 69 WebVR: Virtual Reality on the Web for Everyone Slide 70
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Download to read offline

WebVR: Virtual Reality on the Web for Everyone

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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
  2. 2. • DEVELOPERS IN THE ROOM?
  3. 3. Code in VR Demo http://www.codeinvr.com @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="https://aframe.io/releases/0.6.1/aframe.min.js"> </script> </head> <body> <a-scene> </a-scene> </body> </html> @KeshaWillz
  28. 28. Explanation @KeshaWillz PRIMITIVE DESCRITION <script> https://aframe.io/releases/0.6.1/aframe.min.js 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="https://i.imgur.com/Szs9f7E.jpg"> </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 https://i.imgur.com/Szs9f7E.jpg 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="https://cdn.aframe.io/basic- 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="https://cdn.aframe.io/link- traversal/thumbs/mountains.png"> <img id="thumbProbString" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/sunrise.png"> </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 https://www.linkedin.com/in/java-rock-star-kesha/ kesha@s4technology.com 470-215-6442 http://www.kesha.tech
  57. 57. Resources • A-Frame – https://aframe.io/docs/0.6.0/introduction/ • Case Study (GitHub) – https://github.com/keshaTechConfSamples/webvr • Case Study (Website) – http://www.codeinvr.com • VR Best Practices – https://developer.oculus.com/design/latest/concepts/bp_intro/ • Slide Deck – https://www.slideshare.net/secret/1L2b5M5FOLeL9e @KeshaWillz
  58. 58. Raffle @KeshaWillz
  59. 59. Raffle @KeshaWillz FREE ACCESS CODE
  60. 60. 40% Off All Manning Books & Videos @KeshaWillz Discount Code: ctwsyntaxcon18

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.

Views

Total views

196

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×