Needle Engine 3.46.0-beta.1

Files changed (12) hide show

src/engine-components/Animation.ts +32 -33
src/engine-components/ContactShadows.ts +38 -8
src/engine/engine_gizmos.ts +10 -1
src/engine/engine_three_utils.ts +28 -3
src/engine-components/GroundProjection.ts +11 -6
src/engine/xr/NeedleXRSession.ts +14 -9
src/engine-components/SpriteRenderer.ts +2 -2
src/engine-components/export/usdz/USDZExporter.ts +4 -3
src/engine-components/webxr/WebARSessionRoot.ts +25 -16
src/engine-components/webxr/WebXR.ts +39 -7
src/engine-components/webxr/WebXRPlaneTracking.ts +61 -32
src/engine-components/webxr/controllers/XRControllerModel.ts +2 -1

src/engine-components/Animation.ts CHANGED Viewed

@@ -180,10 +180,9 @@
     set actions(val: Array<AnimationAction>) {
         this._actions = val;
     }
-    private _actions: Array<AnimationAction> = [];
+    private _actions!: Array<AnimationAction>;
+    private _handles!: AnimationHandle[];
-    private _handles: AnimationHandle[] = [];
     /** @internal */
     awake() {
         if (debug) console.log("Animation Awake", this.name, this);
@@ -195,9 +194,9 @@
             this.clip = this._tempAnimationClipBeforeGameObjectExisted;
             this._tempAnimationClipBeforeGameObjectExisted = null;
         }
