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
casarock
masasuzu
cybozuinsideout
smt7174
optimisuke
radkmb
poteboy
nagix
fedepaol
kawagoi
seosoft
route06
line_developers_tw
jacobian
iamctodd
matthewcrist
colly
robhawkes
marcduiker
jeffersonlam
brad_frost
reverentgeek
notwaldorf
jrom
geoffreycrofte