WebXRFeatureName.IMAGE_TRACKING "required feature not compatible" With BabylonReactNative

[methot-ilya-3ds]

Clone of the following github issue:

I'm trying to implement the feature WebXRFeatureName.IMAGE_TRACKING using the example code from #9512

const options = {
  images: [
    {
      src: 'https://i.pinimg.com/originals/2c/2f/73/2c2f73a2b0a1dac2559a6a5e1a64ed43.jpg',
      estimatedRealWorldWidth: 0.3
    }
]};

...
const imgTracking = fm.enableFeature(WebXRFeatureName.IMAGE_TRACKING, 'latest', options);

But throws the following error:

webXRFeaturesManager.ts:310 Uncaught (in promise) Error: feature not found - IMAGE_TRACKING (latest)
    at WebXRFeaturesManager.enableFeature (webXRFeaturesManager.ts:310)
    at Object.onSceneReady (BabylonXR.js:29)

https://github.com/BabylonJS/Babylon.js/issues/9997

[brianzinn]

Looks like you need to mark it as optional - look at the last parameter required of enableFeature(...): https://github.com/BabylonJS/Babylon.js/blob/master/src/XR/webXRFeaturesManager.ts#L339

[methot-ilya-3ds]

@brianzinn The problem seems more related to the fact that WebXRFeatureName does not contain IMAGE_TRACKING.

I am not sure if the feature has been implemented in react-babylonjs or not.

[brianzinn]

Are you on @latest of @babylonjs/core?

[brianzinn]

Can you share more code?

[methot-ilya-3ds]

My current version is:

"@babylonjs/core": "^4.2.0",

Here is some additional code in case it helps:

import React from "react";
import {
  FreeCamera,
  Vector3,
  HemisphericLight,
  MeshBuilder,
  WebXRFeatureName,
  GroundBuilder,
  Quaternion,
  StandardMaterial,
  Color3

} from "@babylonjs/core";
import SceneComponent from "./SceneComponent"; // uses above component in same directory
// import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.

let box;

const onSceneReady = async (scene) => {
    const xr = await scene.createDefaultXRExperienceAsync({
        uiOptions: {
            sessionMode: 'immersive-ar'
        }
    });

    const fm = xr.baseExperience.featuresManager;

    // enable the feature
    const imageTracking = fm.enableFeature(WebXRFeatureName.IMAGE_TRACKING, 'latest', {
        images: [
            {
                src: 'https://URL/image1.jpg',
                estimatedRealWorldWidth: 0.3
            },
            {
                src: 'https://URL/image2.jpg',
                estimatedRealWorldWidth: 0.3
            }
        ]
    });

[brianzinn]

I’m pretty sure that is a v5 thing. I’ll check once I get to a computer

[brianzinn]

I've looked in the 4.2 NPM and there is no image tracking. Sorry for late reply. These are available in 4.2:

WebXRFeatureName.ANCHOR_SYSTEM = "xr-anchor-system";
WebXRFeatureName.BACKGROUND_REMOVER = "xr-background-remover";
WebXRFeatureName.HIT_TEST = "xr-hit-test";
WebXRFeatureName.PHYSICS_CONTROLLERS = "xr-physics-controller";
WebXRFeatureName.PLANE_DETECTION = "xr-plane-detection";
WebXRFeatureName.POINTER_SELECTION = "xr-controller-pointer-selection";
WebXRFeatureName.TELEPORTATION = "xr-controller-teleportation";
WebXRFeatureName.FEATURE_POINTS = "xr-feature-points";
WebXRFeatureName.HAND_TRACKING = "xr-hand-tracking";

You will need v5 - it's still in alpha, but is very stable - would recommend upgrading.