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 Enough about me, let’s get started!
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(); }); }); });
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(); }
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 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
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
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
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
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
// 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
abenben
terapyon
ufried
fumisuke
fullkaiten
osakatechlab
hr01
maimyyym
nkzn
riyaamemiya
bitkey
ar_tama
garrettdimon
smashingmag
jonrohan
holman
panda_program
jonyablonski
swwweet
keathley
sergeychernyshev
reverentgeek
geoffreycrofte
chriscoyier
