Babylon.js: Improve WebXR demos and references

[deltakosh]

• [x] Make sure everything works with WebXR emulator
• [x] Fix PG demos on https://doc.babylonjs.com/how_to/webxr
• [x] Add References to all WebXR demo from webXR documentation page
• [x] Port all WebVR demos to detect WebXR and switch to it if supported
• [ ] Port color picker démo to immersive-ar
• [x] Port this webVR demo: https://playground.babylonjs.com/#ZNX043#1
• [x] Use same icon as WebVR for WebXR button
• [x] Allow configuring the creation of the output canvas

[jdm]

https://github.com/BabylonJS/Babylon.js/blob/f6012e79eb38c20c4c85f39ccdea8cee1c762dd5/src/Cameras/XR/webXRManagedOutputCanvas.ts#L31 can request a WebGL layer that doesn't necessarily match the original webgl context, since no XRWebGLLayerInit attributes are passed. If the canvas context has a stencil buffer, the new layer will not according to the spec since the stencil attribute is false by default when no attributes are passed to the constructor.

[RaananW]

Seems to be missing on our side. I can expose that as a configuration value. For future references -
https://github.com/immersive-web/webxr-reference/blob/master/webxr-device-api/xrwebgllayer-constructor.md

[RaananW]

@jdm - I have just added the option to configure the output canvas (being merged soon) as part of this ticket

[RaananW]

Regarding color-picker support in AI - the current implementation of AR in webxr does not trigger any js native events except for the select event on the AR session (for ray-tracing object placement in the scene). This means that our GUI cannot work at the moment, until the browser at least supports the native pointer events.
We simulate PointerMove events, and they are the only native event we can currently use. PointerDown and Up are not triggered.

[RaananW]

Skull Demo using WebXR - https://playground.babylonjs.com/#ZNX043#15

[deltakosh]

This means that our GUI cannot work at the moment, until the browser at least supports the native pointer events.

Is it planned?

[deltakosh]

Skull Demo using WebXR

Please update the webvr doc with the demo links :)

[RaananW]

Is it planned?

i couldn't find any documentation. An old chrome demo (which doesn't work anymore) shows the click event enabled. A new demo i found online is only using the select event from the hit-test (an experimental feature that needs to be enabled to use)

[deltakosh]

Can we support the select event then and call the simualtePointerUp and down?

[RaananW]

Can we support the select event then and call the simualtePointerUp and down?

To answer publicly - the select event provides information about the real world (where you are and what you hit), but nothing about the local/babylon state so it can be used as a pointer down (not up), but it does not provide the coordinates on screen. I can try using the first pointer-move event as the pointer down. will need to experiment with that a bit.

[deltakosh]

will need to experiment with that a bit.

Thanks!

[RaananW]

Color picker in AR - addressed in a new ticket (#7226)