Issue with WebXR Feature Initialization in Production Environment

Questions
,
1

Hello,
Hope you guys are doing well.

I’m experiencing an issue with BabylonJS WebXR implementation that works correctly in my local development environment but fails when deployed to production. Both environments are being tested on the same device, so browser compatibility issues seem unlikely.

ARIssue
ARIssue804×186 10.5 KB

Please note that I am using babylonjs/core: 7.50.0

Looking at the error stack trace, it seems the issue happens specifically in the ConstructFeature internal method of BabylonJS. The error occurs when trying to access property ‘1’ of an undefined value.

Here’s the relevant part of my implementation:

private enableARFeatures(featureManager: WebXRFeaturesManager): void {
    if (!this.xrExperienceHelper) {
      console.error(
        "ARExperience : enableARFeatures : No WebXRExperienceHelper found!"
      );
      return;
    }
    // Enable WebXR DOM Overlay
    featureManager.enableFeature(
      WebXRFeatureName.DOM_OVERLAY,
      1,
      {
        element: `#` + `${this.domOverlayID}`,
      },
      undefined,
      false
    ) as WebXRDomOverlay;

    // Enable Hit test
    this.xrHitTest = featureManager.enableFeature(
      WebXRFeatureName.HIT_TEST,
      "latest"
    ) as WebXRHitTest;
  }

Entering XR :

await this.xrExperienceHelper
      .enterXRAsync("immersive-ar", "unbounded" /*, optionalRenderTarget */)
      .then(() => {
        console.info(
          "GL : ARExperience : initializeAR : AR Permission Granted"
        );
        this.callback?.(ARState.AR_PERMISSION_GRANTED);
      })
      .catch((error) => {
        console.error("GL : ARExperience : initializeAR : catch : ", error);
        if (error?.message?.toLocaleLowerCase().includes("not supported")) {
          this.callback?.(ARState.NOT_SUPPORTED);
        } else {
          this.callback?.(ARState.AR_PERMISSION_NOT_GRANTED);
        }
      });

Tagging the expert @RaananW

1 Like
2

It sounds like the issue might be related to how the WebXR features are initialized in production. Since the error points to ConstructFeature trying to access an undefined property, I’d suggest checking if the featureManager.enableFeature calls are actually returning valid instances in production. You could add some console logs to verify.

Also, are you sure this.domOverlayID is correctly set and available when enabling the DOM overlay feature? Sometimes, missing or incorrect IDs could cause issues. Another thing to check is whether all necessary WebXR permissions and secure contexts (HTTPS) are correctly configured in production.

1 Like
3

Are you importing somewhere the feature you are trying to construct?
I think I understand the issue, and it is interesting we haven’t encountered it yet. You are enabling a feature, using the WebXRFeatureName object, which doesn’t have a reference to the actual feature (for the sake of tree-shaking). Can you try (just for the sake of seeing i that is the issue) to use:

WebXRDomOverlay.Name

And see if it fails on the xrHitTest next?

2 Likes
5

Thank you so much, @RaananW! Your solution worked perfectly.

I changed the code to use WebXRDomOverlay.Name instead of the WebXRFeatureName enum value, and the AR experience now works correctly in the production environment.

Interestingly, the hit test feature continued to work fine with WebXRFeatureName, but I’ve updated it to use WebXRHitTest.Name as well for consistency and to prevent potential issues in the future.

This was a great lesson in how tree-shaking affects production builds.

I also want to thank @evierosie for her earlier suggestions. Those troubleshooting steps were helpful in narrowing down the issue.

Thanks again for your quick and helpful responses!

1 Like