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