Utility meshes to utility layers

dist/preview release/what's new.md

@@ -208,6 +208,7 @@
 - Full support for the online motion controller repository ([#7323](https://github.com/BabylonJS/Babylon.js/issues/7323)) ([RaananW](https://github.com/RaananW/))
 - New feature - XR Controller physics impostor for motion controllers ([RaananW](https://github.com/RaananW/))
 - Teleportation between different ground levels in WebXR is enabled ([RaananW](https://github.com/RaananW/))
+- Utility Meshes for XR (teleportation ring, selection rays) can now be rendered using a utility layer ([#7563](https://github.com/BabylonJS/Babylon.js/issues/7563)) ([RaananW](https://github.com/RaananW/))
 
 ### Ray
 

src/XR/features/WebXRControllerPointerSelection.ts

@@ -16,6 +16,7 @@ import { TorusBuilder } from '../../Meshes/Builders/torusBuilder';
 import { Ray } from '../../Culling/ray';
 import { PickingInfo } from '../../Collisions/pickingInfo';
 import { WebXRAbstractFeature } from './WebXRAbstractFeature';
+import { UtilityLayerRenderer } from '../../Rendering';
 
 /**
  * Options interface for the pointer selection module
@@ -55,6 +56,16 @@ export interface IWebXRControllerPointerSelectionOptions {
      * Defaults to 1.
      */
     gazeModePointerMovedFactor?: number;
+
+    /**
+     * Should meshes created here be added to a utility layer or the main scene
+     */
+    useUtilityLayer?: boolean;
+
+    /**
+     * if provided, this scene will be used to render meshes.
+     */
+    customUtilityLayerScene?: Scene;
 }
 
 /**
@@ -283,12 +294,13 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
         const controllerData = this._controllers[xrController.uniqueId];
         // attached when touched, detaches when raised
         const timeToSelect = this._options.timeToSelect || 3000;
+        const sceneToRenderTo = this._options.useUtilityLayer ? (this._options.customUtilityLayerScene || UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene) : this._scene;
         let oldPick = new PickingInfo();
         let discMesh = TorusBuilder.CreateTorus("selection", {
             diameter: 0.0035 * 15,
             thickness: 0.0025 * 6,
             tessellation: 20
-        }, this._scene);
+        }, sceneToRenderTo);
         discMesh.isVisible = false;
         discMesh.isPickable = false;
         discMesh.parent = controllerData.selectionMesh;
@@ -422,15 +434,16 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
     }
 
     private _generateNewMeshPair(xrController: WebXRInputSource) {
+        const sceneToRenderTo = this._options.useUtilityLayer ? (this._options.customUtilityLayerScene || UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene) : this._scene;
         const laserPointer = CylinderBuilder.CreateCylinder("laserPointer", {
             height: 1,
             diameterTop: 0.0002,
             diameterBottom: 0.004,
             tessellation: 20,
             subdivisions: 1
-        }, this._scene);
+        }, sceneToRenderTo);
         laserPointer.parent = xrController.pointer;
-        let laserPointerMaterial = new StandardMaterial("laserPointerMat", this._scene);
+        let laserPointerMaterial = new StandardMaterial("laserPointerMat", sceneToRenderTo);
         laserPointerMaterial.emissiveColor = this.lasterPointerDefaultColor;
         laserPointerMaterial.alpha = 0.7;
         laserPointer.material = laserPointerMaterial;
@@ -443,11 +456,11 @@ export class WebXRControllerPointerSelection extends WebXRAbstractFeature {
             diameter: 0.0035 * 3,
             thickness: 0.0025 * 3,
             tessellation: 20
-        }, this._scene);
+        }, sceneToRenderTo);
         selectionMesh.bakeCurrentTransformIntoVertices();
         selectionMesh.isPickable = false;
         selectionMesh.isVisible = false;
-        let targetMat = new StandardMaterial("targetMat", this._scene);
+        let targetMat = new StandardMaterial("targetMat", sceneToRenderTo);
         targetMat.specularColor = Color3.Black();
         targetMat.emissiveColor = this.selectionMeshDefaultColor;
         targetMat.backFaceCulling = false;

src/XR/features/WebXRControllerTeleportation.ts

@@ -22,6 +22,8 @@ import { Curve3 } from '../../Maths/math.path';
 import { LinesBuilder } from '../../Meshes/Builders/linesBuilder';
 import { WebXRAbstractFeature } from './WebXRAbstractFeature';
 import { Color3 } from '../../Maths/math.color';
+import { Scene } from '../../scene';
+import { UtilityLayerRenderer } from '../../Rendering/utilityLayerRenderer';
 
 /**
  * The options container for the teleportation module
@@ -81,6 +83,15 @@ export interface IWebXRTeleportationOptions {
      * If main component is used (no thumbstick), how long should the "long press" take before teleporting
      */
     timeToTeleport?: number;
+    /**
+     * Should meshes created here be added to a utility layer or the main scene
+     */
+    useUtilityLayer?: boolean;
+
+    /**
+     * if provided, this scene will be used to render meshes.
+     */
+    customUtilityLayerScene?: Scene;
 }
 
 /**
@@ -475,11 +486,11 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
     private createDefaultTargetMesh() {
         // set defaults
         this._options.defaultTargetMeshOptions = this._options.defaultTargetMeshOptions || {};
-        const scene = this._xrSessionManager.scene;
-        let teleportationTarget = GroundBuilder.CreateGround("teleportationTarget", { width: 2, height: 2, subdivisions: 2 }, scene);
+        const sceneToRenderTo = this._options.useUtilityLayer ? (this._options.customUtilityLayerScene || UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene) : this._xrSessionManager.scene;
+        let teleportationTarget = GroundBuilder.CreateGround("teleportationTarget", { width: 2, height: 2, subdivisions: 2 }, sceneToRenderTo);
         teleportationTarget.isPickable = false;
         let length = 512;
-        let dynamicTexture = new DynamicTexture("teleportationPlaneDynamicTexture", length, scene, true);
+        let dynamicTexture = new DynamicTexture("teleportationPlaneDynamicTexture", length, sceneToRenderTo, true);
         dynamicTexture.hasAlpha = true;
         let context = dynamicTexture.getContext();
         let centerX = length / 2;
@@ -494,14 +505,14 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
         context.stroke();
         context.closePath();
         dynamicTexture.update();
-        const teleportationCircleMaterial = new StandardMaterial("teleportationPlaneMaterial", scene);
+        const teleportationCircleMaterial = new StandardMaterial("teleportationPlaneMaterial", sceneToRenderTo);
         teleportationCircleMaterial.diffuseTexture = dynamicTexture;
         teleportationTarget.material = teleportationCircleMaterial;
         let torus = TorusBuilder.CreateTorus("torusTeleportation", {
             diameter: 0.75,
             thickness: 0.1,
             tessellation: 20
-        }, scene);
+        }, sceneToRenderTo);
         torus.isPickable = false;
         torus.parent = teleportationTarget;
         if (!this._options.defaultTargetMeshOptions.disableAnimation) {
@@ -525,10 +536,10 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
             animationInnerCircle.setEasingFunction(easingFunction);
             torus.animations = [];
             torus.animations.push(animationInnerCircle);
-            scene.beginAnimation(torus, 0, 60, true);
+            sceneToRenderTo.beginAnimation(torus, 0, 60, true);
         }
 
-        var cone = CylinderBuilder.CreateCylinder("cone", { diameterTop: 0, tessellation: 4 }, scene);
+        var cone = CylinderBuilder.CreateCylinder("cone", { diameterTop: 0, tessellation: 4 }, sceneToRenderTo);
         cone.isPickable = false;
         cone.scaling.set(0.5, 0.12, 0.2);
 
@@ -541,7 +552,7 @@ export class WebXRMotionControllerTeleportation extends WebXRAbstractFeature {
             torus.material = this._options.defaultTargetMeshOptions.torusArrowMaterial;
             cone.material = this._options.defaultTargetMeshOptions.torusArrowMaterial;
         } else {
-            const torusConeMaterial = new StandardMaterial("torusConsMat", scene);
+            const torusConeMaterial = new StandardMaterial("torusConsMat", sceneToRenderTo);
             torusConeMaterial.disableLighting = !!this._options.defaultTargetMeshOptions.disableLighting;
             if (torusConeMaterial.disableLighting) {
                 torusConeMaterial.emissiveColor = new Color3(0.3, 0.3, 1.0);