MIXED REALITIES FOR WEB The immersive web and the WebXR device API Carsten Sandtner \\ @casarock Photo:: Bradley Hook https://www.pexels.com/photo/sky-woman-clouds-girl-123335/
ABOUT://ME My name is Carsten and I’m Technical Director at mediaman GmbH in Mayence (Mainz). I’m a moz://a Techspeaker and I love the open web and everything about open standards for the web! I’m tweeting as @casarock
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(); }
BUT THERE IS MORE… 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
EASY AS 1, 2, 3… 1. Ask for access to a device and detect XR modes 2. Request a XR session and allow starting the session 3. Within the session start your render loop with awesome graphics 4. Execute the render loop until the user has enough 5. Stop the XR Session - Clean up your mess. ,4, 5
DETECT DEVICES! function checkForXRDevice() { navigator.xr.requestDevice().then(device => { // At least one Device found onXRAvailable(device); }, err => { if (err.name === 'NotFoundError') { // no device console.error('No XR Device: ', err); } else { // other error while accessing a device console.error('Error while requesting XR device: ', err); } }); } 1
START REQUESTED SESSION function beginXRSession() { // requestSession must be called within a // user gesture event like click or touch // when requesting an immersive session. xrDevice.requestSession({ immersive: true }) .then(onSessionStarted) .catch(err => { // Fallback when session couldn't // bestarted window.requestAnimationFrame(onDrawFrame); }); } 2
DRAW YOUR SCENE function onDrawFrame(timestamp, xrFrame) { // Do we have an active session? if (xrSession) { let pose = xrFrame.getDevicePose(xrFrameOfRef); gl.bindFramebuffer(gl.FRAMEBUFFER, xrSession.baseLayer.framebuffer); for (let view of xrFrame.views) { let viewport = xrSession.baseLayer.getViewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); drawScene(view, pose); } // Request the next animation callback xrSession.requestAnimationFrame(onDrawFrame); } else { // No session available, so render a default mono view. gl.viewport(0, 0, glCanvas.width, glCanvas.height); drawScene(); // Request the next window callback window.requestAnimationFrame(onDrawFrame); } } 4
DRAW YOUR SCENE function drawScene(view, pose) { let viewMatrix = null; let projectionMatrix = null; if (view) { viewMatrix = pose.getViewMatrix(view); projectionMatrix = view.projectionMatrix; } else { viewMatrix = defaultViewMatrix; projectionMatrix = defaultProjectionMatrix; } // Set uniforms as appropriate for shaders being used // Draw Scene - This is where your awesome GFX-Skills // are needed! } 4
CLEAN UP YOUR MESS… function endXRSession() { if (xrSession) { // stop active session xrSession.end().then(onSessionEnd); } } // Clean up function onSessionEnd() { gl.bindFramebuffer(gl.FRAMEBUFFER, null); xrSession = null; // If you still want to have a rendering outside // your XR Session, feel free! window.requestAnimationFrame(onDrawFrame); } 5
casarock
niftycorp
fujiwara3
replu
etaroid
hakubishin3
k1low
lemiorhan
you
tyrmanuz
lwug
nayuts
onlinesalon
philhawksworth
colly
bermonpainter
chriscoyier
lauravandoore
tmm1
destraynor
trallard
akosma
tanoku
jrom
lara