WebXR implementation


currently I am trying to implement a basic way to create a WebXR scene in svelte-babylon.
The main code can currently be found at svelte-babylon/index.svelte at webxr · Myrmod/svelte-babylon · GitHub

I have some difficulties with this:

at svelte-babylon/index.svelte at webxr · Myrmod/svelte-babylon · GitHub

  • WebXRSessionManager.setReferenceSpaceAsync is, according to typescript, undefined for some reason - why is that? Where do I get it from? Simply importing everything from @babylonjs/core doesn’t work.

  • If I start the scene I get the following error TypeError: Cannot read properties of undefined (reading 'xr') at WebXRSessionManager2.initializeSessionAsync (webXRSessionManager.ts:217:34)
    This error seems to come from _xrNavigator of

public initializeSessionAsync(xrSessionMode: XRSessionMode = "immersive-vr", xrSessionInit: XRSessionInit = {}): Promise<XRSession> {
        return this._xrNavigator.xr.requestSession

Using Scene.createDefaultXRExperienceAsync works, so I am certain, that my setup is correct so far.

What might I have missed?

Maybe your device (iOS?) does not have xr on the navigator and you need the webxr-polyfill.min.js ( GitHub - immersive-web/webxr-polyfill: Use the WebXR Device API today, providing fallbacks to native WebVR 1.1 and Cardboard ).

Thanks for the response. I am using Chrome with the WebXR API emulator. I have support for this feature. I am just missing something in my implementation. I think :confused:

In Babylon.js/webXRSessionManager.ts at master · BabylonJS/Babylon.js · GitHub There is this._xrNavigator = navigator not set. In Babylon.js/webXRSessionManager.ts at master · BabylonJS/Babylon.js · GitHub we do.

Might the missing of this._xrNavigator = navigator in the initializeSessionAsync function a bug?

With calling the function initializeAsync first I can get rid of the previous error.

So only the missing of setReferenceSpaceAsync remains

Seems this function doesn’t exist and has been replaced by setReferenceSpaceTypeAsync. So might it be a mistake in the docs? WebXR Session Manager | Babylon.js Documentation

Yes, looks like that might be a typo or something. I can’t help, sorry. Maybe @cedric will see this thread and jump in.

Edit: I just tested and calling the setReferenceSpaceTypeAsync(“local-floor”) worked well, when called from XR itself.

As I do mostly use the XRExperienceHelper, my code is like this:

                this._xrhelper.baseExperience.onStateChangedObservable.add((state) => {
                    if (state === BABYLON.WebXRState.IN_XR) {



I think @RaananW will be more confortable than me to answer here :slight_smile:

1 Like

There is no function with that name in the XR session manager. there is “setReferenceSpaceTypeAsync”, and there is a setter for referenceSpace

You will have to initialize the xr session manager. That’s exactly what you have found out :slight_smile:

The experience helper does most of the work for you. If you don’t want to use it, you still need to follow some of the steps there in order to get the scene to work as you expect.
If I may ask, what’s wrong with using the XR Experience helper (not the default full imnplementation, just the basic helper)?


The reason I want to essentially implement it myself, that I am trying to build a library that has to be as flexible as possible. To do this I need to understand how babylonjs works on its own. Even though with the experience helper it would be much easier for me. I wouldn’t understand as much as I need I think.

So I might change back to the experience helper if I don’t see a need to have it implemented myself :slight_smile:

My library got even mentioned in a japanese stream, so I am quite motivated now :smiley:


@RaananW as I am reading through the code I am getting more and more unsure about how to takle this issue I have.
What are the benefits if I were to implement the experience helper myself, if there’re any? What drawback does the createDefaultXRExperienceAsync have, if any?

you don’t have to use createDefaultExperienceHelper. You can use the Experience helper (the base of our webxr implementation):

Both the default experience and the experience helper are very dynamic and fully configurable. It should be easier to use them instead of implementing everything yourself.
Not sure what implications it might have on your app. Maybe the enter/exit buttons that you might want to override, but this is possible with the helpers as well.

1 Like