Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
•
0 j'aime•316 vues
Ok, let’s get real: VR in a Web Browser isn’t something new in 2017. Firefox shipped their support for everyone. HTC Vive, Oculus Rift and other hardware is being supported. You can create VR experiences using your browser and Javascript. New browser engines are powerful enough to be able to serve the experiences on a open and standardised platform. But what about AR? Or Mixed Realities (MR)? Join my session and learn how AR or better said MR is getting into your browsers, too. See how and what the platform is being able to offer and what you could expect in near future.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (12)
Similaire à Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Similaire à Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018 (20)
Plus de Codemotion
Plus de Codemotion (20)
Dernier
Dernier (20)
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
- 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
- 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
- 11. 2017 - The AR-Revolution
- 12. BASIC CONCEPTS - PART 1: VIRTUAL REALITY
- 19. BASIC CONCEPTS PART 1.1: WHAT IS WEBVR?
- 20. Browser APIs that enable WebGL rendering to headsets and access to VR sensors
- 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 sceneSet up lights Declare and pass canvasInstall VREffect Listen to window resize Create render loop Instantiate renderer Figure out responsivenessPreload 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>
- 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">
- 39. BASIC CONCEPTS - PART 2 MIXED REALITY
- 44. TYPES OF AR
- 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); });
- 53. A-FRAME GOES XR
- 55. WebXR with A-Frame <a-scene> <a-entity xr="ar: true; vr: false; magicWindow: false“> </a-entity> <!-- ... --> </a-scene>
- 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
- 61. NO GATEKEEPERS
- 62. INSTANT
- 63. CONNECTED