WebXR WebXR is the latest evolution in the exploration of virtual augmented and mixed realities it taps the power of the web along with the unification of these realities under one philosophical umbrella making it easier to create immersive 3D art interactive environments VR tools and more Through navigator xr you can access the XR API console log navigator xr let res await navigator xr isSessionSupported immersive vr console log res let res await navigator xr isSessionSupported immersive ar console log res let res await navigator xr isSessionSupported inline console log res for key in navigator xr console log key navigator xr key let session await navigator xr requestSession inline console log session for key in session if key depthUsage continue if key depthDataFormat continue console log key session key navigator xr requestSession inline then session xrSession session continue to set up the session console log xrSession for key in xrSession console log key xrSession key let xrSession await navigator xr requestSession inline console log xrSession let res await xrSession requestAnimationFrame onXRFrame console log res function onXRFrame t frame console log frame document body style height 200px let xrSession await navigator xr requestSession inline console log xrSession function onXRFrame t frame console log frame frame xrSession requestAnimationFrame myDrawFrame let glLayer xrSession renderState baseLayer gl bindFrameBuffer gl FRAMEBUFFER glLayer framebuffer gl clearColor 0 0 0 1 0 gl clearDepth 1 0 gl clear gl COLOR_BUFFER_BIT gl DEPTH_BUFFER_BIT let canvas document createElement canvas canvas style width 100px canvas style height 100px document body appendChild canvas console log canvas canvas let gl canvas getContext webgl xrCompatible true console log gl gl let glLayer new XRWebGLLayer xrSession gl console log glLayer glLayer let rs await xrSession updateRenderState baseLayer glLayer console log rs let refSpace await xrSession requestReferenceSpace viewer console log refSpace refSpace let res xrSession requestAnimationFrame onXRFrame console log res document body style height 200px Obtain XR object const XR navigator xr Request a new XRSession XR requestSession inline then xrSession xrSession requestAnimationFrame time xrFrame console log here let viewer xrFrame getViewerPose xrReferenceSpace gl bindFramebuffer xrWebGLLayer framebuffer for xrView of viewer views let xrViewport xrWebGLLayer getViewport xrView gl viewport xrViewport x xrViewport y xrViewport width xrViewport height WebGL draw calls will now be rendered into the appropriate viewport let count 0 let xrSession null let canvas document createElement canvas document body appendChild canvas console log canvas canvas let gl canvas getContext webgl xrCompatible true console log gl gl function onWindowAnimationFrame time window requestAnimationFrame onWindowAnimationFrame count This may be called while an immersive session is running on some devices such as a desktop with a tethered headset To prevent two loops from rendering in parallel skip drawing in this one until the session ends if xrSession renderFrame time null if count 10 console log xrSession The window animation loop can be started immediately upon the page loading window requestAnimationFrame onWindowAnimationFrame function onXRAnimationFrame time xrFrame xrSession requestAnimationFrame onXRAnimationFrame renderFrame time xrFrame function renderFrame time xrFrame Shared rendering logic Assumed to be called by a user gesture event elsewhere in code function startXRSession navigator xr requestSession inline then session xrSession session xrSession addEventListener end onXRSessionEnded Do necessary session setup here Begin the sessions animation loop console log Begin the sessions animation loop xrSession requestAnimationFrame onXRAnimationFrame function onXRSessionEnded xrSession null
efSpace await xrSession requestReferenceSpace viewer console log refSpace refSpace let res xrSession requestAnimationFrame onXRFrame console log res document body style height 200px Obtain XR object const XR navigator xr Request a new XRSession XR requestSession inline then xrSession xrSession requestAnimationFrame time xrFrame console log here let viewer xrFrame getViewerPose xrReferenceSpace gl bindFramebuffer xrWebGLLayer framebuffer for xrView of viewer views let xrViewport xrWebGLLayer getViewport xrView gl viewport xrViewport x xrViewport y xrViewport width xrViewport height WebGL draw calls will now be rendered into the appropriate viewport let count 0 let xrSession null let canvas document createElement canvas document body appendChild canvas console log canvas canvas let gl canvas getContext webgl xrCompatible true console log gl gl function onWindowAnimationFrame time window requestAnimationFrame onWindowAnimationFrame count This may be called while an immersive session is running on some devices such as a desktop with a tethered headset To prevent two loops from rendering in parallel skip drawing in this one until the session ends if xrSession renderFrame time null if count 10 console log xrSession The window animation loop can be started immediately upon the page loading window requestAnimationFrame onWindowAnimationFrame function onXRAnimationFrame time xrFrame xrSession requestAnimationFrame onXRAnimationFrame renderFrame time xrFrame function renderFrame time xrFrame Shared rendering logic Assumed to be called by a user gesture event elsewhere in code function startXRSession navigator xr requestSession inline then session xrSession session xrSession addEventListener end onXRSessionEnded Do necessary session setup here Begin the sessions animation loop console log Begin the sessions animation loop xrSession requestAnimationFrame onXRAnimationFrame function onXRSessionEnded xrSession null