fix detach issue is selection and teleportation

Closing #7419

dist/preview release/what's new.md

@@ -289,6 +289,7 @@
 - Screenshot height and width is now forced to be integers to prevent mismatch with openGL context ([jekelija](https://github.com/jekelija))
 - Fix shadow bound calculation in CSM shadow technique ([Popov72](https://github.com/Popov72))
 - Disposing of the depthReducer used in CSM ([Popov72](https://github.com/Popov72))
+- Fixed an issue with teleportation detach and attach ([#7419](https://github.com/BabylonJS/Babylon.js/issues/7419)) ([RaananW](https://github.com/RaananW/))
 
 ## Breaking changes
 

src/Cameras/XR/features/WebXRControllerPointerSelection.ts

@@ -94,6 +94,8 @@ export class WebXRControllerPointerSelection implements IWebXRFeature {
     private static _idCounter = 0;
 
     private _observerTracked: Nullable<Observer<XRFrame>>;
+    private _observerControllerAdded: Nullable<Observer<WebXRController>>;
+    private _observerControllerRemoved: Nullable<Observer<WebXRController>>;
     private _attached: boolean = false;
     private _tmpRay = new Ray(new Vector3(), new Vector3());
 
@@ -201,6 +203,13 @@ export class WebXRControllerPointerSelection implements IWebXRFeature {
             this._detachController(controllerId);
         });
 
+        if (this._observerControllerAdded) {
+            this._options.xrInput.onControllerAddedObservable.remove(this._observerControllerAdded);
+        }
+        if (this._observerControllerRemoved) {
+            this._options.xrInput.onControllerRemovedObservable.remove(this._observerControllerRemoved);
+        }
+
         this._attached = false;
 
         return true;

src/Cameras/XR/features/WebXRControllerTeleportation.ts

@@ -123,6 +123,8 @@ export class WebXRMotionControllerTeleportation implements IWebXRFeature {
     public backwardsTeleportationDistance: number = 0.5;
 
     private _observerTracked: Nullable<Observer<XRFrame>>;
+    private _observerControllerAdded: Nullable<Observer<WebXRController>>;
+    private _observerControllerRemoved: Nullable<Observer<WebXRController>>;
 
     private _attached: boolean = false;
     /**
@@ -216,8 +218,8 @@ export class WebXRMotionControllerTeleportation implements IWebXRFeature {
     attach(): boolean {
 
         this._options.xrInput.controllers.forEach(this._attachController);
-        this._options.xrInput.onControllerAddedObservable.add(this._attachController);
-        this._options.xrInput.onControllerRemovedObservable.add((controller) => {
+        this._observerControllerAdded = this._options.xrInput.onControllerAddedObservable.add(this._attachController);
+        this._observerControllerRemoved = this._options.xrInput.onControllerRemovedObservable.add((controller) => {
             // REMOVE the controller
             this._detachController(controller.uniqueId);
         });
@@ -304,6 +306,13 @@ export class WebXRMotionControllerTeleportation implements IWebXRFeature {
             this._detachController(controllerId);
         });
 
+        if (this._observerControllerAdded) {
+            this._options.xrInput.onControllerAddedObservable.remove(this._observerControllerAdded);
+        }
+        if (this._observerControllerRemoved) {
+            this._options.xrInput.onControllerRemovedObservable.remove(this._observerControllerRemoved);
+        }
+
         return true;
     }
 

src/Cameras/XR/webXRFeaturesManager.ts

@@ -159,6 +159,7 @@ export class WebXRFeaturesManager implements IDisposable {
 
     /**
      * Enable a feature using its name and a version. This will enable it in the scene, and will be responsible to attach it when the session starts.
+     * If used twice, the old version will be disposed and a new one will be constructed. This way you can re-enable with different configuration.
      *
      * @param featureName the name of the feature to load or the class of the feature
      * @param version optional version to load. if not provided the latest version will be enabled
@@ -192,7 +193,6 @@ export class WebXRFeaturesManager implements IDisposable {
         /* If the feature is already enabled, detach and dispose it, and create a new one */
         if (feature) {
             this.disableFeature(name);
-            feature.featureImplementation.dispose();
         }
 
         this._features[name] = {
@@ -212,6 +212,7 @@ export class WebXRFeaturesManager implements IDisposable {
 
     /**
      * Used to disable an already-enabled feature
+     * The feature will be disposed and will be recreated once enabled.
      * @param featureName the feature to disable
      * @returns true if disable was successful
      */
@@ -221,6 +222,7 @@ export class WebXRFeaturesManager implements IDisposable {
         if (feature && feature.enabled) {
             feature.enabled = false;
             this.detachFeature(name);
+            feature.featureImplementation.dispose();
             return true;
         }
         return false;