WebXR polyfill-option in babylonjs-playground

WebXR will be the winner but WebVR is still the only supported VR in many devices.
And polyfill is the solution, most times.
But in the babylonjs-playground, there is no way to use it, is there?

Please add an option (or any other way) to activate/use WebVR to WebXR polyfill
to be used it in a playground.

There are some playgrounds but none of them is running. Mostly with this code:

var url = "https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js";
var s = document.createElement("script");
s.src = url;
document.head.appendChild(s);

pinging @RaananW

We have decided to generally not add not dependencies to the playground, as it is full of them as it is. The code you pasted does add the polyfill, but requires initialization.

var​ ​polyfill​ ​=​ ​new​ ​WebXRPolyfill​(​)

should initialize the polyfill, which needs to be called after the script has loaded. I’ll update the documentation with a working example

Yes, please a working playground example in the BJS doc about WebXR polyfill.
That would do it indeed.

If I add the polyfill append to my playground,
I get Loading assets… Please wait. forever. And the cube/scene ist not movable.
But not always. That’s just because the server is week.

If I add your

A read square says: createEngine function must return an engine.

I searched the playgrounds for polyfill but none of them seemed to work and show the VR symbol.

Except the Delorian scene ( without ​WebXRPolyfill​! )

But it is using VR and XR! And I assume, it runs because of the createDefaultVRExperience.
I could delete createDefaultXRExperienceAsync without any change in behavior.

Don’t use VR and XR together, this wont work correctly.

To load the polyfill you can do something like this - https://www.babylonjs-playground.com/#JA1ND3#256 .

As i constantly write - we don’t officially support the WebXR polyfill, as i can’t control exactly what’s being done in the polyfill. As I know there were users who got the polyfill to work and it was working well, but i can’t help more than showing an example of how it can work. The working example I suggested was this kind of playground - showing how the polyfill can work.

The playground you pasted is a very interesting hybrid of everything-in-one-scene, and I do hope you didn’t find it in the official docs. I would be very happy to get rid of those kind of playgrounds, and they are working with an older version of the XR API.

This VR and XR playground was not my idea.
And no, therer is no link in the docs to it

Your playground example is good, and clever.
I just added a box, by R-G-B color indicating if WebVR, WebAR, immersive-vr is given:
https://www.babylonjs-playground.com/#JA1ND3#260

I got the hint do use polyfill from this BJS forum :dizzy_face:
Acutally it looks like I don’t need it (because Cardboard only fits with WebVR)
To avoid stubid questions like mine, you should add in the docs, were polyfill is mentioned:

  • “not supported by BJS”
  • and a/your good playground example

The collection of playgrojunds and searching is - - - good for another long post tread :dizzy_face:

Request rejected :heavy_check_mark:

Oh, but it’s there! :slight_smile:

https://doc.babylonjs.com/how_to/introduction_to_webxr#polyfill

I actually added the last sentence 2 days ago, the rest was always there.

Happy you managed to get it to work.

1 Like

Oh, there is the source code.
You may make that word playground to a link into a realy working playground
and by a good tagging at your playground one would find it at last, seaching the playgrounds.

I just noted, this polyfill even fills the gap if WebVR is missing, not only WebXR!
So on my iPhone … no let it be end her :innocent:

Does this mean that you have an example that also works on iOS devices? Your playground example does not work on my iOS device in the Safari browser.

I started a new thread for general cardboard support on iOS devices here (open to any solution, not necessarily WebXR):
https://forum.babylonjs.com/t/how-to-support-cardboard-view-on-all-devices-android-ios/14932

Not directly: BJS supports a fallback for Cardboard. The WebXR did not work but the WebVR did.
So I coded an createDefaultImmersiveExperienceAsync:
if WebXR: Oculus Quest etc. - be happy
else if WebVR: Apple Mac etc. - use WebXRPolyfill
else: No WebVR or XR: Cardboard, iPhone etc. - use createDefaultVRExperience fallback

In the last case, I wrote some simple polyfill from that WebVR fallback to WebXR
to always use a WebXR API in the application.

It is far from perfect useful:
www.osmgo.org/o2w/test/immersive.js

Thanks for you feedback! I have not tried you solution yet, but it looks promising.
Nevertheless I still hope that Babylon offers a more “out-of-the-box” solution meanwhile.

Best regards