Mixed Realities in your browsers

Mixed Realities in your browsers

The Slides for my Session at Codemotion Amsterdam 2018.

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

May 09, 2018
Tweet

Transcript

  1. Mixed Realities in your Browsers Carsten Sandtner (@casarock) AMSTERDAM |

    MAY 8-9, 2018
  2. about://me Carsten Sandtner Technical Director 
 mediaman // Web development

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

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

  6. VIEWMASTER

  7. VIRTUALBOY

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

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

  10. MICROSOFT HOLOLENS

  11. 2017 - The AR-Revolution

  12. BASIC CONCEPTS - PART 1: VIRTUAL REALITY

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

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

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

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

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

  19. BASIC CONCEPTS PART 1.1: WHAT IS WEBVR?

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

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

    VRStageParameters
  22. 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(); }); }); });
  23. 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(); }
  24. 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
  25. A-FRAME

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

    iOS, Android, and the Oculus Rift.
  27. 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>
  28. 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>
  29. None
  30. ENTITY COMPONENT SYSTEM

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

    roughness: 0.4; sphericalEnvMap: #texture">
  32. 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">
  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" animation="property: rotation; loop: true; to: 0 360 0" movement-pattern="type: spline; speed: 4">
  34. AWESOME USE CASES

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

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

  37. 37 https://pepsigoback.com/

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

  40. Reality Augmented Reality Mixed Reality Virtual Reality Mixed Reality?

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

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

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

    Reality XR!
  44. TYPES OF AR

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

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

  47. TRACKING

  48. BASIC CONCEPTS PART 2.1: WHAT IS WEBXR?

  49. WebVR 2 API ↓ WebXR Device API

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

    is not in focus on start - „Coming soon!“ • Focused on tracking based AR (Phone-based)
  51. 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); });
  52. https://www.w3.org/blog/2018/01/towards-the-immersive-web/

  53. A-FRAME GOES XR

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

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

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

  57. 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
  58. ADVANTAGES OF WEBXR

  59. WebXR is progressive

  60. None
  61. NO GATEKEEPERS

  62. INSTANT

  63. CONNECTED

  64. None
  65. https://mixedreality.mozilla.org/ 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

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