Mixed Realities in your browsers - BEDCon 2018

MIXED REALITIES IN YOUR BROWSERS Carsten Sandtner (@casarock)

about://me Carsten Sandtner Technical Director   mediaman // Web development
since 1998 @casarock  https://www.casa-rock.de 

LET’S DO SOME TIME TRAVEL!

VIEWMASTER

VIRTUALBOY

Oculus Rift • Kickstarter 2013 • Disruption in VR •
Many other followed • HTC Vive • PS VR • etc. Image by Oculus VR, LLC

PROJECT HEADSIGHT

MICROSOFT HOLOLENS

2017 - The AR-Revolution

BASIC CONCEPTS - PART 1: VIRTUAL REALITY

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

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

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

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

BASIC CONCEPTS PART 1.1: WHAT IS WEBVR?

Browser APIs that enable WebGL rendering to headsets and access
to VR sensors

Available APIs VRDisplay VRDisplayCapabilities VRDisplayEvent VRFrameData VRPose VREyeParameters VRFieldOfView VRLayerInit
VRStageParameters

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(); }); }); });

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(); }

Import WebVR polyﬁll 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

A-FRAME

Use markup to create VR experiences that work across desktop,
iOS, Android, and the Oculus Rift.

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>

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>

ENTITY COMPONENT SYSTEM

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

roughness: 0.4; sphericalEnvMap: #texture" position="-1 2 4" rotation="45 0 90" scale="2 2 2">

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">

AWESOME USE CASES

http://www.360syria.com/

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

38 https://pepsigoback.com/

BASIC CONCEPTS - PART 2 MIXED REALITY

Reality Augmented Reality Mixed Reality Virtual Reality Mixed Reality?

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

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

Reality Augmented Reality Mixed Reality Virtual Reality XR - whateveryouwant
Reality XR!

TYPES OF AR

MARKER BASED AR https://www.ﬂickr.com/photos/piair/8679229646/

MARKERLESS AR https://www.ﬂickr.com/photos/wikitude/30944213892/

TRACKING

BASIC CONCEPTS PART 2.1: WHAT IS WEBXR?

WebVR 2 API ↓ WebXR Device API

WebXR • is not backwards compatible with WebVR! • AR
is not in focus on start - „Coming soon!“ • Focused on tracking based AR (Phone-based)

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); });

https://www.w3.org/blog/2018/01/towards-the-immersive-web/

A-FRAME GOES XR

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

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

https://github.com/mozilla/aframe-xr/

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

ADVANTAGES OF WEBXR

WebXR is progressive

NO GATEKEEPERS

INSTANT

CONNECTED

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

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

Mixed Realities in your browsers - BEDCon 2018

Mixed Realities in your browsers - BEDCon 2018

More Decks by Carsten Sandtner

Other Decks in Technology

Featured

Transcript