WebXR Plane Detection

[Maksims]

Implementation of an experimental draft spec: https://immersive-web.github.io/real-world-geometry/plane-detection.html

It is available in Chrome for Android 89, with enabled chrome://flags#webxr-incubations flag.

Plane detection provides information about real-world surfaces estimations in form of planes.
Each plane can have its position, rotation and a list of edge points making a complex polygon.

New APIs:

// pc.XrManager
app.xr.planeDetection // interface to access plane detection
app.xr.start(camera, ..., ..., {
    planeDetection: true
}); // new option to enable plane detection

// pc.XrPlaneDetection
planeDetection.supported // true if plane detection is supported
planeDetection.available // true if plane detection is available
planeDetection.planes // a list of pc.XrPlane's

planeDetection.on('available', () => { }); // fired when plane detection becomes available, due to spec design it is not possible to know if it is available before a first XR session update
planeDetection.on('unavailable', () => { }); // fired when plane detection becomes unavailable, for example when session is ended
planeDetection.on('add', (plane) => { }); // fired when a new plane is added
planeDetection.on('remove', (plane) => { }); // fired when a plane is removed

// pc.XrPlane
plane.id // numerical id of a plane
plane.orientation // 'horizontal' or 'vertical' orientation of a plane, or null if any other orientation
plane.points // a list of edge points of a plane. Their coords are in local space to a plane
plane.getPosition() // get world position of a plane
plane.getRotation() // get world rotation of a plane

plane.once('remove', () => { }); // fired when plane is removed
plane.on('change', () => { }); // fired when plane orientation or points have been changed

Test project:

https://playcanvas.com/project/782753/overview/webxr-plane-detection
This project builds mesh, updates it when the plane is changed and draw lines for each detected plane.

Test build:

https://playcanv.as/p/f2ESRGge/
Ensure you have chrome://flags#webxr-incubations enabled

Video:

https://twitter.com/mrmaxm/status/1379802592163864581

I confirm I have signed the Contributor License Agreement.

[Maksims]

I'm not sure how to deal with a TypeScript error as it fails to find XRPlane, and not sure where to add a "polyfill" for such a test. Please advice @mvaligursky

#typescript-problems

[yaustar]

Self note: add project https://playcanvas.com/project/782753/overview/webxr-plane-detection to tutorials section

[willeastcott]

OK, LGTM now, @Maksims. Can you resolve the xr-manager.js conflict and I'll merge.

[willeastcott]

Looks like Typescript definitions are failing:

[Maksims]

Looks like Typescript definitions are failing:

I have no idea how to fix those TypeScript issues.

[willeastcott]

This is a duplicate of the param definition at line 190

[willeastcott]

Except that declaration is an object