-        // console.log(...this.animations.map(m => m.name))
-        if (this.playAutomatically)
-            this.init();
+        // actions need to reset (e.g. if the animation component was duplicated this array must not contain previous content)
+        this.actions = [];
+        this._handles = [];
     }
     /** @internal */
     onEnable(): void {
@@ -238,22 +237,26 @@
     /** Is any animation playing? */
     get isPlaying() {
-        for (let i = 0; i < this.actions.length; i++) {
-            if (this.actions[i].isRunning())
-                return true;
+        if (this.actions) {
+            for (let i = 0; i < this.actions.length; i++) {
+                if (this.actions[i].isRunning())
+                    return true;
+            }
         }
         return false;
     }
     /** Stops all currently playing animations */
     stopAll(opts?: Pick<PlayOptions, "fadeDuration">): void {
-        for (const act of this.actions) {
-            if (opts?.fadeDuration) {
-                act.fadeOut(opts.fadeDuration);
+        if (this.actions) {
+            for (const act of this.actions) {
+                if (opts?.fadeDuration) {
+                    act.fadeOut(opts.fadeDuration);
+                }
+                else {
+                    act.stop();
+                }
             }
-            else {
-                act.stop();
-            }
         }
     }
@@ -325,7 +328,7 @@
         }
         act.paused = !unpause;
     }
     /**
      * Play an animation clip or an clip at the specified index.
      * @param clipOrNumber the animation clip, index or name to play. If undefined, the first animation in the animations array will be played
@@ -334,7 +337,7 @@
      */
     play(clipOrNumber: AnimationIdentifier = 0, options?: PlayOptions): Promise<AnimationAction> | void {
         if (debug) console.log("PLAY", clipOrNumber)
-        this.init();
+        this.ensureMixer();
         if (!this.mixer) {
             if (debug) console.warn("Missing mixer", this);
             return;
@@ -376,7 +379,7 @@
         var prev = this.actions.find(a => a === action);
         if (prev === action && prev.isRunning() && prev.time < prev.getClip().duration) {
             const handle = this.tryFindHandle(action);
-            if(prev.paused) {
+            if (prev.paused) {
                 prev.paused = false;
             }
             if (handle) return handle.waitForFinish();
@@ -444,22 +447,18 @@
     }
-    private _didInit = false;
-    private init() {
-        if (this._didInit) return;
-        this._didInit = true;
-        if (!this.gameObject) return;
-        this.actions = [];
-        // try getting the animation mixer from the assigned gameobject
-        const key = "animationMixer";
-        if (this.gameObject[key]) {
-            this.mixer = this.gameObject[key];
+    private ensureMixer() {
+        if (!this.mixer) {
+            // try getting the animation mixer from the assigned gameobject
+            const key = "animationMixer";
+            if (this.gameObject[key]) {
+                this.mixer = this.gameObject[key];
+            }
+            if (!this.mixer || !this.mixer.clipAction) {
+                this.mixer = new AnimationMixer(this.gameObject);
+                this.gameObject[key] = this.mixer;
+            }
         }
-        if (!this.mixer || !this.mixer.clipAction) {
-            this.mixer = new AnimationMixer(this.gameObject);
-            this.gameObject[key] = this.mixer;
-        }
         this.context.animations.registerAnimationMixer(this.mixer);
     }
 }

src/engine-components/ContactShadows.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { BackSide, CustomBlending, DoubleSide, FrontSide, Group, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MinEquation, Object3D, OrthographicCamera, PlaneGeometry, RenderItem, ShaderMaterial, Vector3, WebGLRenderTarget } from "three";
+import { BackSide, CustomBlending, DoubleSide, FrontSide, Group, Material, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshStandardMaterial, MinEquation, Object3D, OrthographicCamera, PlaneGeometry, RenderItem, ShaderMaterial, Vector3, WebGLRenderTarget } from "three";
 import { HorizontalBlurShader } from 'three/examples/jsm/shaders/HorizontalBlurShader.js';
 import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShader.js';
@@ -8,7 +8,7 @@
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { onStart } from "../engine/engine_lifecycle_api.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { getBoundingBox } from "../engine/engine_three_utils.js";
+import { getBoundingBox, getVisibleInCustomShadowRendering } from "../engine/engine_three_utils.js";
 import { IGameObject } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js"
 import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
@@ -141,6 +141,10 @@
         const min = box.min;
         const offset = Math.max(0.00001, (box.max.y - min.y) * .002);
         box.max.y += offset;
+        // This is for cases where GroundProjection with autoFit is used
+        // Since contact shadows can currently not ignore certain objects from rendering
+        // we need to make sure the GroundProjection is not exactly on the same level as ContactShadows
+        // We can't move GroundProjection down because of immersive-ar mesh/plane tracking where occlusion would otherwise hide GroundProjection
         this.shadowsRoot.position.set((min.x + box.max.x) / 2, min.y - offset, (min.z + box.max.z) / 2);
         this.shadowsRoot.scale.set(box.max.x - min.x, box.max.y - min.y, box.max.z - min.z);
         this.shadowsRoot.matrixWorldNeedsUpdate = true;
@@ -221,7 +225,9 @@
         this.shadowGroup.add(this.blurPlane);
         // max. ground distance is controlled via object scale
-        this.shadowCamera = new OrthographicCamera(-1 / 2, 1 / 2, 1 / 2, -1 / 2, 0, 1.0);
+        const near = 0;
+        const far = 1.0;
+        this.shadowCamera = new OrthographicCamera(-1 / 2, 1 / 2, 1 / 2, -1 / 2, near, far);
         this.shadowCamera.layers.enableAll();
         this.shadowCamera.rotation.x = Math.PI / 2; // get the camera to look up
         this.shadowGroup.add(this.shadowCamera);
@@ -329,16 +335,36 @@
         renderer.xr.enabled = false;
         const list = renderer.renderLists.get(scene, 0);
-        const prev = list.transparent;
-        list.transparent = [];
+        const prevTransparent = list.transparent;
+        empty_buffer.length = 0;
+        list.transparent = empty_buffer;
+        // we need to hide objects that don't render color or that are wireframes
+        objects_hidden.length = 0;
+        for (const entry of list.opaque) {
+            if (!entry.object.visible) continue;
+            const mat = entry.material as MeshStandardMaterial;
+            // Ignore objects that don't render color
+            const hide = entry.material.colorWrite == false || mat.wireframe === true || getVisibleInCustomShadowRendering(entry.object) === false;
+            if (hide) {
+                objects_hidden.push(entry.object);
+                entry.object["needle:visible"] = entry.object.visible;
+                entry.object.visible = false;
+            }
+        }
         // render to the render target to get the depths
         renderer.setRenderTarget(this.renderTarget);
         renderer.clear();
         renderer.render(scene, this.shadowCamera);
+        list.transparent = prevTransparent;
-        list.transparent = prev;
+        // reset previously hidden objects
+        for (const object of objects_hidden) {
+            if (object["needle:visible"] != undefined) {
+                object.visible = object["needle:visible"];
+            }
+        }
         // for the shearing idea
         // this.shadowCamera.projectionMatrix.copy(mat);
@@ -402,4 +428,8 @@
         renderer.setRenderTarget(currentRt);
     }
-}
+}
+const empty_buffer = [];
+const objects_hidden = new Array<Object3D>();

src/engine/engine_gizmos.ts CHANGED Viewed

@@ -195,6 +195,13 @@
         mesh.material["depthTest"] = options.depthTest ?? true;
         mesh.material["wireframe"] = true;
     }
+    /** Set visibility of all currently rendered gizmos */
+    static setVisible(visible: boolean) {
+        for (const obj of Internal.timedObjectsBuffer) {
+            obj.visible = visible;
+        }
+    }
 }
 const box: BoxGeometry = new BoxGeometry(1, 1, 1);
@@ -379,6 +386,8 @@
         object.renderOrder = 999999;
         object[$cacheSymbol] = cache;
+        object.castShadow = false;
+        object.receiveShadow = false;
         object["isGizmo"] = true;
         this.timedObjectsBuffer.push(object);
@@ -393,7 +402,7 @@
     }
