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
oniak3ibm
syoshie
twada
risatube
oracle4engineer
shintaro_fukatsu
zigorou
naoki_0531
lycorptech_jp
handy
aiandrox
rssytems
bkeepers
kastner
maltzj
lemiorhan
rasmusluckow
addyosmani
scottboms
caitiem20
samlambert
csswizardry
colly
trallard
