Error while implementing XR in Babylon-Native

while implementing xr and running im getting this error in babylon.max.js

Unhandled exception at line 247824, column 9 in app:///Scripts/babylon.max.js
0x800a01b6 - JavaScript runtime error: Object doesn’t support property or method ‘createElement’

exactly here -->  this.overlay = document.createElement("div");
this.overlay.classList.add("xr-button-overlay");

is it normal or is there anything im missing here is the code for xr implementation

 scene.createDefaultXRExperienceAsync({
            disableDefaultUI: false,
            outputCanvasOptions: {
                canvasOptions: {
                    framebufferScaleFactor: 100,
                    antialias: true,
                }
            }
        }).then((xr) => {
            const fm = xr.baseExperience.featuresManager;
            const mesh = scene.getMeshByName("Nav_Floor")
            if (mesh) {
                xr.teleportation = fm.enableFeature(BABYLON.WebXRFeatureName.TELEPORTATION, "stable", {
                    xrInput: xr.input,
                    floorMeshes: [mesh],
                    renderingGroupId: 1,
                });
                xr.teleportation.teleportationTargetMesh.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5)
                var xrcamRoot = new BABYLON.TransformNode("XRCam", scene);
                XRCam = xr.baseExperience.camera
                xrcamRoot.scaling = new BABYLON.Vector3(1, 1, 1);
                XRCam.parent = xrcamRoot;
                xr.baseExperience.onStateChangedObservable.add((state) => {
                    if (state === BABYLON.WebXRState.IN_XR) {
                        XRCam.position.y = 2;
                    }
                });
                XRCam.onAfterCameraTeleport.add((targetPosition) => {
                    XRCam.position.y = 2;
                });
            }
        });

cc @RaananW and @BabylonNative

I wonder if disableDefaultUI should be true by default in native ?

Was just about to write this :slight_smile:
I’ll wait for the @BabylonNative team to answer. This is the webxr button overlay that is trying to add a div element (which is not supported in native).

UI won’t work in native. You can disable it by setting disableDefaultUI to get around it. We do it in the sample app also: BabylonNative/experience.js at 6ae896b60cc8568d43985d53ef00ef1a6bbdcf8b · BabylonJS/BabylonNative (github.com)

I guess if we can disable it by default, it will be okay.

2 Likes

so how do we access xr capabilities without user authorization in a native windows app so that he can enter into vr and do the stuff…
The thing is I’m building a vr space a windows app, when run user should be able to access the stuff in oculus that’s the whole motive and is there any good approach than this? I want this as an app so that it uses maximum gpu and give a good output rather than a web based app…
please point me in a right direction

This may be a reality check, possibly to me, but are you working on an Hololens? If not, is XR on Native now working for Android platforms?

XR works for both Android (via ARCore) and iOS (via ARKit) and has been for a while now. HoloLens support is experimental.

It’s mostly the same. The only difference is that the HTML button is not available automatically in the experience helper, so you will need a different UI to start the experience. Babylon Native does not provide the app UI framework by itself (besides UI provided in Babylon.js itself). We do have an integration with React Native that is a more complete package.

Babylon Native doesn’t work with Oculus yet unfortunately. :frowning:

Just to set expectations, using Babylon Native is still a web-based app. It probably won’t give you better performance compared to a browser since the engine code still runs in JavaScript. If you are targeting just one platform and you must get all the performance out of it, then it is perhaps better to use the platform APIs directly. This page maybe will help a bit.

2 Likes