-    private static readonly timedObjectsBuffer = new Array<Object3D>();
+    public static readonly timedObjectsBuffer = new Array<Object3D>();
     private static readonly timesBuffer = new Array<number>();
     private static readonly contextPostRenderCallbacks = new Map<Context, () => void>();
     private static readonly contextBeforeRenderCallbacks = new Map<Context, () => void>();

src/engine/engine_three_utils.ts CHANGED Viewed

@@ -497,13 +497,33 @@
     return type === "Mesh" || type === "SkinnedMesh";
 }
+// for contact shadows
+export function setVisibleInCustomShadowRendering(obj: Object3D, enabled: boolean) {
+    if (enabled)
+        obj["needle:rendercustomshadow"] = true;
+    else {
+        obj["needle:rendercustomshadow"] = false;
+    }
+}
+export function getVisibleInCustomShadowRendering(obj: Object3D): boolean {
+    if (obj) {
+        if (obj["needle:rendercustomshadow"] === true) {
+            return true;
+        }
+        else if(obj["needle:rendercustomshadow"] == undefined) {
+            return true;
+        }
+    }
+    return false;
+}
 /**
  * Get the bounding box of a list of objects
  * @param objects the objects to get the bounding box from
  * @param ignore objects to ignore when calculating the bounding box
  * @param output an optional output object to store the result in
  */
-export function getBoundingBox(objects: Object3D[], ignore: Object3D[] = []): Box3 {
+export function getBoundingBox(objects: Object3D[], ignore: ((obj: Object3D) => void | boolean) | Array<Object3D | null | undefined> | undefined = undefined): Box3 {
     const box = new Box3();
     box.makeEmpty();
@@ -526,8 +546,13 @@
         if (!(isMesh(obj))) {
             allowExpanding = false;
         }
-        // Ignore things parented to the camera + ignore the camera
-        if (ignore?.includes(obj)) return;
+        if (allowExpanding) {
+            // Ignore things parented to the camera + ignore the camera
+            if (ignore && Array.isArray(ignore) && ignore?.includes(obj)) return;
+            else if (typeof ignore === "function") {
+                if (ignore(obj) === true) return;
+            }
+        }
         // We don't want to fit UI objects
         if (obj["isUI"] === true) return;
         // If we encountered some geometry that should be ignored

src/engine-components/GroundProjection.ts CHANGED Viewed

@@ -2,11 +2,9 @@
 import { GroundedSkybox as GroundProjection } from 'three/examples/jsm/objects/GroundedSkybox.js';
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { getBoundingBox, getWorldPosition, Graphics, setWorldPosition } from "../engine/engine_three_utils.js";
-import { getParam, Watch as Watch } from "../engine/engine_utils.js";
+import { getBoundingBox, getWorldPosition, Graphics, setVisibleInCustomShadowRendering,setWorldPosition } from "../engine/engine_three_utils.js";
+import { delayForFrames, getParam, Watch as Watch } from "../engine/engine_utils.js";
 import { Behaviour } from "./Component.js";
-import { buildMatrix } from "./export/usdz/ThreeUSDZExporter.js";
-import { LUTOperation } from "postprocessing";
 const debug = getParam("debuggroundprojection");
@@ -100,11 +98,14 @@
     }
     /** @internal */
     onEnterXR(): void {
+        if(!this.activeAndEnabled) return;
         this._needsTextureUpdate = true;
         this.updateProjection();
     }
     /** @internal */
-    onLeaveXR(): void {
+    async onLeaveXR() {
+        if(!this.activeAndEnabled) return;
+        await delayForFrames(1);
         this.updateProjection();
     }
     /** @internal */
@@ -144,13 +145,15 @@
                 return;
             }
         }
