Needle Engine 3.37.11-alpha

Files changed (25) hide show

src/engine-components/export/usdz/extensions/Animation.ts +27 -4
src/engine-components/export/usdz/utils/animationutils.ts +14 -0
src/engine-components/export/usdz/extensions/behavior/AudioExtension.ts +10 -0
src/engine-components/ui/BaseUIComponent.ts +1 -1
src/engine-components/export/usdz/extensions/behavior/Behaviour.ts +39 -8
src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts +132 -93
src/engine-components/export/usdz/extensions/behavior/BehavioursBuilder.ts +19 -5
src/engine-components/ContactShadows.ts +47 -27
src/engine/debug/debug.ts +2 -2
src/engine/engine_components.ts +4 -3
src/engine/engine_context.ts +5 -1
src/engine/engine_element_loading.ts +8 -6
src/engine/engine_gltf_builtin_components.ts +3 -0
src/engine/engine_lifecycle_functions_internal.ts +9 -4
src/engine/engine_physics_rapier.ts +8 -10
src/engine/engine_utils_screenshot.ts +2 -2
src/engine-components/ui/RectTransform.ts +3 -3
src/engine/codegen/register_types.ts +2 -2
src/engine-components/Renderer.ts +10 -2
src/engine-components/SceneSwitcher.ts +2 -2
src/engine-components/SpriteRenderer.ts +2 -2
src/engine-components/export/usdz/ThreeUSDZExporter.ts +158 -91
src/engine-components/export/usdz/USDZExporter.ts +38 -10
src/engine-components/export/usdz/extensions/USDZText.ts +0 -48
src/engine-components/export/usdz/extensions/USDZUI.ts +68 -4

src/engine-components/export/usdz/extensions/Animation.ts CHANGED Viewed

@@ -30,6 +30,9 @@
     private root: Object3D;
     private clip: AnimationClip | null;
+    // Playback speed. Does not affect how the animation is written, just how fast actions play it back.
+    speed?: number;
     constructor(ext: AnimationExtension, root: Object3D, clip: AnimationClip | null) {
         this.ext = ext;
         this.root = root;
@@ -498,12 +501,32 @@
             const skeleton = model.skinnedMesh.skeleton;
             const boneAndInverse = new Array<{bone: Object3D, inverse: Matrix4}>();
-            for (const index in skeleton.bones) {
-                const bone = skeleton.bones[index];
-                const inverse = skeleton.boneInverses[index];
-                boneAndInverse.push({bone, inverse});
+            const sortedBones:Bone[] = [];
+            const uuidsFound:string[] = [];
+            for(const bone of skeleton.bones ){
+                if (bone.parent!.type !== 'Bone'){
+                    sortedBones.push(bone);
+                    const inverse = skeleton.boneInverses[skeleton.bones.indexOf(bone)];
+                    boneAndInverse.push({bone, inverse});
+                    uuidsFound.push(bone.uuid);
+                }
             }
+            while (uuidsFound.length < skeleton.bones.length){
+                for(const sortedBone of sortedBones){
+                    const children = sortedBone.children as Bone[];
+                    for (const childBone of children){
+                        if (uuidsFound.indexOf(childBone.uuid) === -1 && skeleton.bones.indexOf(childBone) !== -1){
+                            sortedBones.push(childBone);
+                            const childInverse = skeleton.boneInverses[skeleton.bones.indexOf(childBone)];
+                            boneAndInverse.push({bone: childBone, inverse: childInverse});
+                            uuidsFound.push(childBone.uuid);
+                        }
+                    }
+                }
+            }
             for (const bone of findStructuralNodesInBoneHierarchy(skeleton.bones)) {
                 boneAndInverse.push({bone, inverse: bone.matrixWorld.clone().invert()});
             }

src/engine-components/export/usdz/utils/animationutils.ts CHANGED Viewed

@@ -8,6 +8,7 @@
 import type { AnimationExtension } from "../extensions/Animation.js";
 import type { AudioExtension } from "../extensions/behavior/AudioExtension.js";
 import { PlayAnimationOnClick, PlayAudioOnClick } from "../extensions/behavior/BehaviourComponents.js";
+import { ActionBuilder,BehaviorModel, TriggerBuilder } from "../extensions/behavior/BehavioursBuilder.js";
 const debug = getParam("debugusdz");
@@ -148,6 +149,10 @@
     const constructedObjects = new Array<Object3D>();
+    if (debug) {
+        console.log({ audioSources, playAudioOnClicks });
+    }
     // Remove all audio sources that are already referenced from existing PlayAudioOnClick components
     for (const player of playAudioOnClicks) {
         if (!player.target) continue;
@@ -164,6 +169,7 @@
         const newComponent = new PlayAudioOnClick();
         newComponent.target = audioSource;
         newComponent.name = "PlayAudioOnClick_implicitAtStart_";
+        newComponent.trigger = "start";
         const go = new Object3D();
         GameObject.addComponent(go, newComponent);
         console.log("implicit PlayAudioOnStart", go, newComponent);
@@ -175,4 +181,12 @@
     }
     return constructedObjects;
+}
+export function disableObjectsAtStart(objects: Array<Object3D>) {
+    const newComponent = new BehaviorModel("DisableAtStart",
+        TriggerBuilder.sceneStartTrigger(),
+        ActionBuilder.fadeAction(objects, 0, false),
+    )
+    return newComponent;
 }

src/engine-components/export/usdz/extensions/behavior/AudioExtension.ts CHANGED Viewed

@@ -46,6 +46,16 @@
                 if (!this.files.some(f => f.path === audioSource.clip)) {
                     this.files.push({ path: audioSource.clip, name: safeClipNameWithExt });
+                    const lowerCase = safeClipNameWithExt.toLowerCase();
+                    // Warn for non-supported audio formats.
+                    // See https://openusd.org/release/wp_usdaudio.html#id9
+                    if (_context.quickLookCompatible &&
+                        !lowerCase.endsWith(".mp3") &&
+                        !lowerCase.endsWith(".wav") &&
+                        !lowerCase.endsWith(".m4a")) {
+                        console.error("Audio file " + audioSource.clip + " from " + audioSource.name + " is not an MP3 or WAV file. QuickLook may not support playing it.");
+                    }
                 }
                 // Turns out that in visionOS versions, using UsdAudio together with preliminary behaviours

src/engine-components/ui/BaseUIComponent.ts CHANGED Viewed

@@ -148,7 +148,7 @@
         if (needsUpdate)
             ThreeMeshUI.update();
-        if (debug) console.log(this.shadowComponent)
+        if (debug) console.warn("Added shadow component", this.shadowComponent);
     }
     protected setShadowComponentOwner(current: ThreeMeshUI.MeshUIBaseElement | Object3D | null | undefined) {

src/engine-components/export/usdz/extensions/behavior/Behaviour.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import { getParam } from "../../../../../engine/engine_utils.js";
 import { GameObject } from "../../../../Component.js";
 import type { IUSDExporterExtension } from "../../Extension.js";
-import { USDObject, USDWriter, USDZExporterContext } from "../../ThreeUSDZExporter.js";
-import { BehaviorModel } from "./BehavioursBuilder.js";
+import type { USDObject, USDWriter, USDZExporterContext } from "../../ThreeUSDZExporter.js";
+import { AudioExtension } from "./AudioExtension.js";
+import type { BehaviorModel } from "./BehavioursBuilder.js";
 const debug = getParam("debugusdzbehaviours");
@@ -26,11 +27,26 @@
         this.behaviours.push(beh);
     }
+    /** Register audio clip for USDZ export. The clip will be embedded in the resulting file. */
+    addAudioClip(clipUrl: string) {
+        if (!clipUrl) return "";
+        if (typeof clipUrl !== "string") return "";
+        const clipName = AudioExtension.getName(clipUrl);
+        const filesKey = "audio/" + clipName;
+        this.audioClips.push({clipUrl, filesKey});
+        return filesKey;
+    }
     behaviourComponents: Array<UsdzBehaviour> = [];
     private behaviourComponentsCopy: Array<UsdzBehaviour> = [];
