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.

How to Use WebVR to Enhance the Web Experience

245 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Kevin Vandecar, Autodesk

Overview

With different virtual reality (VR) devices in the market, the VR experience is getting more and more popular by consumers. WebVR brings the VR concept to the web by providing interfaces to VR hardware. This makes it much easier to build a VR experience with content delivered through a web browser. This topic will introduce the WebVR specification, and will show some interesting demos of how it can be used. There are several frameworks you can work with and even mix together. Kevin will discuss some different frameworks including Three.js, Autodesk Forge Viewer, and ReactVR. The talk will feature live demos, and the code behind the different examples.

Objective

Learn what WebVR is and how it could help your web experience.

Target Audience

Front-end developers who are interested in VR/AR experiences.

Assumed Audience Knowledge

Basic web dev skills

Five Things Audience Members Will Learn

What is WebVR
Introduction to a few WebVR frameworks
Different WebVR hardware experiences
Options to author/obtain content for WebVR experiences
Touch on AR possibilities

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How to Use WebVR to Enhance the Web Experience

  1. 1. How to Use WebVR to Enhance the Web Experience Kevin Vandecar Disorganized Tinkerer + Autodesk Forge Developer Advocate FITC Web Unleashed 2017
  2. 2. Kevin Vandecar – Disorganized Tinkerer
  3. 3. What is WebVR? • 3D (but content does not have to be…) • Virtual Reality experiences from your browser • JavaScript API Spec: hTps://w3c.github.io/webvr/
  4. 4. Why WebVR? • a way to push VR to many devices • mobile phones + tablets! • even kids have a device… hTps://nearpod.com/
  5. 5. 3D experience …but content does not have to be… •  Stereo Images •  Ex: Cardboard Camera VR Photo Format •  Sample: file:///C:/work/GitHub/Forge/JohnOnSo[ware/IronmanViewer/ stac_assets/sky.jpg •  Panorama formats •  Ex: PTGui and Panotools •  Spherical images
  6. 6. 3D experience •  Authoring Tools •  CAD •  Ex: Solidworks, Fusion 360, Revit •  M+E •  Ex: Blender, 3ds Max, Maya •  Online •  Turbo Squid •  Creave Market
  7. 7. 3D experience …but content does not have to be… • Pseudo 3D (images) • True 3D (models) • Example: hTps://ironmanviewer.herokuapp.com/
  8. 8. Virtual Reality via WebVR • Browsers • Devices
  9. 9. Virtual Reality WebVR compatible Browsers •  Source: hTp://createwebvr.com/
  10. 10. Virtual Reality WebVR compatible Browsers •  Source: hTps://webvr.rocks/
  11. 11. Virtual Reality WebVR Devices
  12. 12. © 2017 Autodesk, Inc.
  13. 13. Virtual Reality - WebVR Devices •  Google Cardboard •  Google Daydream •  Samsung VR Gear •  HTC Vive •  Oculus Ri[ •  Others: Windows AR/MR, PlayStaon VR
  14. 14. WebVR Devices – Google Cardboard • Make it yourself? • Find a free one!
  15. 15. Virtual Reality - WebVR Devices Cardboard - Promotional and/or Creative
  16. 16. WebVR Devices – Google Cardboard • Device needs to •  support WebGL •  have proper Sensors
  17. 17. WebVR Devices – Google Daydream • Not many yet… •  hTps://vr.google.com/ daydream/smartphonevr/phones/
  18. 18. Google Cardboard vs. Daydream •  Hardware and So[ware •  Cardboard… no real “current” requirements except sensors •  Gyroscope, accelerometer, compass •  Android 4.1, iOS 8, Windows Phone 10. •  Daydream… •  More specific: hTps://vr.google.com/daydream/smartphonevr/phones/ •  Material •  Cardboard… well, made of cardboard •  Daydream… beTer material, with cloth that can be removed/washed •  Communicaon •  Cardboard… a washer/magnet •  Daydream… NFC •  Controllers •  Cardboard… a washer/magnet •  Daydream… A specially deigned controller
  19. 19. WebVR Devices •  Samsung VR – by Oculus •  Good and affordable experience •  Limited to Samsung hardware (note 5, s6, s7, s8) •  Typical WebVR requirement is to use Samsung Browser – but doesn’t work generically… •  Oculus Store provides apps •  hTps://www.oculus.com/gear-vr/
  20. 20. WebVR Devices •  HTC Vive •  Oculus Ri[ •  Playstaon VR
  21. 21. WebVR Devices – Controllers? •  Proprietary •  Gear VR •  Playstaon VR •  Generic •  xbox One •  Others
  22. 22. How about a interesting demo? • three.js: hTp://graphics.wsj.com/3d-nasdaq/
  23. 23. JavaScript API • Frameworks for coding • Authoring Soluons
  24. 24. Frameworks – some examples • three.js • A-Frame • React VR • Autodesk Forge Viewer
  25. 25. three.js •  Thorough and well documented •  open source •  assets can be directly loaded/ imported •  potenally a lot of 3d graphics coding!
  26. 26. three.js • Demo: hTps://borismus.github.io/ webvr-boilerplate/ • Code sample: •  Demo of boilerplate
  27. 27. A-Frame •  A-Frame is a web framework for building virtual reality (VR) experiences •  Originally from Mozilla •  open source •  assets can be directly loaded/imported •  based on top of HTML
  28. 28. A-Frame • Demo: •  hTps://ngokevin.github.io/kframe /scenes/aincra[/ • Code Sample: •  A-frame.html
  29. 29. React VR •  Powered by Facebook •  What VR company does facebook own? •  React VR is now open source •  assets can be directly loaded/imported •  Natural plaporm: •  if you know React already •  want to mix 2D 360 content with 3D content
  30. 30. React VR • Easy geqng started: •  hTps://developer.oculus.com/webvr/ • Demo: •  hTps://ironmanviewer.herokuapp.com/ • Code Sample: •  hTps://github.com/JohnOnSo[ware/SolarSystemWebVR
  31. 31. Autodesk Forge Viewer •  Uses three.js, so can mix •  subscripon model •  assets via SVF format •  potenally small amount of code •  Many 3D navigaon, viewing and data aspects provided •  Meta data included •  Handles very large models/data sets
  32. 32. Autodesk Forge Viewer
  33. 33. Autodesk Forge Viewer
  34. 34. Autodesk Forge Viewer • Simple viewer instanaon code • WebVR enabled through a viewer “extension”
  35. 35. • Demo: •  www.vrok.it/v2 • Code Sample: •  hTps://github.com/JohnOnSo[ware/Forge-Viewer- WebVR-Sample
  36. 36. Authoring Solutions •  No direct coding required •  Autodesk Play: hTps://play.autodesk.com •  Vizor: hTps://vizor.io/ •  Insta VR: hTp://www.instavr.co/ •  AEC market specific: •  Enscape: hTps://enscape3d.com/ •  Revit Live: hTp://www.autodesk.com/live
  37. 37. What about AR? • WebAR? • Microso[ – Just use Unity • ARkit from apple • ARCore from google
  38. 38. What is WebVR? • 3D experience (but content does not have to be…) • Virtual Reality experiences in your browser • JavaScript API
  39. 39. Resources: •  WebVR Info: hTps://webvr.info •  Create WebVR: hTps://createwebvr.com •  WebVR Rocks: hTps://webvr.rocks •  ThreeJS: hTps://threejs.org •  A-Frame: hTps://aframe.io •  React VR: hTps://facebook.github.io/react-vr/ •  Autodesk Forge Viewer: hTps://developer.autodesk.com •  WebVR Slack @hTps://webvr.slack.com

×