-        const offset = .01;
+        // offset here must be zero (and not .01) because the plane occlusion (when mesh tracking is active) is otherwise not correct
+        const offset = 0;
         if (!this._projection || this.context.scene.environment !== this._lastEnvironment || this._height !== this._lastHeight || this._radius !== this._lastRadius) {
             if (debug)
                 console.log("Create/Update Ground Projection", this.context.scene.environment.name);
             this._projection?.removeFromParent();
             this._projection = new GroundProjection(this.context.scene.environment, this._height, this.radius, 64);
             this._projection.position.y = this._height - offset;
+            setVisibleInCustomShadowRendering(this._projection, false);
         }
         this._lastEnvironment = this.context.scene.environment;
@@ -231,6 +234,8 @@
         // Update the texture
         this._projection.material.map = Graphics.copyTexture(this.context.scene.environment, this._blurrynessShader);
+        this._projection.material.depthTest = true;
+        this._projection.material.depthWrite = false;
     }
 }

src/engine/xr/NeedleXRSession.ts CHANGED Viewed

@@ -852,15 +852,17 @@
         // handle controller and input source changes changes
         this.session.addEventListener('end', this.onEnd);
         // handle input sources change
-        this.session.addEventListener("inputsourceschange", (evt: XRInputSourcesChangeEvent) => {
-            // handle removed controllers
-            for (const removedInputSource of evt.removed) {
-                this.disconnectInputSource(removedInputSource);
-            }
-            for (const newInputSource of evt.added) {
-                this.onInputSourceAdded(newInputSource);
-            }
-        });
+        this.session.addEventListener("inputsourceschange",
+            /* @ts-ignore (ignore CI XRInputSourceChangeEvent mismatch) */
+            (evt: XRInputSourcesChangeEvent) => {
+                // handle removed controllers
+                for (const removedInputSource of evt.removed) {
+                    this.disconnectInputSource(removedInputSource);
+                }
+                for (const newInputSource of evt.added) {
+                    this.onInputSourceAdded(newInputSource);
+                }
+            });
         // Unfortunately the code below doesnt work: the session never receives any input sources sometimes
         // https://developer.mozilla.org/en-US/docs/Web/API/XRSession/visibilitychange_event
@@ -1262,11 +1264,14 @@
             if (renderer.xr.isPresenting && this.context.mainCamera) {
                 const wasXr = renderer.xr.enabled;
                 const previousRenderTarget = renderer.getRenderTarget();
+                const previousBackground = this.context.scene.background;
                 renderer.xr.enabled = false;
                 renderer.setRenderTarget(null);
+                if(this.isPassThrough) this.context.scene.background = null;
                 renderer.render(this.context.scene, this.context.mainCamera);
                 renderer.xr.enabled = wasXr;
                 renderer.setRenderTarget(previousRenderTarget);
+                this.context.scene.background = previousBackground;
             }
         }
     }

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -267,8 +267,8 @@
     /**
      * Update the sprite. Modified properties will be applied to the sprite mesh. This method is called automatically when the sprite is changed.
      */
