How to Use WebVR to Enhance the Web Experience
0 likes690 views
The document provides an overview of WebVR, emphasizing its capability to create virtual reality experiences in web browsers using a JavaScript API. It discusses various WebVR-compatible devices and browsers, as well as different authoring tools and frameworks like Three.js, A-Frame, and React VR for developing 3D content. Additionally, it mentions the potential for integrating augmented reality (AR) solutions alongside WebVR.
How to Use WebVR to Enhance the Web Experience
- 2. Kevin Vandecar – Disorganized Tinkerer
- 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. 3D experience • Authoring Tools • CAD • Ex: Solidworks, Fusion 360, Revit • M+E • Ex: Blender, 3ds Max, Maya • Online • Turbo Squid • Creave Market
- 7. 3D experience …but content does not have to be… • Pseudo 3D (images) • True 3D (models) • Example: hTps://ironmanviewer.herokuapp.com/
- 8. Virtual Reality via WebVR • Browsers • Devices
- 9. Virtual Reality WebVR compatible Browsers • Source: hTp://createwebvr.com/
- 10. Virtual Reality WebVR compatible Browsers • Source: hTps://webvr.rocks/
- 13. © 2017 Autodesk, Inc.
- 14. Virtual Reality - WebVR Devices • Google Cardboard • Google Daydream • Samsung VR Gear • HTC Vive • Oculus Ri[ • Others: Windows AR/MR, PlayStaon VR
- 16. WebVR Devices – Google Cardboard • Make it yourself? • Find a free one!
- 17. Virtual Reality - WebVR Devices Cardboard - Promotional and/or Creative
- 18. WebVR Devices – Google Cardboard • Device needs to • support WebGL • have proper Sensors
- 19. WebVR Devices – Google Daydream • Not many yet… • hTps://vr.google.com/ daydream/smartphonevr/phones/
- 20. 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
- 21. 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/
- 22. WebVR Devices • HTC Vive • Oculus Ri[ • Playstaon VR
- 23. WebVR Devices – Controllers? • Proprietary • Gear VR • Playstaon VR • Generic • xbox One • Others
- 24. How about a interesting demo? • three.js: hTp://graphics.wsj.com/3d-nasdaq/
- 26. Frameworks – some examples • three.js • A-Frame • React VR • Autodesk Forge Viewer
- 27. three.js • Thorough and well documented • open source • assets can be directly loaded/ imported • potenally a lot of 3d graphics coding!
- 28. three.js • Demo: hTps://borismus.github.io/ webvr-boilerplate/ • Code sample: • Demo of boilerplate
- 29. 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
- 30. A-Frame • Demo: • hTps://ngokevin.github.io/kframe /scenes/aincra[/ • Code Sample: • A-frame.html
- 31. 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
- 32. React VR • Easy geqng started: • hTps://developer.oculus.com/webvr/ • Demo: • hTps://ironmanviewer.herokuapp.com/ • Code Sample: • hTps://github.com/JohnOnSo[ware/SolarSystemWebVR
- 33. 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
- 36. Autodesk Forge Viewer • Simple viewer instanaon code • WebVR enabled through a viewer “extension”
- 37. • Demo: • www.vrok.it/v2 • Code Sample: • hTps://github.com/JohnOnSo[ware/Forge-Viewer- WebVR-Sample
- 38. 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
- 41. 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