How to Use WebVR to Enhance the Web Experience
•
0 recomendaciones•686 vistas
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
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a How to Use WebVR to Enhance the Web Experience
Similar a How to Use WebVR to Enhance the Web Experience (20)
Más de FITC
Más de FITC (20)
Último
Último (20)
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