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

Mixed Realities in your browsers

Mixed Realities in your browsers

The Slides for my Session at Codemotion Amsterdam 2018.

Carsten Sandtner

May 09, 2018
Tweet

More Decks by Carsten Sandtner

Other Decks in Technology

Transcript

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

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

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

    Many other followed • HTC Vive • PS VR • etc. Image by Oculus VR, LLC
  3. 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(); }); }); });
  4. 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(); }
  5. 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
  6. 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>
  7. 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>
  8. 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">
  9. 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">
  10. WebXR • is not backwards compatible with WebVR! • AR

    is not in focus on start - „Coming soon!“ • Focused on tracking based AR (Phone-based)
  11. 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); });
  12. 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