+    private audioClips: Array<{clipUrl: string, filesKey: string}> = [];
+    private audioClipsCopy: Array<{clipUrl: string, filesKey: string}> = [];
-    onBeforeBuildDocument(context) {
+    onBeforeBuildDocument(context: USDZExporterContext) {
+        if (!context.root) return Promise.resolve();
         const beforeCreateDocumentPromises : Array<Promise<any>> = [];
         context.root.traverse(e => {
             GameObject.foreachComponent(e, (comp) => {
@@ -63,16 +79,18 @@
         }
     }
-    onAfterBuildDocument(context) {
+    onAfterBuildDocument(context: USDZExporterContext) {
         for (const beh of this.behaviourComponents) {
             if (typeof beh.afterCreateDocument === "function")
                 beh.afterCreateDocument(this, context);
         }
         this.behaviourComponentsCopy = this.behaviourComponents.slice();
         this.behaviourComponents.length = 0;
+        this.audioClipsCopy = this.audioClips.slice();
+        this.audioClips.length = 0;
     }
-    onAfterHierarchy(context, writer: USDWriter) {
+    onAfterHierarchy(context: USDZExporterContext, writer: USDWriter) {
         if (this.behaviours?.length) {
             writer.beginBlock('def Scope "Behaviors"');
@@ -83,7 +101,7 @@
         }
     }
-    async onAfterSerialize(context) {
+    async onAfterSerialize(context: USDZExporterContext) {
         if (debug) console.log("onAfterSerialize behaviours", this.behaviourComponentsCopy)
         for (const beh of this.behaviourComponentsCopy) {
@@ -100,8 +118,21 @@
             }
         }
+        for (const { clipUrl, filesKey } of this.audioClipsCopy) {
+            // if the clip was already added, don't add it again
+            if (context.files[filesKey]) return;
+            const audio = await fetch(clipUrl);
+            const audioBlob = await audio.blob();
+            const arrayBuffer = await audioBlob.arrayBuffer();
+            const audioData: Uint8Array = new Uint8Array(arrayBuffer)
+            context.files[filesKey] = audioData;
+        }
         // cleanup
-        this.behaviours.length = 0;
+        this.behaviourComponentsCopy.length = 0;
+        this.audioClipsCopy.length = 0;
     }
     // combine behaviours that have tap triggers on the same object

src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts CHANGED Viewed

@@ -524,7 +524,7 @@
             // add InputTargetComponent for VisionOS direct/indirect interactions
             const addInputTargetComponent = (model: USDObject) => {
                 const empty = USDObject.createEmpty();
-                empty.name = "InputTarget";
+                empty.name = "InputTarget_" + empty.name;
                 empty.displayName = undefined;
                 empty.type = "RealityKitComponent";
                 empty.onSerialize = (writer: USDWriter) => {
@@ -574,24 +574,26 @@
 export class HideOnStart extends Behaviour implements UsdzBehaviour {
     start() {
-        this.gameObject.visible = false;
+        GameObject.setActive(this.gameObject, false);
     }
     createBehaviours(ext, model, _context) {
-        if (model.uuid === this.gameObject.uuid)
-            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
-                TriggerBuilder.sceneStartTrigger(),
-                ActionBuilder.fadeAction(model, 0, false)
-            ));
+        if (model.uuid === this.gameObject.uuid) {
+            // we only want to mark the object as HideOnStart if it's still hidden
+            if (!this.wasVisible) {
+                ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+                    TriggerBuilder.sceneStartTrigger(),
+                    ActionBuilder.fadeAction(model, 0, false)
+                ));
+            }
+        }
     }
+    private wasVisible: boolean = false;
     beforeCreateDocument() {
-        this.gameObject.visible = true;
+        this.wasVisible = GameObject.isActiveSelf(this.gameObject);
     }
-    afterCreateDocument() {
-        this.gameObject.visible = false;
-    }
 }
 export class EmphasizeOnClick extends Behaviour implements UsdzBehaviour {
@@ -633,6 +635,9 @@
     @serializable()
     toggleOnClick: boolean = false;
+    // Not exposed, but used for implicit playback of PlayOnAwake audio sources
+    trigger: "tap" | "start" = "tap";
     start(): void {
         ensureRaycaster(this.gameObject);
     }
@@ -672,7 +677,7 @@
         }
     }
-    createBehaviours(ext, model, _context) {
+    createBehaviours(ext: BehaviorExtension, model: USDObject, _context: USDZExporterContext) {
         if (!this.target && !this.clip) return;
         if (model.uuid === this.gameObject.uuid) {
@@ -694,16 +699,20 @@
             // unclear why, but having a useless tap action (nothing to tap on) "fixes" it.
             anyChildHasGeometry = true;
-            let playAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, "audio/" + clipName, "play", volume, auralMode);
+            const audioClip = ext.addAudioClip(clipUrl);
+            // const stopAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, audioClip, "stop", volume, auralMode);
+            let playAction: IBehaviorElement = ActionBuilder.playAudioAction(playbackTarget, audioClip, "play", volume, auralMode);
             if (this.target && this.target.loop)
                 playAction = ActionBuilder.sequence(playAction).makeLooping();
-            if (anyChildHasGeometry)
+            const behaviorName = (this.name ? "_" + this.name : "");
+            if (anyChildHasGeometry && this.trigger === "tap")
             {
                 // does not seem to work in iOS / QuickLook...
                 // TODO use play "type" which can be start/stop/pause
                 if (this.toggleOnClick) (playAction as ActionModel).multiplePerformOperation = "stop";
-                const playClipOnTap = new BehaviorModel("playAudio " + this.name,
+                const playClipOnTap = new BehaviorModel("playAudio" + behaviorName,
                     TriggerBuilder.tapTrigger(this.gameObject),
                     playAction,
                 );
@@ -712,13 +721,13 @@
             // automatically play audio on start too if the referenced AudioSource has playOnAwake enabled
             if (this.target && this.target.playOnAwake && this.target.enabled) {
-                if (anyChildHasGeometry) {
+                if (anyChildHasGeometry && this.trigger === "tap") {
                     // HACK Currently (20240509) we MUST not emit this behaviour if we're also expecting the tap trigger to work.
-                    // Seems to be a regression in QuickLook...
+                    // Seems to be a regression in QuickLook... audio clips can't be stopped anymore as soon as they start playing.
                     console.warn("USDZExport: Audio sources that are played on tap can't also auto-play at scene start due to a QuickLook bug.");
                 }
                 else {
-                    const playClipOnStart = new BehaviorModel("playAudioOnStart" + (this.name ? "_" + this.name : ""),
+                    const playClipOnStart = new BehaviorModel("playAudioOnStart" + behaviorName,
                         TriggerBuilder.sceneStartTrigger(),
                         playAction,
                     );
@@ -727,24 +736,6 @@
             }
         }
     }
-    async afterSerialize(_ext, context) {
-        if (!this.target && !this.clip) return;
-        const clipUrl = this.clip ? this.clip : this.target ? this.target.clip : undefined;
-        if (!clipUrl) return;
-        if (typeof clipUrl !== "string") return;
-        const clipName = AudioExtension.getName(clipUrl);
-        const filesKey = "audio/" + clipName;
-        // if the clip was already added, don't add it again
-        if (context.files[filesKey]) return;
-        const audio = await fetch(clipUrl);
-        const audioBlob = await audio.blob();
-        const arrayBuffer = await audioBlob.arrayBuffer();
-        const audioData: Uint8Array = new Uint8Array(arrayBuffer)
-        context.files[filesKey] = audioData;
-    }
 }
 export class PlayAnimationOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour, UsdzAnimation {
@@ -785,7 +776,8 @@
     private animationSequence? = new Array<RegisteredAnimationInfo>();
     private animationLoopAfterSequence? = new Array<RegisteredAnimationInfo>();
-    createBehaviours(_ext, model, _context) {
+    createBehaviours(_ext: BehaviorExtension, model: USDObject, _context: USDZExporterContext) {
         if (model.uuid === this.gameObject.uuid)
             this.selfModel = model;
     }
@@ -827,38 +819,17 @@
             PlayAnimationOnClick.rootsWithExclusivePlayback.add(this.target);
         }
-        const getOrCacheAction = (model: USDObject, anim: RegisteredAnimationInfo) => {
-            let action = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == anim.start && a.duration == anim.duration);
-            if (!action) {
-                action = ActionBuilder.startAnimationAction(model, anim.start, anim.duration) as ActionModel;
-                PlayAnimationOnClick.animationActions.push(action);
-            }
-            return action;
-        }
+        const behaviorName = (this.name ? this.name : "");
         document.traverse(model => {
             if (model.uuid === this.target?.uuid) {
-                const sequence = ActionBuilder.sequence();
+                const sequence = PlayAnimationOnClick.getActionForSequences(
+                    model,
+                    this.animationSequence,
+                    this.animationLoopAfterSequence
+                );
-                if (this.animationSequence && this.animationSequence.length > 0)
-                {
-                    for (const anim of this.animationSequence) {
-                        sequence.addAction(getOrCacheAction(model, anim));
-                    }
-                }
-                if (this.animationLoopAfterSequence && this.animationLoopAfterSequence.length > 0) {
-                    // only make a new action group if there's already stuff in the existing one
-                    const loopSequence = sequence.actions.length == 0 ? sequence : ActionBuilder.sequence();
-                    for (const anim of this.animationLoopAfterSequence) {
-                        loopSequence.addAction(getOrCacheAction(model, anim));
-                    }
-                    loopSequence.makeLooping();
-                    if (sequence !== loopSequence)
-                        sequence.addAction(loopSequence);
-                }
-                const playAnimationOnTap = new BehaviorModel("_tap_" + this.name + "_toPlayClip_" + this.stateName + "_on_" + this.target?.name,
+                const playAnimationOnTap = new BehaviorModel(this.trigger + "_" + behaviorName + "_toPlayAnimation_" + this.stateName + "_on_" + this.target?.name,
                     this.trigger == "tap" ? TriggerBuilder.tapTrigger(this.selfModel) : TriggerBuilder.sceneStartTrigger(),
                     sequence
                 );
@@ -871,19 +842,66 @@
         });
     }
-    createAnimation(ext: AnimationExtension, model: USDObject, _context: USDZExporterContext) {
-        if (!this.target || (!this.animator && !this.animation)) return;
+    static getActionForSequences(model: USDObject, animationSequence?: Array<RegisteredAnimationInfo>, animationLoopAfterSequence?: Array<RegisteredAnimationInfo>) {
-        this.stateAnimationModel = model;
+        const getOrCacheAction = (model: USDObject, anim: RegisteredAnimationInfo) => {
+            let action = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == anim.start && a.duration == anim.duration && a.animationSpeed == anim.speed);
+            if (!action) {
+                action = ActionBuilder.startAnimationAction(model, anim.start, anim.duration, anim.speed) as ActionModel;
+                PlayAnimationOnClick.animationActions.push(action);
+            }
+            return action;
+        }
-        if (this.animation) {
-            this.animationSequence = new Array<RegisteredAnimationInfo>();
-            this.animationLoopAfterSequence = new Array<RegisteredAnimationInfo>();
-            const anim = ext.registerAnimation(this.target, this.animation.clip);
-            if (anim) this.animationLoopAfterSequence.push(anim);
-            return;
+        const sequence = ActionBuilder.sequence();
+        if (animationSequence && animationSequence.length > 0)
+        {
+            for (const anim of animationSequence) {
+                sequence.addAction(getOrCacheAction(model, anim));
+            }
         }
+        if (animationLoopAfterSequence && animationLoopAfterSequence.length > 0) {
+            // only make a new action group if there's already stuff in the existing one
+            const loopSequence = sequence.actions.length == 0 ? sequence : ActionBuilder.sequence();
+            for (const anim of animationLoopAfterSequence) {
+                loopSequence.addAction(getOrCacheAction(model, anim));
+            }
+            loopSequence.makeLooping();
+            if (sequence !== loopSequence)
+                sequence.addAction(loopSequence);
+        }
+        return sequence;
+    }
+    static getAndRegisterAnimationSequences(ext: AnimationExtension, target: GameObject, stateName?: string):
+    { animationSequence: Array<RegisteredAnimationInfo>, animationLoopAfterSequence: Array<RegisteredAnimationInfo> } | undefined {
+        if (!target) return undefined;
+        const animator = target.getComponent(Animator);
+        const animation = target.getComponent(Animation);
+        if (!animator && !animation) return undefined;
+        if (animator && !stateName) {
+            throw new Error("PlayAnimationOnClick: No stateName specified for animator " + animator.name + " on " + target.name);
+        }
+        let animationSequence: Array<RegisteredAnimationInfo> = [];
+        let animationLoopAfterSequence: Array<RegisteredAnimationInfo> = [];
+        if (animation) {
+            const anim = ext.registerAnimation(target, animation.clip);
+            if (anim) animationLoopAfterSequence.push(anim);
+            return {
+                animationSequence,
+                animationLoopAfterSequence
+            }
+        }
         // If there's a separate state specified to play after this one, we
         // play it automatically. Theoretically an animator state machine flow could be encoded here.
@@ -893,8 +911,8 @@
         // - (0 > 1 > 1) should keep looping (1).
         // - (0 > 1 > 2 > 3 > 2) should keep looping (2,3).
         // - (0 > 1 > 2 > 3 > 0) should keep looping (0,1,2,3).
-        const runtimeController = this.animator?.runtimeAnimatorController;
-        let currentState = runtimeController?.findState(this.stateName);
+        const runtimeController = animator?.runtimeAnimatorController;
+        let currentState = runtimeController?.findState(stateName);
         let statesUntilLoop: State[] = [];
         let statesLooping: State[] = [];
@@ -940,22 +958,22 @@
                 const firstStateInLoop = visitedStates.indexOf(currentState);
                 statesUntilLoop = visitedStates.slice(0, firstStateInLoop); // can be empty, which means we're looping all
                 statesLooping = visitedStates.slice(firstStateInLoop); // can be empty, which means nothing is looping
-                if (debug) console.log("found loop from " + this.stateName, "states until loop", statesUntilLoop, "states looping", statesLooping);
+                if (debug) console.log("found loop from " + stateName, "states until loop", statesUntilLoop, "states looping", statesLooping);
             }
             else {
                 statesUntilLoop = visitedStates;
                 statesLooping = [];
-                if (debug) console.log("found no loop from " + this.stateName, "states", statesUntilLoop);
+                if (debug) console.log("found no loop from " + stateName, "states", statesUntilLoop);
             }
         }
         // Special case: someone's trying to play an empty clip without any motion data, no loops or anything.
         // In that case, we simply go to the rest clip – this is a common case for "idle" states.
         if (statesUntilLoop.length === 1 && (!statesUntilLoop[0].motion?.clip || statesUntilLoop[0].motion?.clip.tracks?.length === 0)) {
-            this.animationSequence = new Array<RegisteredAnimationInfo>();
-            const anim = ext.registerAnimation(this.target, null);
-            if (anim) this.animationSequence.push(anim);
-            return;
+            animationSequence = new Array<RegisteredAnimationInfo>();
+            const anim = ext.registerAnimation(target, null);
+            if (anim) animationSequence.push(anim);
+            return undefined;
         }
         // filter out any states that don't have motion data
@@ -964,32 +982,53 @@
         // If none of the found states have motion, we need to warn
         if (statesUntilLoop.length === 0 && statesLooping.length === 0) {
-            console.warn("No clips found for state " + this.stateName + " on " + this.animator?.name + ", can't export animation data");
-            return;
+            console.warn("No clips found for state " + stateName + " on " + animator?.name + ", can't export animation data");
+            return undefined;
         }
         const addStateToSequence = (state: State, sequence: Array<RegisteredAnimationInfo>) => {
-            if (!this.target) return;
-            const anim = ext.registerAnimation(this.target, state.motion.clip ?? null);
-            if (anim) sequence.push(anim);
-            else console.warn("Couldn't register animation for state " + state.name + " on " + this.animator?.name);
+            if (!target) return;
+            const anim = ext.registerAnimation(target, state.motion.clip ?? null);
+            if (anim) {
+                anim.speed = state.speed;
+                sequence.push(anim);
+            }
+            else console.warn("Couldn't register animation for state " + state.name + " on " + animator?.name);
         };
         // Register all the animation states we found.
         if (statesUntilLoop.length > 0) {
-            this.animationSequence = new Array<RegisteredAnimationInfo>();
+            animationSequence = new Array<RegisteredAnimationInfo>();
             for (const state of statesUntilLoop) {
-                addStateToSequence(state, this.animationSequence);
+                addStateToSequence(state, animationSequence);
             }
         }
         if (statesLooping.length > 0) {
-            this.animationLoopAfterSequence = new Array<RegisteredAnimationInfo>();
+            animationLoopAfterSequence = new Array<RegisteredAnimationInfo>();
             for (const state of statesLooping) {
-                addStateToSequence(state, this.animationLoopAfterSequence);
+                addStateToSequence(state, animationLoopAfterSequence);
             }
         }
+        return {
+            animationSequence,
+            animationLoopAfterSequence
+        }
     }
+    createAnimation(ext: AnimationExtension, model: USDObject, _context: USDZExporterContext) {
+        if (!this.target || (!this.animator && !this.animation)) return;
+        const result = PlayAnimationOnClick.getAndRegisterAnimationSequences(ext, this.target, this.stateName);
+        if (!result) return;
+        this.animationSequence = result.animationSequence;
+        this.animationLoopAfterSequence = result.animationLoopAfterSequence;
+        this.stateAnimationModel = model;
+    }
 }
 export class PreliminaryAction extends Behaviour {

src/engine-components/export/usdz/extensions/behavior/BehavioursBuilder.ts CHANGED Viewed

@@ -75,6 +75,10 @@
         let str = "[ ";
         for (let i = 0; i < targetObject.length; i++) {
             let obj = targetObject[i];
+            if (!obj) {
+                console.warn("Invalid target object in behavior", targetObject + ". Is the object exported?");
+                continue;
+            }
             if (typeof obj === "string")
                 str += obj;
             else if (typeof obj === "object") {
@@ -82,6 +86,10 @@
                 if (obj.isObject3D) {
                     //@ts-ignore
                     obj = document.findById(obj.uuid);
+                    if (!obj) {
+                        console.warn("Invalid target object in behavior", targetObject + ". Is the object exported?");
+                        continue;
+                    }
                 }
                 const res = (obj as any).getPath?.call(obj) as string;
                 str += res;
@@ -313,8 +321,14 @@
             if (typeof this.affectedObjects !== "string") this.affectedObjects = resolve(this.affectedObjects, document);
             writer.appendLine('rel affectedObjects = ' + this.affectedObjects);
         }
-        if (typeof this.duration === "number")
-            writer.appendLine(`double duration = ${this.duration} `);
+        if (typeof this.duration === "number") {
+            if (typeof this.animationSpeed === "number" && this.animationSpeed !== 1) {
+                writer.appendLine(`double duration = ${this.duration / this.animationSpeed} `);
+            }
+            else {
+                writer.appendLine(`double duration = ${this.duration} `);
+            }
+        }
         if (this.easeType)
             writer.appendLine(`token easeType = "${this.easeType}"`);
         if (this.tokenId)
@@ -337,7 +351,7 @@
             writer.appendLine(`double start = ${this.start} `);
         }
         if (typeof this.animationSpeed === "number") {
-            writer.appendLine(`double animationSpeed = ${this.animationSpeed} `);
+            writer.appendLine(`double animationSpeed = ${this.animationSpeed.toFixed(2)} `);
         }
         if (typeof this.reversed === "boolean") {
             writer.appendLine(`bool reversed = ${this.reversed}`)
@@ -469,10 +483,10 @@
         return act;
     }
-    static lookAtCameraAction(targets: Target, duration: number = 9999999999999, front?: Vec3, up?: Vec3): ActionModel {
+    static lookAtCameraAction(targets: Target, duration?: number, front?: Vec3, up?: Vec3): ActionModel {
         const act = new ActionModel(targets);
         act.tokenId = "LookAtCamera";
-        act.duration = duration;
+        act.duration = duration === undefined ? 9999999999999 : duration;
         act.front = front ?? Vec3.forward;
         // 0,0,0 is a special case for "free look"
         // 0,1,0 is for "y-locked look-at"

src/engine-components/ContactShadows.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { 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, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, 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';
@@ -10,7 +10,7 @@
 import { getBoundingBox } from "../engine/engine_three_utils.js";
 import { getParam } from "../engine/engine_utils.js"
 import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
-import { Behaviour } from "./Component.js";
+import { Behaviour, GameObject } from "./Component.js";
 const debug = getParam("debugcontactshadows");
@@ -26,7 +26,7 @@
  */
 export class ContactShadows extends Behaviour {
-    private static _instance: ContactShadows;
+    private static _instances: Map<Context, ContactShadows> = new Map();
     /**
      * Create contact shadows for the scene. Automatically fits the shadows to the scene.
      * The instance of contact shadows will be created only once.
@@ -34,17 +34,22 @@
      * @returns The instance of the contact shadows.
      */
     static auto(context?: Context): ContactShadows {
-        if (!this._instance || this._instance.destroyed) {
+        if (!context) context = Context.Current;
+        if (!context) {
+            throw new Error("No context provided and no current context set.");
+        }
+        let instance = this._instances.get(context);
+        if (!instance || instance.destroyed) {
             const obj = new Object3D();
-            this._instance = addComponent(obj, ContactShadows, {
+            instance = addComponent(obj, ContactShadows, {
                 autoFit: false,
                 occludeBelowGround: false
             });
+            this._instances.set(context, instance);
         }
-        if (!context) context = Context.Current;
-        context.scene.add(this._instance.gameObject);
-        this._instance.fitShadows();
-        return this._instance;
+        context.scene.add(instance.gameObject);
+        instance.fitShadows();
+        return instance;
     }
     /**
@@ -59,7 +64,7 @@
     @serializable()
     blur: number = 4.0;
     @serializable()
-    occludeBelowGround: boolean = true;
+    occludeBelowGround: boolean = false;
     @serializable()
     backfaceShadows: boolean = true;
@@ -77,6 +82,8 @@
     private horizontalBlurMaterial?: ShaderMaterial;
     private verticalBlurMaterial?: ShaderMaterial;
+    private textureSize = 512;
     /**
      * Call to fit the shadows to the scene.
      */
@@ -85,15 +92,23 @@
         setAutoFitEnabled(this.gameObject, false);
         const box = getBoundingBox(this.context.scene.children, [this.gameObject]);
         // expand box in all directions (except below ground)
-        // 0.01 expands by 1% in each direction
-        const expandFactor = .01;
-        box.expandByVector(new Vector3(expandFactor, 0, expandFactor));
+        // 0.75 expands by 75% in each direction
+        // The "32" is pretty much heuristically determined – adjusting the value until we don't get a visible border anymore.
+        const expandFactor = Math.max(0.5, this.blur / 32);
+        const sizeX = box.max.x - box.min.x;
+        const sizeZ = box.max.z - box.min.z;
+        box.expandByVector(new Vector3(expandFactor * sizeX, 0, expandFactor * sizeZ));
+        if (debug) Gizmos.DrawWireBox3(box, 0xffff00, 60);
+        if (this.gameObject.parent) {
+            // transform box from world space into parent space
+            box.applyMatrix4((this.gameObject.parent as GameObject).matrixWorld.clone().invert());
+        }
         const min = box.min;
         const offset = Math.max(0.00001, (box.max.y - min.y) * .002);
         box.max.y += offset;
-        if (debug) Gizmos.DrawWireBox3(box, 0xffff00, 60);
         this.gameObject.position.set((min.x + box.max.x) / 2, min.y - offset, (min.z + box.max.z) / 2);
         this.gameObject.scale.set(box.max.x - min.x, box.max.y - min.y, box.max.z - min.z);
+        this.gameObject.matrixWorldNeedsUpdate = true;
     }
     awake() {
@@ -104,17 +119,16 @@
     /** @internal */
     start(): void {
         if (debug) console.log("Create ContactShadows on " + this.gameObject.name, this)
-        const textureSize = 512;
         this.shadowGroup = new Group();
         this.gameObject.add(this.shadowGroup);
         // the render target that will show the shadows in the plane texture
-        this.renderTarget = new WebGLRenderTarget(textureSize, textureSize);
+        this.renderTarget = new WebGLRenderTarget(this.textureSize, this.textureSize);
         this.renderTarget.texture.generateMipmaps = false;
         // the render target that we will use to blur the first render target
-        this.renderTargetBlur = new WebGLRenderTarget(textureSize, textureSize);
+        this.renderTargetBlur = new WebGLRenderTarget(this.textureSize, this.textureSize);
         this.renderTargetBlur.texture.generateMipmaps = false;
         // make a plane and make it face up
@@ -144,6 +158,7 @@
             color: 0x000000,
             transparent: true,
             depthWrite: false,
+            side: FrontSide,
         });
         this.plane = new Mesh(planeGeometry, planeMaterial);
         this.plane.scale.y = - 1;
@@ -155,6 +170,7 @@
             depthWrite: true,
             stencilWrite: true,
             colorWrite: false,
+            side: BackSide,
         }))
             // .rotateX(Math.PI)
             .translateY(-0.0001);
@@ -291,14 +307,11 @@
         // and reset the override material
         scene.overrideMaterial = null;
-        const size = this.gameObject.scale.x;
-        // take the size of the scene into account - for larger scenes we want less blur to keep it somewhat consistent
-        const blurAmount = Math.min(this.blur, this.blur / size);
+        const blurAmount = Math.max(this.blur, 0.05);
-        // a second pass to reduce the artifacts
-        // (0.4 is the minimum blur amout so that the artifacts are gone)
-        this.blurShadow(blurAmount * 0.4);
+        // two-pass blur to reduce the artifacts
+        this.blurShadow(blurAmount * 2);
+        this.blurShadow(blurAmount * 0.5);
         this.shadowGroup.visible = false;
         if (this.occluderMesh) this.occluderMesh.visible = this.occludeBelowGround;
@@ -312,7 +325,7 @@
     }
     // renderTarget --> blurPlane (horizontalBlur) --> renderTargetBlur --> blurPlane (verticalBlur) --> renderTarget
-    private blurShadow(amount) {
+    private blurShadow(amount: number) {
         if (!this.blurPlane || !this.shadowCamera ||
             !this.renderTarget || !this.renderTargetBlur ||
             !this.horizontalBlurMaterial || !this.verticalBlurMaterial)
@@ -320,10 +333,17 @@
         this.blurPlane.visible = true;
+        // Correct for contact shadow plane aspect ratio.
+        // since we have a separable blur, we can just adjust the blur amount for X and Z individually
+        const ws = this.gameObject.worldScale;
+        const avg = (ws.x + ws.z) / 2;
+        const aspectX = ws.z / avg;
+        const aspectZ = ws.x / avg;
         // blur horizontally and draw in the renderTargetBlur
         this.blurPlane.material = this.horizontalBlurMaterial;
         (this.blurPlane.material as ShaderMaterial).uniforms.tDiffuse.value = this.renderTarget.texture;
-        this.horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
+        this.horizontalBlurMaterial.uniforms.h.value = amount * 1 / this.textureSize * aspectX;
         const renderer = this.context.renderer;
@@ -334,7 +354,7 @@
         // blur vertically and draw in the main renderTarget
         this.blurPlane.material = this.verticalBlurMaterial;
         (this.blurPlane.material as ShaderMaterial).uniforms.tDiffuse.value = this.renderTargetBlur.texture;
-        this.verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
+        this.verticalBlurMaterial.uniforms.v.value = amount * 1 / this.textureSize * aspectZ;
         renderer.setRenderTarget(this.renderTarget);
         renderer.render(this.blurPlane, this.shadowCamera);

src/engine/debug/debug.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { isLocalNetwork } from "../engine_networking_utils.js";
 import { getParam } from "../engine_utils.js";
 import { showDebugConsole } from "./debug_console.js";
-import { addLog, clearMessages, LogType, setAllowOverlayMessages, setAllowBalloonMessages } from "./debug_overlay.js";
+import { addLog, clearMessages, LogType, setAllowBalloonMessages, setAllowOverlayMessages } from "./debug_overlay.js";
 export { showDebugConsole }
 export {
@@ -9,8 +9,8 @@
     /** @deprecated use clearBalloonMessages instead */
     clearMessages as clearOverlayMessages,
     LogType,
+    setAllowBalloonMessages,
     setAllowOverlayMessages,
-    setAllowBalloonMessages,
 };
 export { enableSpatialConsole } from "./debug_spatial_console.js";

src/engine/engine_components.ts CHANGED Viewed

@@ -59,8 +59,8 @@
         componentInstance.guid = idProvider.generateUUID();
     }
     apply(obj);
-    // componentInstance.transform = obj;
-    registerComponent(componentInstance);
+    // register the component - make sure to provide the component instance context (if assigned)
+    registerComponent(componentInstance, componentInstance.context);
     try {
         if (callAwake && componentInstance.__internalAwake) {
             updateActiveInHierarchyWithoutEventCall(obj);
@@ -108,7 +108,8 @@
         componentInstance.guid = idProvider.generateUUID();
     }
     if(init) componentInstance._internalInit(init);
-    registerComponent(componentInstance);
+    // Register the component - make sure to provide the component instance context (if assigned)
+    registerComponent(componentInstance, componentInstance.context);
     return componentInstance;
 }

src/engine/engine_context.ts CHANGED Viewed

@@ -109,7 +109,11 @@
 			console.error("Registered script is not a Needle Engine component. \nThe script will be ignored. Please make sure your component extends \"Behaviour\" imported from \"@needle-tools/engine\"\n", script);
 		return;
 	}
-	const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
+	if (!context) {
+		context = Context.Current;
+		if (debug) console.warn("> Registering component without context");
+	}
+	const new_scripts = context?.new_scripts;
 	if (!new_scripts.includes(script)) {
 		new_scripts.push(script);
 	}

src/engine/engine_element_loading.ts CHANGED Viewed

@@ -241,14 +241,16 @@
         const logoSize = 120;
         logo.style.width = `${logoSize}px`;
         logo.style.height = `${logoSize}px`;
-        logo.style.padding = "20px";
-        logo.style.margin = "-20px";
-        logo.style.marginBottom = "-10px";
+        logo.style.paddingTop = "20px";
+        logo.style.paddingBottom = "10px";
+        logo.style.margin = "0px";
         logo.style.userSelect = "none";
         logo.style.objectFit = "contain";
-        logo.style.transition = "transform 2s ease-out, opacity 1s ease-in-out";
-        logo.style.transform = "translateY(10px)";
+        logo.style.transition = "transform 1.5s ease-out, opacity .3s ease-in-out";
+        logo.style.transform = "translateY(30px)";
+        logo.style.opacity = "0.05";
         setTimeout(() => {
+            logo.style.opacity = "1";
             logo.style.transform = "translateY(0px)";
         }, 1);
         logo.src = needleLogoOnlySVG;
@@ -334,7 +336,7 @@
         this._messageContainer = messageContainer;
         messageContainer.style.display = "flex";
         messageContainer.style.fontSize = ".8rem";
-        messageContainer.style.paddingTop = ".2rem";
+        messageContainer.style.paddingTop = ".1rem";
         // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
         messageContainer.style.justifyContent = "center";
         details.appendChild(messageContainer);

src/engine/engine_gltf_builtin_components.ts CHANGED Viewed

@@ -220,6 +220,9 @@
                         // assign basic fields
                         assign(instance, compData, context.implementationInformation);
+                        // make sure we assign the Needle Engine Context because Context.Current is unreliable when loading multiple <needle-engine> elements at the same time due to async processes
+                        instance.context = context.context;
                         // assign the guid of the original instance
                         if ("guid" in compData)
                             instance[editorGuidKeyName] = compData.guid;

src/engine/engine_lifecycle_functions_internal.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import { type Context, FrameEvent } from "./engine_context.js";
-import type { ContextEvent } from "./engine_context_registry.js";
+import { ContextEvent } from "./engine_context_registry.js";
 import { safeInvoke } from "./engine_generic_utils.js";
 export declare type LifecycleMethod = (ctx: Context) => void;
 export declare type Event = ContextEvent | FrameEvent;
 const allMethods = new Map<Event, Array<LifecycleMethod>>();
+const _started = new WeakSet<Context>();
 /** register a function to be called during the Needle Engine frame event at a specific point
  * @param cb the function to call
@@ -35,10 +36,14 @@
     const methods = allMethods.get(evt);
     if (methods) {
         if (methods.length > 0) {
-            let array = methods;
+            const array = methods;
             if (evt === FrameEvent.Start) {
-                array = [...methods];
-                methods.length = 0;
+                if (_started.has(ctx)) {
+                    return;
+                }
+                else {
+                    _started.add(ctx);
+                }
             }
             invoke(ctx, array);
         }

src/engine/engine_physics_rapier.ts CHANGED Viewed

@@ -21,7 +21,7 @@
     Vec2,
     Vec3,
 } from './engine_types.js';
-import { Collision,ContactPoint } from './engine_types.js';
+import { Collision, ContactPoint } from './engine_types.js';
 import { SphereOverlapResult } from './engine_types.js';
 import { CircularBuffer, getParam } from "./engine_utils.js"
@@ -166,7 +166,7 @@
     addForce(rigidbody: IRigidbody, force: Vec3, wakeup: boolean) {
         this.validate();
         const body = this.internal_getRigidbody(rigidbody);
-        if(body) body.addForce(force, wakeup)
+        if (body) body.addForce(force, wakeup)
         else console.warn("Rigidbody doesn't exist: can not apply force");
     }
     addImpulse(rigidbody: IRigidbody, force: Vec3, wakeup: boolean) {
@@ -206,14 +206,14 @@
     applyImpulse(rb: IRigidbody, vec: Vec3, wakeup: boolean) {
         this.validate();
         const body = this.internal_getRigidbody(rb);
-        if(body) body.applyImpulse(vec, wakeup);
+        if (body) body.applyImpulse(vec, wakeup);
         else console.warn("Rigidbody doesn't exist: can not apply impulse");
     }
     wakeup(rb: IRigidbody) {
         this.validate();
         const body = this.internal_getRigidbody(rb);
-        if(body) body.wakeUp();
+        if (body) body.wakeUp();
         else console.warn("Rigidbody doesn't exist: can not wake up");
     }
     isSleeping(rb: IRigidbody) {
@@ -224,13 +224,13 @@
     setAngularVelocity(rb: IRigidbody, vec: Vec3, wakeup: boolean) {
         this.validate();
         const body = this.internal_getRigidbody(rb);
-        if(body) body.setAngvel(vec, wakeup);
+        if (body) body.setAngvel(vec, wakeup);
         else console.warn("Rigidbody doesn't exist: can not set angular velocity");
     }
     setLinearVelocity(rb: IRigidbody, vec: Vec3, wakeup: boolean) {
         this.validate();
         const body = this.internal_getRigidbody(rb);
-        if(body) body.setLinvel(vec, wakeup);
+        if (body) body.setLinvel(vec, wakeup);
         else console.warn("Rigidbody doesn't exist: can not set linear velocity");
     }
@@ -651,8 +651,7 @@
                 positions = this._meshCache.get(key)!;
             }
             else {
-                console.warn(`Your MeshCollider \"${collider.name}\" is scaled (${scale.x}, ${scale.y}, ${scale.z})\nthis is not optimal for performance since this isn't supported by the Rapier physics engine yet. Consider applying the scale to the collider mesh`);
-                // showBalloonWarning("Your model is using scaled mesh colliders which is not optimal for performance: " + mesh.name + ", consider using unscaled objects");
+                if (debugPhysics || isDevEnvironment()) console.warn(`Your MeshCollider \"${collider.name}\" is scaled: consider applying the scale to the collider mesh instead (${scale.x}, ${scale.y}, ${scale.z})`);
                 const scaledPositions = new Float32Array(positions.length);
                 for (let i = 0; i < positions.length; i += 3) {
                     scaledPositions[i] = positions[i] * scale.x;
@@ -1213,8 +1212,7 @@
                 this._tempCenterPos.z = center.z;
                 getWorldScale(collider.gameObject, this._tempCenterVec);
                 this._tempCenterPos.multiply(this._tempCenterVec);
-                if (!collider.attachedRigidbody)
-                {
+                if (!collider.attachedRigidbody) {
                     getWorldQuaternion(collider.gameObject, this._tempCenterQuaternion);
                     this._tempCenterPos.applyQuaternion(this._tempCenterQuaternion);
                 }

src/engine/engine_utils_screenshot.ts CHANGED Viewed

@@ -75,7 +75,8 @@
     if (!opts) opts = {}
-    let { context, width, height, mimeType, camera } = opts;
+    let { context, width, height, camera } = opts;
+    const { mimeType } = opts;
     if (!context) {
         context = ContextRegistry.Current as Context;
@@ -126,7 +127,6 @@
         // render now
         context.renderNow();
-        console.log("Screenshot taken", { width, height, mimeType, camera });
         const dataUrl = canvas.toDataURL(mimeType);
         return dataUrl;
     }

src/engine-components/ui/RectTransform.ts CHANGED Viewed

@@ -135,14 +135,14 @@
         super.onEnable();
         this.addShadowComponent(this.rectBlock);
         this._transformNeedsUpdate = true;
-        this.Canvas?.registerTransform(this);
+        this.canvas?.registerTransform(this);
         // this.onApplyTransform("enable");
     }
     onDisable() {
         super.onDisable();
         this.removeShadowComponent();
-        this.Canvas?.unregisterTransform(this);
+        this.canvas?.unregisterTransform(this);
     }
     onParentRectTransformChanged(comp: IRectTransform) {
@@ -218,7 +218,7 @@
             // calc anchors and offset and apply
             tempVec.set(0, 0, 0);
             this.applyAnchoring(tempVec);
-            if(this.Canvas?.screenspace) tempVec.z += .1;
+            if(this.canvas?.screenspace) tempVec.z += .1;
             else tempVec.z += .01;
             tempMatrix.identity();
             tempMatrix.setPosition(tempVec.x, tempVec.y, tempVec.z);

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import { TypeStore } from "./../engine_typestore.js"
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.js";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
@@ -220,7 +220,7 @@
 import { XRFlag } from "../../engine-components/webxr/XRFlag.js";
 import { XRRig } from "../../engine-components/webxr/WebXRRig.js";
 import { XRState } from "../../engine-components/webxr/XRFlag.js";
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);

src/engine-components/Renderer.ts CHANGED Viewed

@@ -325,6 +325,8 @@
     private _sharedMaterials!: SharedMaterialArray;
     private _originalMaterials?: Material[];
+    private _probeAnchorLastFrame?: Object3D;
     // this is just available during deserialization
     private set sharedMaterials(_val: Array<Material | null>) {
         // TODO: elements in the array might be missing at the moment which leads to problems if an index is serialized
@@ -630,6 +632,11 @@
             return;
         }
+        if(this._probeAnchorLastFrame !== this.probeAnchor) {
+            this._reflectionProbe?.onUnset(this);
+            this.updateReflectionProbe();
+        }
         if (debugRenderer == this.name && this.gameObject instanceof Mesh) {
             this.gameObject.geometry.computeBoundingSphere();
             const tempCenter = getTempVector(this.gameObject.geometry.boundingSphere.center).applyMatrix4(this.gameObject.matrixWorld);
@@ -749,7 +756,7 @@
         }
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onUnset(this)
+            this._reflectionProbe.onUnset(this);
         }
     }
@@ -777,11 +784,12 @@
         // handle reflection probe
         this._reflectionProbe = null;
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
-            if (!this.probeAnchor) return;
             // update the reflection probe right before rendering
             // if we do it immediately the reflection probe might not be enabled yet
             // (since this method is called from onEnable)
             this.startCoroutine(this._updateReflectionProbe(), FrameEvent.LateUpdate);
+            this._probeAnchorLastFrame = this.probeAnchor;
         }
     }
     private *_updateReflectionProbe() {

src/engine-components/SceneSwitcher.ts CHANGED Viewed

@@ -111,10 +111,10 @@
      * The scenes that can be loaded by the SceneSwitcher.
      */
     @serializable(AssetReference)
-    scenes!: AssetReference[];
+    scenes: AssetReference[] = [];
     @serializable(AssetReference)
-    loadingScene!: AssetReference;
+    loadingScene?: AssetReference;
     /** the url parameter that is set/used to store the currently loaded scene in, set to "" to disable */
     @serializable()

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -289,8 +289,8 @@
             if (sprite.texture && !mat.wireframe) {
                 let tex = sprite.texture;
-                // the sprite renderer modifies the textue offset
-                // so we need to clone the texture
+                // the sprite renderer modifies the texture offset and scale
+                // so we need to clone the texture
                 // if the same texture is used multiple times
                 if (tex[$spriteTexOwner] !== undefined && tex[$spriteTexOwner] !== this && this.spriteFrames > 1) {
                     tex = sprite!.texture = tex.clone();

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

@@ -32,8 +32,10 @@
 	WebGLRenderTarget} from 'three';
 import * as fflate from 'three/examples/jsm/libs/fflate.module.js';
+import { VERSION } from "../../../engine/engine_constants.js";
 import type { OffscreenCanvasExt } from '../../../engine/engine_shims.js';
 import { Progress } from '../../../engine/engine_time_utils.js';
+import { BehaviorExtension } from '../../api.js';
 import type { IUSDExporterExtension } from './Extension.js';
 import type { AnimationExtension } from './extensions/Animation.js';
@@ -95,6 +97,7 @@
 	name: string;
 	type?: string; // by default, Xform is used
 	displayName?: string;
+	visibility?: "inherited" | "invisible"; // defaults to "inherited" in USD
 	matrix: Matrix4;
 	private _isDynamic: boolean;
 	get isDynamic() { return this._isDynamic; }
@@ -314,7 +317,7 @@
 	findById( uuid: string ) {
 		let found = false;
-		function search( current ) {
+		function search( current: USDObject ) {
 			if ( found ) return;
 			if ( current.uuid === uuid ) {
@@ -328,6 +331,7 @@
 				for ( const child of current.children ) {
+					if (!child) continue;
 					const res = search( child );
 					if ( res ) return res;
@@ -342,12 +346,21 @@
 	}
-	buildHeader( { startTimeCode, endTimeCode } ) {
+	buildHeader( _context: USDZExporterContext ) {
+		const animationExtension = _context.extensions?.find( ext => ext?.extensionName === 'animation' ) as AnimationExtension | undefined;
+		const behaviorExtension = _context.extensions?.find( ext => ext?.extensionName === 'Behaviour' ) as BehaviorExtension | undefined;
+		const startTimeCode = animationExtension?.getStartTimeCode() ?? 0;
+		const endTimeCode = animationExtension?.getEndTimeCode() ?? 0;
 		return `#usda 1.0
 (
 	customLayerData = {
-		string creator = "Needle Engine USDZExporter"
+		string creator = "Needle Engine ${VERSION}"
+		dictionary Needle = {
+			bool animations = ${animationExtension ? 1 : 0}
+			bool interactive = ${behaviorExtension ? 1 : 0}
+			bool quickLookCompatible = ${_context.quickLookCompatible ? 1 : 0}
+		}
 	}
 	defaultPrim = "${makeNameSafe( this.name )}"
 	metersPerUnit = 1
@@ -356,6 +369,7 @@
 	endTimeCode = ${endTimeCode}
 	timeCodesPerSecond = 60
 	framesPerSecond = 60
+	doc = """Generated by Needle Engine USDZ Exporter ${VERSION}"""
 )
 `;
@@ -460,6 +474,7 @@
 	exporter: USDZExporter;
 	extensions: Array<IUSDExporterExtension> = [];
 	quickLookCompatible: boolean;
+	exportInvisible: boolean;
 	materials: Map<string, Material>;
 	textures: TextureMap;
 	files: { [path: string]: Uint8Array | [Uint8Array, fflate.ZipOptions] | null | any }
@@ -467,14 +482,19 @@
 	output: string;
 	animations: AnimationClip[];
-	constructor( root: Object3D | undefined, exporter: USDZExporter, extensions, quickLookCompatible ) {
+	constructor( root: Object3D | undefined, exporter: USDZExporter, options: {
+		extensions?: Array<IUSDExporterExtension>,
+		quickLookCompatible: boolean,
+		exportInvisible: boolean,
+	} ) {
 		this.root = root;
 		this.exporter = exporter;
-		this.quickLookCompatible = quickLookCompatible;
+		this.quickLookCompatible = options.quickLookCompatible;
+		this.exportInvisible = options.exportInvisible;
-		if ( extensions )
-			this.extensions = extensions;
+		if ( options.extensions )
+			this.extensions = options.extensions;
 		this.materials = new Map();
 		this.textures = {};
@@ -503,6 +523,7 @@
 	quickLookCompatible: boolean = false;
 	extensions: any[] = [];
 	maxTextureSize: number = 4096;
+	exportInvisible: boolean = false;
 }
 class USDZExporter {
@@ -522,7 +543,7 @@
 		options = Object.assign( new USDZExporterOptions(), options );
 		this.sceneAnchoringOptions = options;
-		const context = new USDZExporterContext( scene, this, options.extensions, options.quickLookCompatible );
+		const context = new USDZExporterContext( scene, this, options );
 		this.extensions = context.extensions;
 		const files = context.files;
@@ -541,7 +562,9 @@
 		Progress.report('export-usdz', "Reparent bones to common ancestor");
 		// HACK let's find all skeletons and reparent them to their skelroot / armature / uppermost bone parent
 		const reparentings: Array<{ object: Object3D, originalParent: Object3D | null, newParent: Object3D }> = [];
-		scene?.traverseVisible(object => {
+		scene?.traverse(object => {
+			if (!options.exportInvisible && !object.visible) return;
 			if (object instanceof SkinnedMesh) {
 				const bones = object.skeleton.bones as Bone[];
@@ -559,7 +582,7 @@
 		}
 		Progress.report('export-usdz', "Traversing hierarchy");
-		if(scene) traverseVisible( scene, context.document, context, this.keepObject);
+		if(scene) traverse( scene, context.document, context, this.keepObject);
 		Progress.report('export-usdz', "Invoking onAfterBuildDocument");
 		await invokeAll( context, 'onAfterBuildDocument' );
@@ -585,12 +608,8 @@
 		// Moved into parseDocument callback for proper defaultPrim encapsulation
 		// context.output += buildMaterials( materials, textures, options.quickLookCompatible );
-		const animationExtension: AnimationExtension | undefined = context.extensions.find( ext => ext.extensionName === 'animation' ) as AnimationExtension;
-		const startTimeCode = animationExtension?.getStartTimeCode() ?? 0;
-		const endTimeCode = animationExtension?.getEndTimeCode() ?? 0;
-		const header = context.document.buildHeader( { startTimeCode, endTimeCode } );
+		const header = context.document.buildHeader( context );
 		const final = header + '\n' + context.output;
 		// full output file
@@ -690,10 +709,10 @@
 }
-function traverseVisible( object: Object3D, parentModel: USDObject, context: USDZExporterContext, keepObject?: (object: Object3D) => boolean ) {
+function traverse( object: Object3D, parentModel: USDObject, context: USDZExporterContext, keepObject?: (object: Object3D) => boolean ) {
-	if ( ! object.visible ) return;
+	if (!context.exportInvisible && !object.visible) return;
 	let model: USDObject | undefined = undefined;
 	let geometry: BufferGeometry | undefined = undefined;
 	let material: Material | Material[] | undefined = undefined;
@@ -703,6 +722,8 @@
 		material = object.material;
 	}
+	// API for an explicit choice to discard this object – for example, a geometry that should not be exported,
+	// but childs should still be exported.
 	if (keepObject && !keepObject(object)) {
 		geometry = undefined;
 		material = undefined;
@@ -729,6 +750,7 @@
 	if ( model ) {
 		model.displayName = object.name;
+		model.visibility = object.visible ? undefined : "invisible";
 		if ( parentModel ) {
@@ -764,7 +786,7 @@
 	for ( const ch of object.children ) {
-		traverseVisible( ch, parentModel, context, keepObject );
+		traverse( ch, parentModel, context, keepObject );
 	}
@@ -858,7 +880,7 @@
 			if ( ! ( geometryFileName in context.files ) ) {
 				const action = () => {
-					const meshObject = buildMeshObject( geometry, object.skinnedMesh?.skeleton?.bones );
+					const meshObject = buildMeshObject( geometry, object.skinnedMesh?.skeleton?.bones, context.quickLookCompatible );
 					context.files[ geometryFileName ] = buildUSDFileAsString( meshObject, context);
 				};
@@ -1208,6 +1230,7 @@
 	const objType = isSkinnedMesh ? 'SkelRoot' : 'Xform';
 	const apiSchemas = isSkinnedMesh ? '"MaterialBindingAPI", "SkelBindingAPI"' : '"MaterialBindingAPI"';
+	writer.appendLine();
 	if ( geometry ) {
 		writer.beginBlock( `def ${objType} "${name}"`, "(", false );
 		// NE-4084: To use the doubleSided workaround with skeletal meshes we'd have to
@@ -1257,6 +1280,9 @@
 	if (model.type === undefined)
 		writer.appendLine( 'uniform token[] xformOpOrder = ["xformOp:transform"]' );
+	if (model.visibility !== undefined)
+		writer.appendLine(`token visibility = "${model.visibility}"`);
 	if ( camera ) {
 		if ( 'isOrthographicCamera' in camera && camera.isOrthographicCamera ) {
@@ -1321,9 +1347,9 @@
 // Mesh
-function buildMeshObject( geometry: BufferGeometry, bonesArray: Bone[] = [] ) {
+function buildMeshObject( geometry: BufferGeometry, bonesArray: Bone[] = [], quickLookCompatible: boolean = true) {
-	const mesh = buildMesh( geometry, bonesArray );
+	const mesh = buildMesh( geometry, bonesArray, quickLookCompatible );
 	return `
 def "Geometry"
 ${mesh}
@@ -1331,7 +1357,7 @@
 }
-function buildMesh( geometry, bones: Bone[] = [] ) {
+function buildMesh( geometry, bones: Bone[] = [], quickLookCompatible: boolean = true) {
 	const name = 'Geometry';
 	const attributes = geometry.attributes;
@@ -1348,9 +1374,24 @@
 	let sortedSkinIndexAttribute: BufferAttribute | null = attributes.skinIndex;
 	let bonesArray = "";
 	if (hasBones) {
+		const uuidsFound:string[] = [];
+		for(const bone of bones ){
+			if (bone.parent!.type !== 'Bone'){
+				sortedBones.push({bone: bone, index: bones.indexOf(bone)});
+				uuidsFound.push(bone.uuid);
+			}
+		}
-		for ( const index in bones ) {
-			sortedBones.push( { bone: bones[index], index: parseInt(index) } );
+		while (uuidsFound.length < bones.length){
+			for(const sortedBone of sortedBones){
+				const children = sortedBone.bone.children as Bone[];
+				for (const childBone of children){
+					if (uuidsFound.indexOf(childBone.uuid) === -1 && bones.indexOf(childBone) !== -1){
+						sortedBones.push({bone: childBone, index: bones.indexOf(childBone)});
+						uuidsFound.push(childBone.uuid);
+					}
+				}
+			}
 		}
 		// add structural nodes to the list of bones
@@ -1359,7 +1400,7 @@
 		}
         // sort bones by path – need to be sorted in the same order as during mesh export
-		const assumedRoot = bones[0].parent!;
+		const assumedRoot = sortedBones[0].bone.parent!;
 		sortedBones.sort((a, b) => getPathToSkeleton(a.bone, assumedRoot) > getPathToSkeleton(b.bone, assumedRoot) ? 1 : -1);
 		bonesArray = sortedBones.map( x => "\"" + getPathToSkeleton(x.bone, assumedRoot) + "\"" ).join( ', ' );
@@ -1398,9 +1439,10 @@
     {
         int[] faceVertexCounts = [${buildMeshVertexCount( geometry )}]
         int[] faceVertexIndices = [${buildMeshVertexIndices( geometry )}]
-        normal3f[] normals = [${buildVector3Array( attributes.normal, count )}] (
+		${attributes.normal || quickLookCompatible ? // in QuickLook, normals are required, otherwise double-sided rendering doesn't work.
+		`normal3f[] normals = [${buildVector3Array( attributes.normal, count )}] (
             interpolation = "vertex"
-        )
+        )` : '' }
         point3f[] points = [${buildVector3Array( attributes.position, count )}]
         ${attributes.uv ?
 		`texCoord2f[] primvars:st = [${buildVector2Array( attributes.uv, count )}] (
@@ -1431,7 +1473,7 @@
         uniform token subdivisionScheme = "none"
     }
 }
+${quickLookCompatible ? `
 # This is a workaround for QuickLook/RealityKit not supporting the doubleSided attribute. We're adding a second
 # geometry definition here, that uses the same mesh data but appends extra faces with reversed winding order.
 def "${name}_doubleSided" (
@@ -1444,8 +1486,8 @@
 		int[] faceVertexIndices = [${buildMeshVertexIndices( geometry ) + ", " + buildMeshVertexIndices( geometry, true )}]
 	}
 }
+` : '' }
 `;
 }
 function buildMeshVertexCount( geometry ) {
@@ -1495,8 +1537,8 @@
 	if ( attribute === undefined ) {
-		console.warn( 'USDZExporter: Normals missing.' );
-		return Array( count ).fill( '(0, 0, 0)' ).join( ', ' );
+		console.warn( 'USDZExporter: Attribute is missing. Results may be undefined.' );
+		return Array( count ).fill( '(0, 0, 1)' ).join( ', ' );
 	}
@@ -1575,13 +1617,11 @@
 	}
-	return `def "Materials"
+	return `
+	def "Materials"
     {
 ${array.join( '' )}
-    }
-`;
+    }`;
 }
 /** Slot of the exported texture. Some slots (e.g. normal, opacity) require additional processing. */
@@ -1595,9 +1635,12 @@
 	const inputs: Array<string> = [];
 	const samplers: Array<string> = [];
 	const materialName = getMaterialName(material);
+	const usedUVChannels: Set<number> = new Set();
 	function texName(tex: Texture) {
-		return makeNameSafe(tex.name) + '_' + tex.id;
+		// If we have a source, we only want to use the source's id, not the texture's id
+		// to avoid exporting the same underlying data multiple times.
+		return makeNameSafe(tex.name) + '_' + (tex.source?.id ?? tex.id);
 	}
 	function buildTexture( texture: Texture, mapType: MapType, color: Color | undefined = undefined, opacity: number | undefined = undefined ) {
@@ -1628,6 +1671,7 @@
 		textures[ id ] = { texture, scale: scaleToApply };
 		const uv = texture.channel > 0 ? 'st' + texture.channel : 'st';
+		usedUVChannels.add(texture.channel);
 		const isRGBA = formatsWithAlphaChannel.includes( texture.format );
@@ -1655,6 +1699,10 @@
 			// This is NOT correct yet in QuickLook, but comes close for a range of models.
 			// It becomes more incorrect the bigger the offset is
+			// sanitize repeat values to avoid NaNs
+			if (repeat.x === 0) repeat.x = 0.0001;
+			if (repeat.y === 0) repeat.y = 0.0001;
 			offset.x = offset.x / repeat.x;
 			offset.y = offset.y / repeat.y;
@@ -1681,42 +1729,41 @@
 		const normalBiasZString = (1 - normalScale).toFixed( PRECISION );
 		return `
-        ${needsTextureTransform ? `def Shader "Transform2d_${mapType}" (
-            sdrMetadata = {
-                string role = "math"
-            }
-        )
-        {
-            uniform token info:id = "UsdTransform2d"
-            float2 inputs:in.connect = ${textureTransformInput}
-            float2 inputs:scale = ${buildVector2( repeat )}
-            float2 inputs:translation = ${buildVector2( offset )}
-			float inputs:rotation = ${(rotation / Math.PI * 180).toFixed( PRECISION )}
-            float2 outputs:result
-        }
-		` : '' }
-		def Shader "${name}_${mapType}"
-        {
-            uniform token info:id = "UsdUVTexture"
-            asset inputs:file = @textures/${id}.${isRGBA ? 'png' : 'jpg'}@
-			token inputs:sourceColorSpace = "${ texture.colorSpace === 'srgb' ? 'sRGB' : 'raw' }"
-            float2 inputs:st.connect = ${needsTextureTransform ? textureTransformOutput : textureTransformInput}
-			${needsTextureScale ? `
-			float4 inputs:scale = (${color ? color.r + ', ' + color.g + ', ' + color.b : '1, 1, 1'}, ${opacity})
-			` : `` }
-			${needsNormalScaleAndBias ? `
-			float4 inputs:scale = (${normalScaleValueString}, ${normalScaleValueString}, ${normalScaleValueString}, 1)
-			float4 inputs:bias = (${normalBiasString}, ${normalBiasString}, ${normalBiasZString}, 0)
-			` : `` }
-			token inputs:wrapS = "${ WRAPPINGS[ texture.wrapS ] }"
-			token inputs:wrapT = "${ WRAPPINGS[ texture.wrapT ] }"
-            float outputs:r
-            float outputs:g
-            float outputs:b
-            float3 outputs:rgb
-            ${material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : ''}
-        }`;
+			${needsTextureTransform ? `def Shader "Transform2d_${mapType}" (
+				sdrMetadata = {
+					string role = "math"
+				}
+			)
+			{
+				uniform token info:id = "UsdTransform2d"
+				float2 inputs:in.connect = ${textureTransformInput}
+				float2 inputs:scale = ${buildVector2( repeat )}
+				float2 inputs:translation = ${buildVector2( offset )}
+				float inputs:rotation = ${(rotation / Math.PI * 180).toFixed( PRECISION )}
+				float2 outputs:result
+			}
+			` : '' }
+			def Shader "${name}_${mapType}"
+			{
+				uniform token info:id = "UsdUVTexture"
+				asset inputs:file = @textures/${id}.${isRGBA ? 'png' : 'jpg'}@
+				token inputs:sourceColorSpace = "${ texture.colorSpace === 'srgb' ? 'sRGB' : 'raw' }"
+				float2 inputs:st.connect = ${needsTextureTransform ? textureTransformOutput : textureTransformInput}
+				${needsTextureScale ? `
+				float4 inputs:scale = (${color ? color.r + ', ' + color.g + ', ' + color.b : '1, 1, 1'}, ${opacity})
+				` : `` }
+				${needsNormalScaleAndBias ? `
+				float4 inputs:scale = (${normalScaleValueString}, ${normalScaleValueString}, ${normalScaleValueString}, 1)
+				float4 inputs:bias = (${normalBiasString}, ${normalBiasString}, ${normalBiasZString}, 0)
+				` : `` }
+				token inputs:wrapS = "${ WRAPPINGS[ texture.wrapS ] }"
+				token inputs:wrapT = "${ WRAPPINGS[ texture.wrapT ] }"
+				float outputs:r
+				float outputs:g
+				float outputs:b
+				float3 outputs:rgb
+				${material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : ''}
+			}`;
 	}
 	let effectiveOpacity = ( material.transparent || material.alphaTest ) ? material.opacity : 1;
@@ -1734,7 +1781,16 @@
 		inputs.push( `${pad}color3f inputs:diffuseColor.connect = ${materialRoot}/${materialName}/${texName(material.map)}_diffuse.outputs:rgb>` );
-		if ( material.transparent ) {
+		// Enforce alpha hashing in QuickLook for unlit materials
+		if (material instanceof MeshBasicMaterial && material.transparent && material.alphaTest == 0.0 && quickLookCompatible) {
+			inputs.push( `${pad}float inputs:opacity.connect = ${materialRoot}/${materialName}/${texName(material.map)}_diffuse.outputs:a>` );
+			haveConnectedOpacity = true;
+			// see below – QuickLook applies alpha hashing instead of pure blending when
+			// both opacity and opacityThreshold are connected
+			inputs.push( `${pad}float inputs:opacityThreshold = ${0.0000000001}` );
+			haveConnectedOpacityThreshold = true;
+		}
+		else if ( material.transparent ) {
 			inputs.push( `${pad}float inputs:opacity.connect = ${materialRoot}/${materialName}/${texName(material.map)}_diffuse.outputs:a>` );
 			haveConnectedOpacity = true;
@@ -1756,7 +1812,7 @@
 	}
-	if ( material.alphaHash ) {
+	if ( material.alphaHash && quickLookCompatible) {
 		// Seems we can do this to basically enforce alpha hashing / dithered transparency in QuickLook –
 		// works completely different in usdview though...
@@ -1880,21 +1936,34 @@
 	}
+	// check if usedUVChannels contains any data besides exactly 0 or 1
+	if (usedUVChannels.size > 2) {
+		console.warn('USDZExporter: Material ' + material.name + ' uses more than 2 UV channels. Currently, only UV0 and UV1 are supported.');
+	}
+	else if (usedUVChannels.size === 2) {
+		// check if it's exactly 0 and 1
+		if (!usedUVChannels.has(0) || !usedUVChannels.has(1)) {
+			console.warn('USDZExporter: Material ' + material.name + ' uses UV channels other than 0 and 1. Currently, only UV0 and UV1 are supported.');
+		}
+	}
 	return `
-		def Material "${materialName}" (
-			${material.name ? `displayName = "${material.name}"` : ''}
-		)
+		def Material "${materialName}" ${material.name ?`(
+			displayName = "${material.name}"
+		)` : ''}
 		{
+			token outputs:surface.connect = ${materialRoot}/${materialName}/PreviewSurface.outputs:surface>
 			def Shader "PreviewSurface"
 			{
 				uniform token info:id = "UsdPreviewSurface"
 ${inputs.join( '\n' )}
-				int inputs:useSpecularWorkflow = 0
+				int inputs:useSpecularWorkflow = ${material instanceof MeshBasicMaterial ? '1' : '0'}
 				token outputs:surface
 			}
-			token outputs:surface.connect = ${materialRoot}/${materialName}/PreviewSurface.outputs:surface>
+${samplers.length > 0 ? `
+${usedUVChannels.has(0) ? `
 			def Shader "uvReader_st"
 			{
 				uniform token info:id = "UsdPrimvarReader_float2"
@@ -1902,7 +1971,8 @@
 				float2 inputs:fallback = (0.0, 0.0)
 				float2 outputs:result
 			}
+` : ''}
+${usedUVChannels.has(1) ? `
 			def Shader "uvReader_st2"
 			{
 				uniform token info:id = "UsdPrimvarReader_float2"
@@ -1910,12 +1980,9 @@
 				float2 inputs:fallback = (0.0, 0.0)
 				float2 outputs:result
 			}
-${samplers.join( '\n' )}
-		}
-`;
+` : ''}
+${samplers.join( '\n' )}` : ''}
+		}`;
 }
 function buildColor( color ) {

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

@@ -11,7 +11,7 @@
 import { WebARSessionRoot } from "../../webxr/WebARSessionRoot.js";
 import { WebXR } from "../../webxr/WebXR.js";
 import { WebXRButtonFactory } from "../../webxr/WebXRButtons.js";
-import { XRFlag, XRState, XRStateFlag } from "../../webxr/XRFlag.js";
+import { XRState, XRStateFlag } from "../../webxr/XRFlag.js";
 import type { IUSDExporterExtension } from "./Extension.js";
 import { AnimationExtension } from "./extensions/Animation.js"
 import { AudioExtension } from "./extensions/behavior/AudioExtension.js";
@@ -20,7 +20,7 @@
 import { TextExtension } from "./extensions/USDZText.js";
 import { USDZUIExtension } from "./extensions/USDZUI.js";
 import { USDZExporter as ThreeUSDZExporter } from "./ThreeUSDZExporter.js";
-import { registerAnimatorsImplictly, registerAudioSourcesImplictly } from "./utils/animationutils.js";
+import { disableObjectsAtStart, registerAnimatorsImplictly, registerAudioSourcesImplictly } from "./utils/animationutils.js";
 import { ensureQuicklookLinkIsCreated } from "./utils/quicklook.js";
 const debug = getParam("debugusdz");
@@ -337,15 +337,15 @@
         XRState.Global.Set(XRStateFlag.AR);
         const exporter = new ThreeUSDZExporter();
-        const extensions: any = [...this.extensions]
-        // collect animators and their clips
+        // We're creating a new animation extension on each export to avoid issues with multiple exports.
+        // TODO we probably want to do that with all the extensions...
+        // Ordering of extensions is important
         const animExt = new AnimationExtension(this.quickLookCompatible);
-        extensions.push(animExt);
+        const extensions: any = [animExt, ...this.extensions]
         const eventArgs = { self: this, exporter: exporter, extensions: extensions, object: objectToExport };
         Progress.report("export-usdz", "Invoking before-export");
-        this.dispatchEvent(new CustomEvent("before-export", { detail: eventArgs }))
+        this.dispatchEvent(new CustomEvent("before-export", { detail: eventArgs }));
         // make sure we apply the AR scale
         this.applyWebARSessionRoot();
@@ -369,14 +369,40 @@
         //@ts-ignore
         exporter.debug = debug;
         exporter.keepObject = (object) => {
-            // TODO We need to take more care with disabled renderers. This currently breaks when any renderer is disabled
-            // and then enabled at runtime by e.g. SetActiveOnClick, requiring extra work to enable them before export,
-            // cache their state, and then reset their state after export.
+            // This explicitly removes geometry and material data from disabled renderers.
+            // Note that this is different to the object itself being active –
+            // here, we have an active object with a disabled renderer.
             const renderer = GameObject.getComponent(object, Renderer)
             if (renderer && !renderer.enabled) return false;
             return true;
         }
+        // Collect invisible objects so that we can disable them if
+        // - we're exporting for QuickLook
+        // - and interactive behaviors are allowed.
+        // When exporting for regular USD, we're supporting the "visibility" attribute anyways.
+        const objectsToDisableAtSceneStart = new Array<Object3D>();
+        if (this.objectToExport && this.quickLookCompatible && this.interactive) {
+            this.objectToExport.traverse((obj) => {
+                if (!obj.visible) {
+                    objectsToDisableAtSceneStart.push(obj);
+                }
+            });
+        }
+        const behaviorExt = this.extensions.find(ext => ext.extensionName === "Behaviour");
+        if (this.interactive && behaviorExt) {
+            //@ts-ignore
+            behaviorExt.addBehavior(disableObjectsAtStart(objectsToDisableAtSceneStart));
+        }
+        let exportInvisible = true;
+        // The only case where we want to strip out invisible objects is
+        // when we're exporting for QuickLook and we're NOT adding interactive behaviors,
+        // since QuickLook on iOS does not support "visibility" tokens.
+        if (this.quickLookCompatible && !this.interactive)
+            exportInvisible = false;
         // sanitize anchoring types
         if (this.anchoringType !== "plane" && this.anchoringType !== "none" && this.anchoringType !== "image" && this.anchoringType !== "face")
             this.anchoringType = "plane";
@@ -384,6 +410,7 @@
             this.planeAnchoringAlignment = "horizontal";
         Progress.report("export-usdz", "Invoking exporter.parse");
         //@ts-ignore
         const arraybuffer = await exporter.parse(this.objectToExport, {
             ar: {
@@ -397,6 +424,7 @@
             extensions: extensions,
             quickLookCompatible: this.quickLookCompatible,
             maxTextureSize: this.maxTextureSize,
+            exportInvisible: exportInvisible,
         });
         const blob = new Blob([arraybuffer], { type: 'model/vnd.usdz+zip' });

src/engine-components/export/usdz/extensions/USDZText.ts CHANGED Viewed

@@ -148,54 +148,6 @@
         return "text";
     }
-    // HACK we should clean this up, text export has moved to USDZUI.ts and is
-    // integrated into the hierarchy now
-    onExportObject(_object: Object3D, _model: USDObject, _context: USDZExporterContext) {
-        return;
-        /*
-        const text = GameObject.getComponent(object, Text);
-        if (text) {
-            const rt = GameObject.getComponent(object, RectTransform);
-            let width = 100;
-            let height = 100;
-            if (rt) {
-                width = rt.width;
-                height = rt.height;
-                // Take the matrix from the three mesh ui object:
-                const mat = rt.shadowComponent!.matrix;
-                model.matrix.copy(mat);
-                // model.matrix.premultiply(rotateYAxisMatrix);
-                model.matrix.premultiply(invertX);
-            }
-            const newModel = model.clone();
-            newModel.matrix = rotateYAxisMatrix.clone();
-            if (rt) // Not ideal but works for now:
-                newModel.matrix.premultiply(invertX);
-            const color = new Color().copySRGBToLinear(text.color);
-            newModel.material = new MeshStandardMaterial({ color: color, emissive: color });
-            model.add(newModel);
-            // model.matrix.scale(new Vector3(100, 100, 100));
-            newModel.addEventListener("serialize", (writer: USDWriter, _context: USDZExporterContext) => {
-                let txt = text.text;
-                txt = txt.replace(/\n/g, "\\n");
-                const textObj = TextBuilder.multiLine(txt, width, height, HorizontalAlignment.center, VerticalAlignment.bottom, TextWrapMode.flowing);
-                this.setTextAlignment(textObj, text.alignment);
-                this.setOverflow(textObj, text);
-                if (newModel.material)
-                    textObj.material = newModel.material;
-                textObj.pointSize = this.convertToTextSize(text.fontSize);
-                textObj.depth = .001;
-                textObj.writeTo(undefined, writer);
-            });
-        }
-        */
-    }
     exportText(object: Object3D, newModel: USDObject, _context: USDZExporterContext) {
         const text = GameObject.getComponent(object, Text);

src/engine-components/export/usdz/extensions/USDZUI.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import { Color, Mesh, MeshBasicMaterial, Object3D } from "three";
 import { GameObject } from "../../../Component.js";
-import { $shadowDomOwner } from "../../../ui/BaseUIComponent.js";
+import { $shadowDomOwner, BaseUIComponent } from "../../../ui/BaseUIComponent.js";
 import { Canvas } from "../../../ui/Canvas.js";
 import { RenderMode } from "../../../ui/Canvas.js";
 import { CanvasGroup } from "../../../ui/CanvasGroup.js";
 import { RectTransform } from "../../../ui/RectTransform.js";
+import { Text } from "../../../ui/Text.js";
 import type { IUSDExporterExtension } from "../Extension.js";
 import { USDObject, USDZExporterContext } from "../ThreeUSDZExporter.js";
 import { TextExtension } from "./USDZText.js";
@@ -20,14 +21,73 @@
     onExportObject(object: Object3D, model: USDObject, _context: USDZExporterContext) {
         const canvas = GameObject.getComponent(object, Canvas);
-        if (canvas && canvas.activeAndEnabled && canvas.renderMode === RenderMode.WorldSpace) {
+        if (canvas && canvas.enabled && canvas.renderMode === RenderMode.WorldSpace) {
             const textExt = new TextExtension();
             const rt = GameObject.getComponent(object, RectTransform);
             const canvasGroup = GameObject.getComponent(object, CanvasGroup);
+            // we have to do some temporary changes (enable UI component so that they're building
+            // their shadow hierarchy, then revert them back to the original state)
+            const revertActions = new Array<() => void>();
             let width = 100;
             let height = 100;
             if (rt) {
+                // Workaround: since UI components are only present in the shadow hierarchy when objects are on,
+                // we need to enable them temporarily to export them including their potential child components.
+                // For example, Text can have multiple child objects (e.g. rich text, panels, ...)
+                if (!GameObject.isActiveSelf(object)) {
+                    const wasActive = GameObject.isActiveSelf(object);
+                    GameObject.setActive(object, true);
+                    rt.onEnable();
+                    rt.updateTransform();
+                    revertActions.push(() => {
+                        rt.onDisable();
+                        GameObject.setActive(object, wasActive);
+                    });
+                }
+                object.traverse((child) => {
+                    if (!GameObject.isActiveInHierarchy(child)) {
+                        const wasActive = GameObject.isActiveSelf(child);
+                        GameObject.setActive(child, true);
+                        const baseUIComponent = GameObject.getComponent(child, BaseUIComponent);
+                        if (baseUIComponent) {
+                            baseUIComponent.onEnable();
+                            revertActions.push(() => {
+                                baseUIComponent.onDisable();
+                            });
+                        }
+                        const rectTransform = GameObject.getComponent(child, RectTransform);
+                        if (rectTransform) {
+                            rectTransform.onEnable();
+                            rectTransform.updateTransform();
+                            // This method bypasses the checks for whether the object is enabled etc.
+                            // so that we can ensure even a disabled object has the correct layout.
+                            rectTransform["onApplyTransform"]();
+                            revertActions.push(() => {
+                                rectTransform.onDisable();
+                            });
+                        }
+                        const text = GameObject.getComponent(child, Text);
+                        if (text) {
+                            text.onEnable();
+                            revertActions.push(() => {
+                                text.onDisable();
+                            });
+                        }
+                        revertActions.push(() => {
+                            GameObject.setActive(child, wasActive);
+                        });
+                    }
+                });
                 width = rt.width;
                 height = rt.height;
@@ -38,15 +98,14 @@
                 if (shadowComponent) {
                     const mat = shadowComponent.matrix;
                     shadowRootModel.matrix.copy(mat);
-                    // shadowRootModel.matrix.premultiply(invertX);
-                    // TODO build map of parent GOs to USDObjects so we can reparent while traversing
                     const usdObjectMap = new Map<Object3D, USDObject>();
                     const opacityMap = new Map<Object3D, number>();
                     usdObjectMap.set(shadowComponent, shadowRootModel);
                     opacityMap.set(shadowComponent, canvasGroup ? canvasGroup.alpha : 1);
                     shadowComponent.traverse((child) => {
+                        // console.log("traversing UI shadow components", shadowComponent.name + " ->" + child.name);
                         if (child === shadowComponent) return;
                         const childModel = USDObject.createEmpty();
@@ -109,6 +168,11 @@
                     });
                 }
             }
+            // revert temporary changes that we did here
+            for (const revert of revertActions) {
+                revert();
+            }
         }
     }