Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mixed Realities in your browsers - BEDCon 2018

Mixed Realities in your browsers - BEDCon 2018

My slides of my talk about VR/MR/XR in browsers. From WebVR to WebXR!

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

September 07, 2018
Tweet

Transcript

  1. MIXED REALITIES IN YOUR BROWSERS Carsten Sandtner (@casarock)

  2. about://me Carsten Sandtner Technical Director 
 mediaman // Web development

    since 1998 @casarock
 https://www.casa-rock.de

  3. None
  4. None
  5. None
  6. LET’S DO SOME TIME TRAVEL!

  7. VIEWMASTER

  8. VIRTUALBOY

  9. Oculus Rift • Kickstarter 2013 • Disruption in VR •

    Many other followed • HTC Vive • PS VR • etc. Image by Oculus VR, LLC
  10. PROJECT HEADSIGHT

  11. MICROSOFT HOLOLENS

  12. 2017 - The AR-Revolution

  13. BASIC CONCEPTS - PART 1: VIRTUAL REALITY

  14. https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Concepts

  15. https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Concepts

  16. None
  17. SENSORS https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Concepts

  18. FIELD OF VIEW https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Concepts

  19. STEREOSCOPIC IMAGES https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Concepts

  20. BASIC CONCEPTS PART 1.1: WHAT IS WEBVR?

  21. Browser APIs that enable WebGL rendering to headsets and access

    to VR sensors
  22. Available APIs VRDisplay VRDisplayCapabilities VRDisplayEvent VRFrameData VRPose VREyeParameters VRFieldOfView VRLayerInit

    VRStageParameters
  23. Get VR Displays var frameData = new VRFrameData(); var vrDisplay;

    navigator.getVRDisplays().then(function (displays) { vrDisplay = displays[0]; console.log('Display found'); // Starting the presentation when the button // is clicked: It can only be called in response to a user gesture btn.addEventListener('click', function () { vrDisplay.requestPresent([{ source: canvas }]).then(function () { drawVRScene(); }); }); });
  24. Draw your VR Scene function drawVRScene() { // WebVR: Request

    the next frame of the animation vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene); // Populate frameData with the data of the next frame to display vrDisplay.getFrameData(frameData); // You can get the position, orientation, etc. // of the display from the current frame's pose // curFramePose is a VRPose object var curFramePose = frameData.pose; var curPos = curFramePose.position; var curOrient = curFramePose.orientation; // Here happens some WebGL Stuff! // WebVR: Indicate that we are ready to present the rendered frame to the VR display vrDisplay.submitFrame(); }
  25. Import WebVR polyfill Set up camera Initialize scene Set up

    lights Declare and pass canvas Install VREffect Listen to window resize Create render loop Instantiate renderer Figure out responsiveness Preload assets Deal with metatags and mobile
  26. A-FRAME

  27. Use markup to create VR experiences that work across desktop,

    iOS, Android, and the Oculus Rift.
  28. Basic VR Scene with aframe <!DOCTYPE html> <html> <head> <meta

    charset="utf-8"> <title>Hello, World!</title> <script src=“/aframe.min.js“></script> </head> <body> <a-scene> <a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> </a-box> <a-sky color="#bbb"></a-sky> </a-scene> </body> </html>
  29. Basic VR Scene with animation <!DOCTYPE html> <html> <head>. .

    .</head> <body> <a-scene> <a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> </a-box> </a-scene> </body> </html>
  30. None
  31. ENTITY COMPONENT SYSTEM

  32. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434;

    roughness: 0.4; sphericalEnvMap: #texture">
  33. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434;

    roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2">
  34. Composing an Entity <a-entity geometry="primitive: sphere; radius: 1.5" material="color: #343434;

    roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2" animation="property: rotation; loop: true; to: 0 360 0" movement-pattern="type: spline; speed: 4">
  35. AWESOME USE CASES

  36. http://www.360syria.com/

  37. 37 https://aframe.io/a-painter/

  38. 38 https://pepsigoback.com/

  39. None
  40. BASIC CONCEPTS - PART 2 MIXED REALITY

  41. Reality Augmented Reality Mixed Reality Virtual Reality Mixed Reality?

  42. https://www.gizmodo.com.au/2017/04/lemmings-in-hololens-adds-new-dimension-to-animal-suicide/

  43. https://thenextweb.com/insider/2016/06/16/the-force-is-strong-with-this-leap/

  44. Reality Augmented Reality Mixed Reality Virtual Reality XR - whateveryouwant

    Reality XR!
  45. TYPES OF AR

  46. MARKER BASED AR https://www.flickr.com/photos/piair/8679229646/

  47. MARKERLESS AR https://www.flickr.com/photos/wikitude/30944213892/

  48. TRACKING

  49. BASIC CONCEPTS PART 2.1: WHAT IS WEBXR?

  50. WebVR 2 API ↓ WebXR Device API

  51. WebXR • is not backwards compatible with WebVR! • AR

    is not in focus on start - „Coming soon!“ • Focused on tracking based AR (Phone-based)
  52. WebXR navigator.xr.requestDevice().then(device => { // Resolves to an XRDevice if

    one is available, or to null otherwise. if (device) { onXRAvailable(device); } }).catch(error => { // An error occurred while requesting an XRDevice. console.error('Unable to request an XR device: ', error); });
  53. https://www.w3.org/blog/2018/01/towards-the-immersive-web/

  54. A-FRAME GOES XR

  55. HTTPS://GITHUB.COM/MOZILLA/AFRAME-XR/ https://blog.mozvr.com/responsive-webxr-a-painter-xr/

  56. WebXR with A-Frame <a-scene> <a-entity xr="ar: true; vr: false; magicWindow:

    false“> </a-entity> <!-- ... --> </a-scene>
  57. https://github.com/mozilla/aframe-xr/

  58. This is just the beginning • WebXR is not ready

    • APIs are in flux and are changing constantly • The web is joining the hype train! https://twitter.com/LeapMotion/status/988749463215857664
  59. ADVANTAGES OF WEBXR

  60. WebXR is progressive

  61. None
  62. NO GATEKEEPERS

  63. INSTANT

  64. CONNECTED

  65. None
  66. https://mixedreality.mozilla.org/ https://aframe.io https://github.com/immersive-web/webxr https://immersive-web.github.io/webxr-samples/ https://immersive-web.github.io/webxr/ https://github.com/mozilla/aframe-xr Some Links

  67. THAT’S ALL. THANKS! @casarock https://github.com/casarock https://casa-rock.de/