-    updateSprite() {
-        if (!this.__didAwake) return;
+    updateSprite(force: boolean = false) {
+        if (!this.__didAwake && !force) return;
         if (!this.sprite?.spriteSheet?.sprites) return;
         const sprite = this.sprite.spriteSheet.sprites[this.spriteIndex];
         if (!sprite) {

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -299,8 +299,9 @@
         // force Sprites to be created
         const sprites = GameObject.getComponentsInChildren(objectToExport, SpriteRenderer);
         for (const sprite of sprites) {
-            if (sprite && sprite.enabled && sprite.start)
-                sprite.start();
+            if (sprite && sprite.enabled) {
+                sprite.updateSprite(true); // force create
+            }
         }
         // trigger progressive textures to be loaded:
@@ -590,7 +591,7 @@
         if (!sessionRoot) {
             const xr = GameObject.findObjectOfType(WebXR);
-            if (xr) arScale = xr.arSceneScale;
+            if (xr) arScale = xr.arScale;
         }
         else {
             arScale = sessionRoot.arScale;

src/engine-components/webxr/WebARSessionRoot.ts CHANGED Viewed

@@ -4,8 +4,10 @@
 import { AssetReference } from "../../engine/engine_addressables.js";
 import { Context } from "../../engine/engine_context.js";
 import { destroy, instantiate } from "../../engine/engine_gameobject.js";
+import { Gizmos } from "../../engine/engine_gizmos.js";
 import { InputEventQueue, NEPointerEvent } from "../../engine/engine_input.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { getBoundingBox } from "../../engine/engine_three_utils.js";
 import type { IComponent, IGameObject } from "../../engine/engine_types.js";
 import { getParam, isAndroidDevice } from "../../engine/engine_utils.js";
 import { NeedleXRController, type NeedleXREventArgs, type NeedleXRHitTestResult, NeedleXRSession } from "../../engine/engine_xr.js";
@@ -51,7 +53,6 @@
      * Note: a large value makes the scene appear smaller
      * @default 1
      */
-    @serializable()
     get arScale(): number {
         return this._arScale;
     }
@@ -63,36 +64,35 @@
     private _arScale: number = 1;
     /** When enabled the placed scene forward direction will towards the XRRig
+     * @deprecated
      * @default false
     */
-    @serializable()
     invertForward: boolean = false;
     /** When assigned this asset will be loaded and visualize the placement while in AR
      * @default null
      */
-    @serializable(AssetReference)
     customReticle?: AssetReference;
-    /** When enabled we will create a XR anchor for the scene placement
-     * and make sure the scene is at that anchored point during a XR session
-     * @default false
-     **/
-    @serializable()
-    useXRAnchor: boolean = false;
-    /** Preview feature: enable touch transform
-     * @default false
+    /** Enable touch transform to translate, rotate and scale the scene in AR with multitouch
+     * @default true
      */
-    @serializable()
-    arTouchTransform: boolean = false;
+    arTouchTransform: boolean = true;
     /** When enabled the scene will be placed automatically when a point in the real world is found
      * @default false
      */
-    @serializable()
     autoPlace: boolean = false;
+    /** When enabled the scene center will be automatically calculated from the content in the scene */
+    autoCenter: boolean = false;
+    /** Experimental: When enabled we will create a XR anchor for the scene placement
+     * and make sure the scene is at that anchored point during a XR session
+     * @default false
+     **/
+    useXRAnchor: boolean = false;
     /** true if we're currently placing the scene */
     private _isPlacing = true;
@@ -156,6 +156,15 @@
         }
         this.context.scene.add(rootObject);
+        if (this.autoCenter) {
+            const bounds = getBoundingBox(this._placementScene.children);
+            const center = bounds.getCenter(new Vector3());
+            const size = bounds.getSize(new Vector3());
+            const matrix = new Matrix4();
+            matrix.makeTranslation(center.x, center.y - size.y * .5, center.z);
+            this._startOffset.multiply(matrix);
+        }
         // reparent components
         // save which gameobject the sessionroot component was previously attached to
         this._reparentedComponents.length = 0;
@@ -278,7 +287,7 @@
             else {
                 reticle = new Mesh(
                     new RingGeometry(0.07, 0.09, 32).rotateX(- Math.PI / 2),
-                    new MeshBasicMaterial({ side: DoubleSide, depthTest: false, depthWrite: false, transparent: true, opacity: 1, color: 0xffffff })
+                    new MeshBasicMaterial({ side: DoubleSide, depthTest: false, depthWrite: false, transparent: true, opacity: 1, color: 0xeeeeee })
                 ) as any as IGameObject;
                 reticle.name = "AR Placement Reticle";
             }

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import { AssetReference } from "../../engine/engine_addressables.js";
 import { findObjectOfType } from "../../engine/engine_components.js";
 import { serializable } from "../../engine/engine_serialization.js";
-import { getParam, isDesktop, isiOS, isMobileDevice, isQuest, isSafari } from "../../engine/engine_utils.js";
+import { delayForFrames, getParam, isDesktop, isiOS, isMobileDevice, isQuest, isSafari } from "../../engine/engine_utils.js";
 import { type NeedleXREventArgs, NeedleXRSession } from "../../engine/engine_xr.js";
 import { ButtonsFactory } from "../../engine/webcomponents/buttons.js";
 import { getIconElement } from "../../engine/webcomponents/icons.js";
@@ -58,15 +58,26 @@
     /** When enabled the scene must be placed in AR */
     @serializable()
     usePlacementReticle: boolean = true;
+    /** When assigned this object will be used as the AR placement reticle */
+    @serializable(AssetReference)
+    customARPlacementReticle?: AssetReference;
     /** When enabled you can position, rotate or scale your AR scene with one or two fingers */
     @serializable()
     usePlacementAdjustment: boolean = true;
-    /** Used when `usePlacementReticle` is enabled */
+    /** Used when `usePlacementReticle` is enabled. This is the scale of the user in the scene in AR. Larger values make the 3D content appear smaller */
     @serializable()
-    arSceneScale: number = 1;
+    arScale: number = 1;
     /** Experimental: When enabled an XRAnchor will be created for the AR scene and the position will be updated to the anchor position every few frames */
     @serializable()
     useXRAnchor: boolean = false;
+    /**
+     * When enabled the scene will be placed automatically when a point in the real world is found
+     */
+    @serializable()
+    autoPlace: boolean = true;
+    /** When enabled the AR session root center will be automatically adjusted to place the center of the scene */
+    @serializable()
+    autoCenter: boolean = true;
     /** When enabled a USDZExporter component will be added to the scene (if none is found) */
     @serializable()
@@ -90,6 +101,8 @@
     private _usdzExporter?: USDZExporter;
+    static activeWebXRComponent: WebXR | null = null;
     awake() {
         NeedleXRSession.getXRSync(this.context);
     }
@@ -176,7 +189,17 @@
     private _previousXRState: number = 0;
+    private get isActiveWebXR() {
+        return !WebXR.activeWebXRComponent || WebXR.activeWebXRComponent === this;
+    }
     onBeforeXR(_mode: XRSessionMode, args: XRSessionInit): void {
+        if (!this.isActiveWebXR) {
+            console.warn(`WebXR: another WebXR component is already active (${WebXR.activeWebXRComponent?.name}). This is ignored: ${this.name}`);
+            return;
+        }
+        WebXR.activeWebXRComponent = this;
         if (_mode == "immersive-ar" && this.useDepthSensing) {
             args.optionalFeatures = args.optionalFeatures || [];
             args.optionalFeatures.push("depth-sensing");
@@ -184,6 +207,8 @@
     }
     async onEnterXR(args: NeedleXREventArgs) {
+        if (!this.isActiveWebXR) return;
         if (debug) console.log("WebXR onEnterXR")
         // set XR flags
         this._previousXRState = XRState.Global.Mask;
@@ -200,11 +225,14 @@
                 this.context.scene.add(implicitSessionRoot);
                 sessionroot = GameObject.addComponent(implicitSessionRoot, WebARSessionRoot)!;
                 this._createdComponentsInSession.push(sessionroot);
-                sessionroot.arScale = this.arSceneScale;
-                sessionroot.arTouchTransform = this.usePlacementAdjustment;
-                sessionroot.useXRAnchor = this.useXRAnchor;
             }
-            else if (debug) console.log("WebXR: WebARSessionRoot already exists, not creating a new one")
+            sessionroot.customReticle = this.customARPlacementReticle;
+            sessionroot.arScale = this.arScale;
+            sessionroot.arTouchTransform = this.usePlacementAdjustment;
+            sessionroot.autoPlace = this.autoPlace;
+            sessionroot.autoCenter = this.autoCenter;
+            sessionroot.useXRAnchor = this.useXRAnchor;
         }
         // handle VR controls
@@ -225,6 +253,8 @@
     }
     onLeaveXR(_: NeedleXREventArgs): void {
+        if (!this.isActiveWebXR) return;
         // revert XR flags
         XRState.Global.Set(this._previousXRState);
@@ -236,6 +266,8 @@
         this._createdComponentsInSession.length = 0;
         this.handleOfferSession();
+        delayForFrames(1).then(() => WebXR.activeWebXRComponent = null);
     }

src/engine-components/webxr/WebXRPlaneTracking.ts CHANGED Viewed

@@ -6,6 +6,7 @@
 import { destroy } from "../../engine/engine_gameobject.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
 import { serializable } from "../../engine/engine_serialization.js";
+import { setVisibleInCustomShadowRendering } from "../../engine/engine_three_utils.js";
 import type { Vec3 } from "../../engine/engine_types.js";
 import { getParam } from "../../engine/engine_utils.js";
 import type { NeedleXREventArgs, NeedleXRSession } from "../../engine/engine_xr.js";
@@ -62,6 +63,7 @@
      * If true an occluder material will be applied to the tracked planes/meshes.
      * Note: this will only be applied if dataTemplate is not assigned
      */
+    @serializable()
     occluder = true;
     /**
@@ -113,6 +115,15 @@
         }
     }
+    onLeaveXR(_args: NeedleXREventArgs): void {
+        for (const data of this._allPlanes.keys()) {
+            this.removeData(data, this._allPlanes);
+        }
+        for (const data of this._allMeshes.keys()) {
+            this.removeData(data, this._allMeshes);
+        }
+    }
     /** @internal */
     onUpdateXR(args: NeedleXREventArgs): void {
@@ -193,14 +204,17 @@
         if (!dataContext) return;
         _all.delete(data);
         if (debug) console.log("Plane no longer tracked, id=" + dataContext.id);
-        if (dataContext.mesh && dataContext.mesh.parent) {
-            dataContext.mesh.parent.remove(dataContext.mesh);
+        if (dataContext.mesh) {
+            dataContext.mesh.removeFromParent();
             dataContext.mesh.traverse(x => {
                 const nc = x.userData["normalsHelper"];
                 if (nc) {
-                    this.context.scene.remove(nc);
                     nc.dispose();
+                    nc.removeFromParent();
                 }
+                else if(debug) {
+                    console.warn("No normals helper found for mesh", dataContext.mesh);
+                }
             });
             destroy(dataContext.mesh, true, true);
         }
@@ -219,9 +233,31 @@
     private readonly _allMeshes = new Map<XRMesh, XRPlaneContext>();
     private firstTimeNoPlanesDetected = -100;
+    private makeOccluder = (mesh: Mesh, m: Material | Array<Material>, force: boolean = false) => {
+        if (!m) return;
+        if (m instanceof Array) {
+            for (const m0 of m)
+                this.makeOccluder(mesh, m0, force);
+            return;
+        }
+        if (!force && !m.name.toLowerCase().includes("occlu")) return;
+        m.colorWrite = false;
+        m.depthTest = true;
+        m.depthWrite = true;
+        m.transparent = false;
+        m.polygonOffset = true;
+        // positive values are below
+        m.polygonOffsetFactor = 1;
+        m.polygonOffsetUnits = .1;
+        mesh.renderOrder = -1000;
+    }
     private processFrameData(_xr: NeedleXRSession, rig: Object3D, frame: XRFramePlanes, detected: Set<XRPlane | XRMesh>, _all: Map<XRPlane | XRMesh, XRPlaneContext>) {
         const renderer = this.context.renderer;
         const referenceSpace = renderer.xr.getReferenceSpace();
         if (!referenceSpace) return;
         for (const data of _all.keys()) {
@@ -238,24 +274,6 @@
             const planePose = frame.getPose(space, referenceSpace);
             let planeMesh: Object3D | undefined;
-            const makeBlockerMaterials = (m: Material | Array<Material>) => {
-                if (!m) return;
-                if (m instanceof Array) {
-                    for (const m0 of m)
-                        makeBlockerMaterials(m0);
-                    return;
-                }
-                if (!m.name.includes("Occlu")) return;
-                m.colorWrite = false;
-                m.depthWrite = true;
-                m.transparent = false;
-                m.polygonOffset = true;
-                m.polygonOffsetFactor = 1;
-                m.polygonOffsetUnits = 0.1;
-                m["_renderOrder"] = -1000;
-            }
             // If the plane already existed just update it
             if (_all.has(data)) {
                 const planeContext = _all.get(data)!;
@@ -271,14 +289,14 @@
                         if (planeContext.mesh instanceof Mesh) {
                             planeContext.mesh.geometry.dispose();
                             planeContext.mesh.geometry = geometry;
-                            makeBlockerMaterials(planeContext.mesh.material);
+                            this.makeOccluder(planeContext.mesh, planeContext.mesh.material);
                         }
                         else if (planeContext.mesh instanceof Group) {
                             for (const ch of planeContext.mesh.children) {
                                 if (ch instanceof Mesh) {
                                     ch.geometry.dispose();
                                     ch.geometry = geometry;
-                                    makeBlockerMaterials(ch.material);
+                                    this.makeOccluder(ch, ch.material);
                                 }
                             }
                         }
@@ -317,13 +335,13 @@
             }
             // Otherwise we create a new plane instance
             else {
                 // if we don't have any template assigned we just use a simple mesh object
                 if (!this.dataTemplate) {
                     const mesh = new Mesh();
                     if (debug) mesh.material = new MeshNormalMaterial();
                     else if (this.occluder) {
-                        mesh.material = new MeshBasicMaterial({ colorWrite: false, depthWrite: true, side: FrontSide, transparent: false });
+                        mesh.material = new MeshBasicMaterial();
+                        this.makeOccluder(mesh, mesh.material, true);
                     }
                     else {
                         mesh.material = new MeshBasicMaterial({ wireframe: true, opacity: .5, transparent: true, color: 0x333333 });
@@ -337,19 +355,21 @@
                 else {
                     // Create instance
                     const newPlane = GameObject.instantiate(this.dataTemplate.asset) as GameObject;
+                    newPlane.name = "xr-tracked-plane";
                     planeMesh = newPlane;
+                    setVisibleInCustomShadowRendering(newPlane, false);
                     if (newPlane instanceof Mesh) {
                         disposeObjectResources(newPlane.geometry);
                         newPlane.geometry = this.createGeometry(data);
-                        makeBlockerMaterials(newPlane.material);
+                        this.makeOccluder(newPlane, newPlane.material, this.occluder);
                     }
                     else if (newPlane instanceof Group) {
                         for (const ch of newPlane.children) {
                             if (ch instanceof Mesh) {
                                 disposeObjectResources(ch.geometry);
                                 ch.geometry = this.createGeometry(data);
-                                makeBlockerMaterials(ch.material);
+                                this.makeOccluder(ch, ch.material, this.occluder);
                             }
                         }
                     }
@@ -368,6 +388,9 @@
                     // newPlane.getComponent(MeshCollider)!.sharedMesh = newPlane as unknown as Mesh;
                     newPlane.matrixAutoUpdate = false;
                     newPlane.matrixWorldNeedsUpdate = true; // force update of rendering settings and so on
+                    // TODO: in VR this has issues when the rig is moved
+                    // newPlane.matrixWorld.multiply(rig.matrix.invert());
+                    // this.context.scene.add(newPlane);
                     rig.add(newPlane);
                     const planeContext: XRPlaneContext = {
@@ -410,11 +433,17 @@
                 if (debug) {
                     planeMesh.traverse(x => {
                         if (!(x instanceof Mesh)) return;
-                        const normalsHelper = new VertexNormalsHelper(x, 0.05, 0x0000ff);
-                        normalsHelper.layers.disableAll();
-                        normalsHelper.layers.set(2);
-                        this.context.scene.add(normalsHelper);
-                        x.userData["normalsHelper"] = normalsHelper;
+                        if(x.userData["normalsHelper"]){
+                            const helper = x.userData["normalsHelper"] as VertexNormalsHelper;
+                            helper.update();
+                        }
+                        else {
+                            const normalsHelper = new VertexNormalsHelper(x, 0.05, 0x0000ff);
+                            normalsHelper.layers.disableAll();
+                            normalsHelper.layers.set(2);
+                            this.context.scene.add(normalsHelper);
+                            x.userData["normalsHelper"] = normalsHelper;
+                        }
                     });
                 }
             }

src/engine-components/webxr/controllers/XRControllerModel.ts CHANGED Viewed

@@ -14,8 +14,8 @@
 import { NeedleXRController, type NeedleXRControllerEventArgs, type NeedleXREventArgs, NeedleXRSession } from "../../../engine/engine_xr.js";
 import { registerExtensions } from "../../../engine/extensions/extensions.js";
 import { NEEDLE_progressive } from "../../../engine/extensions/NEEDLE_progressive.js";
+import { flipForwardMatrix } from "../../../engine/xr/internal.js";
 import { Behaviour, GameObject } from "../../Component.js"
-import { flipForwardMatrix } from "../../../engine/xr/internal.js";
 const debug = getParam("debugwebxr");
@@ -337,6 +337,7 @@
                 mat.depthWrite = true;
                 mat.depthTest = true;
                 mat.colorWrite = false;
+                obj.receiveShadow = false;
                 obj.renderOrder = -100;
             }
         }