Merge pull request #7620 from RaananW/component-type-id

XR - Small changes and small fix

Playground/debug.html

@@ -6,6 +6,8 @@
         <meta charset='utf-8' />
         <meta name="viewport" content="width=device-width, user-scalable=no">
         <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+        <meta name="description" content="Babylon.js playground online debug">
+        <meta name="keywords" content="Babylon.js,WebGL,3D, debug">
 
         <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
         <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">

Playground/index-local.html

@@ -6,6 +6,8 @@
         <meta charset='utf-8' />
         <meta name="viewport" content="width=device-width, user-scalable=no">
         <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
 
         <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
         <link rel="stylesheet"

dist/preview release/what's new.md

@@ -198,7 +198,7 @@
 - New observable that triggers when a session was initialized ([RaananW](https://github.com/RaananW/))
 - WebXR teleportation can now be disabled after initialized or before created ([RaananW](https://github.com/RaananW/))
 - New Features Manager for WebXR features ([RaananW](https://github.com/RaananW/))
-- New features - Plane detection, Hit Test, Background remover ([RaananW](https://github.com/RaananW/))
+- New features - Plane detection, Hit test, Background remover ([RaananW](https://github.com/RaananW/))
 - XR Camera's API is Babylon-conform (position, rotationQuaternion, world matrix, direction etc') ([#7239](https://github.com/BabylonJS/Babylon.js/issues/7239)) ([RaananW](https://github.com/RaananW/))
 - XR Input now using standard profiles and completely separated from the gamepad class ([#7348](https://github.com/BabylonJS/Babylon.js/issues/7348)) ([RaananW](https://github.com/RaananW/))
 - Teleportation and controller selection are now WebXR features. ([#7290](https://github.com/BabylonJS/Babylon.js/issues/7290)) ([RaananW](https://github.com/RaananW/))

src/XR/features/WebXRControllerPointerSelection.ts

@@ -66,6 +66,11 @@ export interface IWebXRControllerPointerSelectionOptions {
      * if provided, this scene will be used to render meshes.
      */
     customUtilityLayerScene?: Scene;
+
+    /**
+     *  use this rendering group id for the meshes (optional)
+     */
+    renderingGroupId?: number;
 }
 
 /**
@@ -122,8 +127,6 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
 
     private static _idCounter = 0;
 
-    private _tmpRay = new Ray(new Vector3(), new Vector3());
-
     private _controllers: {
         [controllerUniqueId: string]: {
             xrController: WebXRInputSource;
@@ -132,8 +135,10 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
             onFrameObserver?: Nullable<Observer<XRFrame>>;
             laserPointer: AbstractMesh;
             selectionMesh: AbstractMesh;
+            meshUnderPointer: Nullable<AbstractMesh>;
             pick: Nullable<PickingInfo>;
             id: number;
+            tmpRay: Ray;
         };
     } = {};
 
@@ -205,13 +210,27 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         return null;
     }
 
+    /**
+     * Will get the mesh under a specific pointer.
+     * `scene.meshUnderPointer` will only return one mesh - either left or right.
+     * @param controllerId the controllerId to check
+     * @returns The mesh under pointer or null if no mesh is under the pointer
+     */
+    public getMeshUnderPointer(controllerId: string): Nullable<AbstractMesh> {
+        if (this._controllers[controllerId]) {
+            return this._controllers[controllerId].meshUnderPointer;
+        } else {
+            return null;
+        }
+    }
+
     protected _onXRFrame(_xrFrame: XRFrame) {
         Object.keys(this._controllers).forEach((id) => {
             const controllerData = this._controllers[id];
 
             // Every frame check collisions/input
-            controllerData.xrController.getWorldPointerRayToRef(this._tmpRay);
-            controllerData.pick = this._scene.pickWithRay(this._tmpRay);
+            controllerData.xrController.getWorldPointerRayToRef(controllerData.tmpRay);
+            controllerData.pick = this._scene.pickWithRay(controllerData.tmpRay);
 
             const pick = controllerData.pick;
 
@@ -226,7 +245,7 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
                 controllerData.selectionMesh.scaling.z = Math.sqrt(pick.distance);
 
                 // To avoid z-fighting
-                let pickNormal = this._convertNormalToDirectionOfRay(pick.getNormal(true), this._tmpRay);
+                let pickNormal = this._convertNormalToDirectionOfRay(pick.getNormal(true), controllerData.tmpRay);
                 let deltaFighting = 0.001;
                 controllerData.selectionMesh.position.copyFrom(pick.pickedPoint);
                 if (pickNormal) {
@@ -236,8 +255,10 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
                     controllerData.selectionMesh.position.addInPlace(pickNormal.scale(deltaFighting));
                 }
                 controllerData.selectionMesh.isVisible = true && this.displaySelectionMesh;
+                controllerData.meshUnderPointer = pick.pickedMesh;
             } else {
                 controllerData.selectionMesh.isVisible = false;
+                controllerData.meshUnderPointer = null;
             }
         });
     }
@@ -255,7 +276,9 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
             xrController,
             laserPointer,
             selectionMesh,
+            meshUnderPointer: null,
             pick: null,
+            tmpRay: new Ray(new Vector3(), new Vector3()),
             id: WebXRControllerPointerSelection._idCounter++
         };
         switch (xrController.inputSource.targetRayMode) {
@@ -346,6 +369,10 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
 
             oldPick = controllerData.pick;
         });
+
+        if (this._options.renderingGroupId !== undefined) {
+            discMesh.renderingGroupId = this._options.renderingGroupId;
+        }
         xrController.onDisposeObservable.addOnce(() => {
             if (controllerData.pick && !this._options.disablePointerUpOnTouchOut && downTriggered) {
                 this._scene.simulatePointerUp(controllerData.pick, { pointerId: controllerData.id });
@@ -466,6 +493,11 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         targetMat.backFaceCulling = false;
         selectionMesh.material = targetMat;
 
+        if (this._options.renderingGroupId !== undefined) {
+            laserPointer.renderingGroupId = this._options.renderingGroupId;
+            selectionMesh.renderingGroupId = this._options.renderingGroupId;
+        }
+
         return {
             laserPointer,
             selectionMesh

src/XR/features/WebXRControllerTeleportation.ts

@@ -92,6 +92,11 @@ export interface IWebXRTeleportationOptions {
      * if provided, this scene will be used to render meshes.
      */
     customUtilityLayerScene?: Scene;
+
+    /**
+     *  use this rendering group id for the meshes (optional)
+     */
+    renderingGroupId?: number;
 }
 
 /**
@@ -345,7 +350,7 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
         // motion controller support
         xrController.onMotionControllerInitObservable.addOnce(() => {
             if (xrController.motionController) {
-                const movementController = xrController.motionController.getComponentOfType(WebXRControllerComponent.THUMBSTICK) || xrController.motionController.getComponentOfType(WebXRControllerComponent.TOUCHPAD);
+                const movementController = xrController.motionController.getComponentOfType(WebXRControllerComponent.THUMBSTICK_TYPE) || xrController.motionController.getComponentOfType(WebXRControllerComponent.TOUCHPAD_TYPE);
                 if (!movementController || this._options.useMainComponentOnly) {
                     // use trigger to move on long press
                     const mainComponent = xrController.motionController.getMainComponent();
@@ -564,6 +569,12 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
             cone.material = torusConeMaterial;
         }
 
+        if (this._options.renderingGroupId !== undefined) {
+            teleportationTarget.renderingGroupId = this._options.renderingGroupId;
+            torus.renderingGroupId = this._options.renderingGroupId;
+            cone.renderingGroupId = this._options.renderingGroupId;
+        }
+
         this._options.teleportationTargetMesh = teleportationTarget;
     }
 

src/XR/motionController/webXRControllerComponent.ts

@@ -59,23 +59,23 @@ export class WebXRControllerComponent implements IDisposable {
     /**
      * Thumbstick component type
      */
-    public static THUMBSTICK: MotionControllerComponentType = "thumbstick";
+    public static THUMBSTICK_TYPE: MotionControllerComponentType = "thumbstick";
     /**
      * Touchpad component type
      */
-    public static TOUCHPAD: MotionControllerComponentType = "touchpad";
+    public static TOUCHPAD_TYPE: MotionControllerComponentType = "touchpad";
     /**
      * trigger component type
      */
-    public static TRIGGER: MotionControllerComponentType = "trigger";
+    public static TRIGGER_TYPE: MotionControllerComponentType = "trigger";
     /**
      * squeeze component type
      */
-    public static SQUEEZE: MotionControllerComponentType = "squeeze";
+    public static SQUEEZE_TYPE: MotionControllerComponentType = "squeeze";
     /**
      * button component type
      */
-    public static BUTTON: MotionControllerComponentType = "button";
+    public static BUTTON_TYPE: MotionControllerComponentType = "button";
     /**
      * Observers registered here will be triggered when the state of a button changes
      * State change is either pressed / touched / value

src/XR/motionController/webXRProfiledMotionController.ts

@@ -57,12 +57,12 @@ export class WebXRProfiledMotionController extends WebXRAbstractMotionController
                     };
                 } else {
                     // visibility, usually for touchpads
-                    const nameOfMesh = (componentInLayout.type === WebXRControllerComponent.TOUCHPAD && componentInLayout.touchPointNodeName)
+                    const nameOfMesh = (componentInLayout.type === WebXRControllerComponent.TOUCHPAD_TYPE && componentInLayout.touchPointNodeName)
                         ? componentInLayout.touchPointNodeName : visResponse.valueNodeName!;
                     this._buttonMeshMapping[type].states[visualResponseKey] = {
                         valueMesh: this._getChildByName(this.rootMesh!, nameOfMesh)
                     };
-                    if (componentInLayout.type === WebXRControllerComponent.TOUCHPAD && !this._touchDots[visualResponseKey]) {
+                    if (componentInLayout.type === WebXRControllerComponent.TOUCHPAD_TYPE && !this._touchDots[visualResponseKey]) {
                         const dot = SphereBuilder.CreateSphere(visualResponseKey + 'dot', {
                             diameter: 0.0015,
                             segments: 8