WebXR support

[mbredif]

Description

This proof of concept show some initial support for WebXR. This adds 3 examples which feature the Three's VRButton for entering the immersive mode.

Motivation and Context

Three.js supports WebXR, which is the web standard for virtual/mixed/augmented reality. Having iTowns support WebXR would enable an immersive iTowns experience on any WebXR compatible device (hololens, vive, android...)

Screenshots

Tested Platforms

• [x] Hololens 2 on Edge
• [x] Web XR API Emulator on firefox 102

Known Issues (to be completed...)

• Enabling WebXR is hacky
• Camera poses between immersive and non immersive mode are not synchronized
• Camera orientation in immersive mode does not align the vertical direction of the virtual world with the one of the real world.
• LOD computation is broken (low res raster tiles and point patches, no 3D features)

[jailln]

I've also tested VR (and AR) with itowns on this branch

I found the same conclusions and difficulties:

• the rendering loop needs to be modified
• difficulties to sync the VR camera with the 3D viewer camera

Regarding the rendering loop modifications, there is at least a need to replace requestAnimationFrame by setAnimationLoop, but I haven't taken enough time to check what are the implications of this modifications and how we should manage it in itowns.

Regarding camera synchronization, I think that setReferenceSpaceType might be the way to go but it didn't work for me and I saw afterwards that according to mozilla's documentation it only works in https.

[mittermichal]

hi, in my project (not public atm) that uses https://github.com/NASA-AMMOS/3DTilesRendererJS I have tried to use XRReferenceSpace for teleporting in VR and ran into issue that when user position coordinates were too big, then controllers did not move smoothly in the scene. I suspect this is the issue causes that.

So I ended up moving center of tileset group to center of its bounding box and moving group containing camera and controllers when teleporting. Like they do in the NASA-AMMOS renderer: https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/9cead4f1dceb28138ee6b0cda4df7db427fc0384/example/vr.js#L304

setReferenceSpaceType only works in https

secure context is available in localhost same as WebXR - https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API

[gchoqueux]

new webXR support in #2092