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.

Virtual Reality on the Web

181 views

Published on

This presentation is an introduction to creating VR content that runs on a Web Browser.

Published in: Technology
  • Be the first to comment

Virtual Reality on the Web

  1. 1. Virtual Reality on the Web @diekus / @samsunginternet https://samsunginter.net
  2. 2. Virtual Reality the computer-generated simulation of a three- dimensional image or environment that can be interacted with in a seemingly real or physical way by a person using special electronic equipment, such as a helmet with a screen inside or gloves fitted with sensors. source: Oxford Dictionaries
  3. 3. content audio interaction
  4. 4. HMD Required:* • < 20ms motion to photon latency • Gear VR • DK2 • Display resolution? • Galaxy S7 - WQHD (1280x1440 per eye) • PSVR - Full HD (960x1080 per eye) *desired
  5. 5. audio binaural/3D positional audio audio-visual realism and synchronization Audio Must be Consistent With What You See
  6. 6. interaction
  7. 7. content
  8. 8. contentpre-approved closed environment wait several minutes download 100s of MBs experience you discard after 1 use
  9. 9. if only…
  10. 10. Open, fast, secure, frictionless, accessible, widely distributed, cross device, easy-to-share, scalable
  11. 11. Who is ready?
  12. 12. ?
  13. 13. source: webvr.rocks * Supported by WebVR
  14. 14. content audio interaction WebVR API WebAudio API Gamepad API Content: • 360° media • Frameworks • Engines
  15. 15. WebVR API WebVR is an experimental JavaScript API that provides access to Virtual Reality devices in your browser + navigator.getVRDisplays()
  16. 16. WebAudio window.AudioContext inputs effects destination biquad filter reverb panner compressor stream oscillator <audio>
  17. 17. Gamepad API Gamepad Haptics Gamepad Pose 3/6 DoF Touchpad Support Gamepad Extensions navigator.getGamepads()
  18. 18. Web Speech API let recognition = new SpeechRecognition();
  19. 19. 360° media
  20. 20. Frameworks, engines, renderers THREE.js A-Frame ReactVR XML3D-NG Vizor.io PlayCanvas WebGL Unity
  21. 21. A-Frame <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/style.css" rel="stylesheet"> <link rel="manifest" href="manifest.json"> <script src="aframe.js"></script> <title>A-Frame at MWP 2017</title> </head> <body> <a-scene> </a-scene> </body> </html>
  22. 22. source: http://rolanddubois.com/webvr/gravr-component/ & https://playcanv.as/p/SA7hVBLt/ If visual fidelity was all that mattered we would be watching Blu-rays instead of Netflix -J.Carpenter
  23. 23. Why WebVR?
  24. 24. Democratizes VR
  25. 25. Panorama June 2016 • Over 200,000 developers registered to work on Oculus Rift. • 1.3 million subscribers to the YouTube 360 channel. • Cardboard app has been downloaded over 10 million times. source: https://www.linkedin.com/pulse/hype-numbers-vr-industry-peeter-nieler
  26. 26. source: http://www.wired.co.uk/article/samsung-vr-outships-psvr-htc-vive-and-oculus “4.5 million shipped in one year is an impressive figure and implies the future of VR may, in fact, be mobile.”
  27. 27. Price is a dominant factor in making a VR purchase decision source: Greenlight VR Consumer Adoption Report 2016, among 1300 people
  28. 28. How much would you be willing to pay for a VR device? 28% up to 100 € 66% 101-500 € 5% 501-1000€ 1% more than 1000€ source: Deutsche Messe Interactive Online-Befragung unter 1000 Besuchern INVR @ Beyond 2016
  29. 29. source: https://github.com/blog/2047-language-trends-on-github
  30. 30. 61% Gaming 59% Meetings 56% Shopping 56% Live Sports source: Greenlight VR Consumer Adoption Report 2016, among 1300 people VR Uses Cases consumers are interested in 74% Travel and Adventure 67% Movies & Recorded Videos 67% Live Events (non sport) 66% Home Design 64% Classes
  31. 31. source: Virtuleap Partners’ debrief Virtuleap Hackathon Topics Categories included social VR, templates & tools, healthcare & medicine, education, arts & crafts, products, engineering & science, sports, advertising, and trades & craft. Gaming and entertainment represented only 17 percent of the submission pool. ‘Hello, worlds!’ developed by Paris-based Maud Nalpas, the sole female developer to participate in the hackathon, was created as an educational experience for discovering astronomy.
  32. 32. WebVR on Mobile
  33. 33. WebVR on Mobile VR can scale gracefully through different devices ranging from mobile only to full room tracking experiences headset gamepadmobilebrowser
  34. 34. Challenges for VR [on Mobile] • Usability • Controls • Hardware • Accessibility • Content • Disability • Content • New • Existing • Performance • Security • …
  35. 35. Examples pwac-man bubble word drop
  36. 36. PWAc-Man Pac-Man like game where the playing space surrounds the user. Uses Gamepad API.
  37. 37. bubble 360° image viewer. Uses File API.
  38. 38. word drop Creates words that drop and bounce. Uses WebSpeech API (SpeechRecognition interface).
  39. 39. Open, fast, secure, frictionless, accessible, widely distributed, cross device, easy-to-share, scalable, independent of connection?
  40. 40. web pages + ?
  41. 41. web ‘pages’ running from the device’s home-screen, capable of sending notifications and running offline
  42. 42. web ‘pages’ running from the device’s home-screen, capable of sending notifications and running offline: Progressive Web App
  43. 43. The Web on Virtual Reality What does this imply for the browser?
  44. 44. New Workflows
  45. 45. New Browsers
  46. 46. source: Josh Carpenter, Google New Axis
  47. 47. What do YOU think? • can the web and VR work well together?
  48. 48. Let’s make this happen
  49. 49. Virtual Reality on the Web @diekus / @samsunginternet https://samsunginter.net

×