@needle-tools/engine 3.3.0-alpha → 3.5.0-alpha

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

@@ -0,0 +1,545 @@
+import { Behaviour, GameObject } from "../../../../Component";
+import { Animator } from "../../../../Animator";
+import { Renderer } from "../../../../Renderer";
+import { serializable } from "../../../../../engine/engine_serialization_decorator";
+import { IPointerClickHandler } from "../../../../ui/PointerEvents";
+import { RegisteredAnimationInfo, UsdzAnimation } from "../Animation";
+import { getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../../../../../engine/engine_three_utils";
+
+import { Object3D, Material, Vector3, Quaternion, AnimationAction } from "three";
+import { USDObject } from "../../ThreeUSDZExporter";
+
+import { BehaviorExtension, UsdzBehaviour } from "./Behaviour";
+import { ActionBuilder, ActionModel, BehaviorModel, IBehaviorElement, MotionType, Space, TriggerBuilder } from "./BehavioursBuilder";
+
+export class ChangeTransformOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(Object3D)
+    object?: Object3D;
+
+    @serializable(Object3D)
+    target?: Object3D;
+
+    @serializable()
+    duration: number = 1;
+
+    @serializable()
+    relativeMotion: boolean = false;
+
+    private coroutine: Generator | null = null;
+
+    private targetPos = new Vector3();
+    private targetRot = new Quaternion();
+    private targetScale = new Vector3();
+
+    private *moveToTarget() {
+
+        if (!this.target || !this.object) return;
+
+        const thisPos = getWorldPosition(this.object).clone();
+        const targetPos = getWorldPosition(this.target).clone();
+
+        const thisRot = getWorldQuaternion(this.object).clone();
+        const targetRot = getWorldQuaternion(this.target).clone();
+
+        const thisScale = getWorldScale(this.object).clone();
+        const targetScale = getWorldScale(this.target).clone();
+        
+        const dist = thisPos.distanceTo(targetPos);
+        const rotDist = thisRot.angleTo(targetRot);
+        const scaleDist = thisScale.distanceTo(targetScale);
+
+        if (dist < 0.01 && rotDist < 0.01 && scaleDist < 0.01) {
+            setWorldPosition(this.object, targetPos);
+            setWorldQuaternion(this.object, targetRot);
+            setWorldScale(this.object, targetScale);
+            this.coroutine = null;
+            return;
+        }
+
+        let t01 = 0;
+        let eased = 0;
+        while (t01 < 1) {
+
+            t01 += this.context.time.deltaTime / this.duration;
+            if (t01 > 1) t01 = 1;
+            
+            // apply ease-in-out
+            // https://easings.net/
+            eased =  t01 < 0.5 ? 4 * t01 * t01 * t01 : 1 - Math.pow(-2 * t01 + 2, 3) / 2;
+
+            this.targetPos.lerpVectors(thisPos, targetPos, eased);
+            this.targetRot.slerpQuaternions(thisRot, targetRot, eased);
+            this.targetScale.lerpVectors(thisScale, targetScale, eased);
+
+            setWorldPosition(this.object, this.targetPos);
+            setWorldQuaternion(this.object, this.targetRot);
+            setWorldScale(this.object, this.targetScale);
+
+            yield;
+        }
+
+        this.coroutine = null;
+    }
+
+    private *moveRelative() {
+        
+        if (!this.target || !this.object) return;
+
+        const thisPos = this.object.position.clone();
+        const thisRot = this.object.quaternion.clone();
+        const thisScale = this.object.scale.clone();
+
+        const posOffset = this.target.position.clone();
+        const rotOffset = this.target.quaternion.clone();
+        const scaleOffset = this.target.scale.clone();
+
+        // convert into right space
+        posOffset.applyQuaternion(this.object.quaternion);
+
+        this.targetPos.copy(this.object.position).add(posOffset);
+        this.targetRot.copy(this.object.quaternion).multiply(rotOffset);
+        this.targetScale.copy(this.object.scale).multiply(scaleOffset);
+
+        let t01 = 0;
+        let eased = 0;
+        while (t01 < 1) {
+
+            t01 += this.context.time.deltaTime / this.duration;
+            if (t01 > 1) t01 = 1;
+            
+            // apply ease-in-out
+            // https://easings.net/
+            eased =  t01 < 0.5 ? 4 * t01 * t01 * t01 : 1 - Math.pow(-2 * t01 + 2, 3) / 2;
+
+            this.object.position.lerpVectors(thisPos, this.targetPos, eased);
+            this.object.quaternion.slerpQuaternions(thisRot, this.targetRot, eased);
+            this.object.scale.lerpVectors(thisScale, this.targetScale, eased);
+
+            yield;
+        }
+
+        this.coroutine = null;
+    }   
+
+    onPointerClick() {
+        if (this.coroutine) this.stopCoroutine(this.coroutine);
+        if (!this.relativeMotion)
+            this.coroutine = this.startCoroutine(this.moveToTarget());
+        else
+            this.coroutine = this.startCoroutine(this.moveRelative());
+    }
+
+    beforeCreateDocument(ext) {
+        if (this.target && this.object && this.gameObject) {
+            const moveForward = new BehaviorModel("Move to " + this.target?.name,
+                TriggerBuilder.tapTrigger(this.gameObject),
+                ActionBuilder.transformAction(this.object, this.target, this.duration, this.relativeMotion ? Space.Relative : Space.Absolute),
+            );
+            ext.addBehavior(moveForward);
+        }
+    }
+}
+
+export class ChangeMaterialOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(Material)
+    materialToSwitch?: Material;
+
+    @serializable(Material)
+    variantMaterial?: Material;
+
+    private _objectsWithThisMaterial: Renderer[] = [];
+
+    awake() {
+        if (this.variantMaterial && this.materialToSwitch) {
+            const renderer = GameObject.findObjectsOfType(Renderer);
+            for (const rend of renderer) {
+                if (rend.sharedMaterial === this.materialToSwitch) {
+                    this._objectsWithThisMaterial.push(rend);
+                }
+            }
+        }
+    }
+
+    onPointerClick() {
+        if (!this.variantMaterial) return;
+        for (const rend of this._objectsWithThisMaterial) {
+            rend.sharedMaterial = this.variantMaterial;
+        }
+    }
+
+    private selfModel!: USDObject;
+    private targetModels: USDObject[] = [];
+
+    private static _materialTriggersPerId: { [key: string]: ChangeMaterialOnClick[] } = {}
+
+    createBehaviours(_ext: BehaviorExtension, model: USDObject, _context) {
+
+        const shouldExport = this._objectsWithThisMaterial.find(o => o.gameObject.uuid === model.uuid);
+        if (shouldExport) {
+            this.targetModels.push(model);
+        }
+        if (this.gameObject.uuid === model.uuid) {
+            this.selfModel = model;
+            if (this.materialToSwitch) {
+                if (!ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid])
+                    ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid] = [];
+                ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid].push(this);
+            }
+        }
+    }
+
+    afterCreateDocument(ext: BehaviorExtension, _context) {
+
+        if (!this.materialToSwitch) return;
+        const handlers = ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid];
+        if (handlers) {
+            const variants: { [key: string]: USDObject[] } = {}
+            for (const handler of handlers) {
+                const createdVariants = handler.createVariants();
+                if (createdVariants && createdVariants.length > 0)
+                    variants[handler.selfModel.uuid] = createdVariants;
+            }
+            const otherVariants: any[] = [];
+            for (const handler of handlers) {
+                for (const key in variants) {
+                    if (key !== handler.selfModel.uuid) {
+                        otherVariants.push(variants[key]);
+                    }
+                }
+                handler.createAndAttachBehaviors(ext, variants[handler.selfModel.uuid], otherVariants);
+            }
+        }
+        delete ChangeMaterialOnClick._materialTriggersPerId[this.materialToSwitch.uuid];
+    }
+
+    private createAndAttachBehaviors(ext: BehaviorExtension, myVariants, otherVariants) {
+        const start: ActionModel[] = [];
+        const select: ActionModel[] = [];
+
+        // the order here matters
+        for (const target of this.targetModels) {
+            const hideOriginal = ActionBuilder.fadeAction(target, 0, false);
+            select.push(hideOriginal);
+        }
+        for (const v of otherVariants) {
+            select.push(ActionBuilder.fadeAction(v, 0, false));
+        }
+        for (const v of myVariants) {
+            start.push(ActionBuilder.fadeAction(v, 0, false));
+            select.push(ActionBuilder.fadeAction(v, 0, true));
+        }
+
+        ext.addBehavior(new BehaviorModel("Select " + this.selfModel.name,
+            TriggerBuilder.tapTrigger(this.selfModel),
+            ActionBuilder.parallel(...select))
+        );
+        ext.addBehavior(new BehaviorModel("Start hidden " + this.selfModel.name,
+            TriggerBuilder.sceneStartTrigger(),
+            ActionBuilder.parallel(...start))
+        );
+    }
+
+    private createVariants() {
+        if (!this.variantMaterial) return null;
+
+        const variantModels: USDObject[] = [];
+        for (const target of this.targetModels) {
+            const variant = target.clone();
+            variant.name += " variant_" + this.variantMaterial.name;
+            variant.name = variant.name.replace(/\s/g, "_");
+            variant.material = this.variantMaterial;
+            variant.geometry = target.geometry;
+            variant.matrix = target.matrix;
+
+            if (!target.parent || !target.parent.isEmpty()) {
+                USDObject.createEmptyParent(target);
+            }
+            if (target.parent) target.parent.add(variant);
+            variantModels.push(variant);
+        }
+        return variantModels;
+    }
+}
+
+export class SetActiveOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour {
+
+    @serializable(Object3D)
+    target?: Object3D;
+
+    // TODO bring back, doesn't work yet
+    private toggleOnClick: boolean = false;
+
+    @serializable()
+    targetState: boolean = true;
+
+    @serializable()
+    hideSelf: boolean = true;
+
+    onPointerClick() {
+        if (!this.toggleOnClick && this.hideSelf)
+            this.gameObject.visible = false;
+        if (this.target)
+            this.target.visible = this.toggleOnClick ? !this.target.visible : this.targetState;
+    }
+
+    private selfModel!: USDObject;
+    private otherModel?: USDObject;
+    private toggleModel?: USDObject;
+
+    createBehaviours(_, model, _context) {
+        if (model.uuid === this.gameObject.uuid) {
+            this.selfModel = model;
+        }
+    }
+
+    private stateBeforeCreatingDocument: boolean = false;
+
+    beforeCreateDocument() {
+        this.stateBeforeCreatingDocument = this.gameObject.visible;
+        this.gameObject.visible = true;
+    }
+
+    afterCreateDocument(ext, context) {
+        if (!this.target) return;
+
+        this.otherModel = context.document.findById(this.target.uuid);
+
+        if (this.selfModel && this.otherModel) {
+            let hideClickedObject = this.hideSelf;
+            let targetState = this.targetState;
+            if (this.toggleOnClick) {
+                hideClickedObject = true;
+                targetState = !this.target.visible;
+
+                // TODO check where we have to create the clone; here it doesn't show up
+                this.toggleModel = this.selfModel.clone();
+                this.toggleModel.name += "_toggle";
+                if (this.selfModel.parent)
+                    this.selfModel.parent.add(this.toggleModel);
+            }
+
+            const sequence: ActionModel[] = [];
+            if (hideClickedObject)
+                sequence.push(ActionBuilder.fadeAction(this.selfModel, 0, false));
+            if (this.toggleModel)
+                sequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, true));
+            sequence.push(ActionBuilder.fadeAction(this.otherModel, 0, this.targetState));
+
+            ext.addBehavior(new BehaviorModel("Toggle_" + this.selfModel.name + "_hideSelf",
+                TriggerBuilder.tapTrigger(this.selfModel),
+                ActionBuilder.sequence(...sequence)
+            ));
+
+            // TODO this is relatively similar to the material variant switching logic, can we reuse that?
+            if (this.toggleOnClick && this.toggleModel) {
+                const toggleSequence: ActionModel[] = [];
+                toggleSequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, false));
+                toggleSequence.push(ActionBuilder.fadeAction(this.selfModel, 0, true));
+                toggleSequence.push(ActionBuilder.fadeAction(this.otherModel, 0, !this.targetState));
+
+                ext.addBehavior(new BehaviorModel("Toggle_" + this.selfModel.name + "_toggleSelf",
+                    TriggerBuilder.tapTrigger(this.toggleModel),
+                    ActionBuilder.sequence(...toggleSequence)
+                ));
+
+                ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name, 
+                    TriggerBuilder.sceneStartTrigger(), 
+                    ActionBuilder.fadeAction(this.toggleModel, 0, false)
+                ));
+            }
+        }
+
+        this.gameObject.visible = this.stateBeforeCreatingDocument;
+    }
+}
+
+export class HideOnStart extends Behaviour implements UsdzBehaviour {
+
+    start() {
+        this.gameObject.visible = 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)
+            ));
+    }
+
+    beforeCreateDocument() {
+        this.gameObject.visible = true;
+    }
+
+    afterCreateDocument() {
+        this.gameObject.visible = false;
+    }
+}
+
+export class EmphasizeOnClick extends Behaviour implements UsdzBehaviour {
+
+    @serializable()
+    target?: Object3D;
+
+    @serializable()
+    duration: number = 0.5;
+
+    @serializable()
+    motionType: MotionType = MotionType.bounce;
+
+    beforeCreateDocument() { }
+
+    createBehaviours(ext, model, _context) {
+        if (!this.target) return;
+
+        if (model.uuid === this.gameObject.uuid)
+        {
+            const emphasize = new BehaviorModel("emphasize " + this.name,
+                TriggerBuilder.tapTrigger(this.gameObject),
+                ActionBuilder.emphasize(this.target, this.duration, this.motionType, undefined, "basic"),
+            );
+            ext.addBehavior(emphasize);
+        }
+    }
+
+    afterCreateDocument(_ext, _context) { }
+}
+
+export class PlayAnimationOnClick extends Behaviour implements IPointerClickHandler, UsdzBehaviour, UsdzAnimation {
+
+    @serializable(Object3D)
+    target?: Object3D;
+
+    @serializable(Animator)
+    animator?: Animator;
+
+    @serializable()
+    stateName?: string;
+    
+    @serializable()
+    stateNameAfterPlaying?: string;
+
+    @serializable()
+    loopAfterPlaying: boolean = false;
+
+    onPointerClick() {
+        if (!this.target) return;
+        if (this.stateName)
+            this.animator?.play(this.stateName, 0, 0, .1);
+    }
+
+    private selfModel: any;
+
+    private stateAnimationModel: any;
+    private stateAnimation?: RegisteredAnimationInfo;
+
+    private stateAfterPlayingAnimationModel: any;
+    private stateAfterPlayingAnimation?: RegisteredAnimationInfo;
+
+    createBehaviours(_ext, model, _context) {
+        if (model.uuid === this.gameObject.uuid)
+            this.selfModel = model;
+    }
+
+    private static animationActions: ActionModel[] = [];
+
+    onAfterHierarchy() {
+        PlayAnimationOnClick.animationActions = [];
+    }
+
+    afterCreateDocument(ext, context) {
+        if (!this.stateAnimation || !this.stateAnimationModel) return;
+        const document = context.document;
+        document.traverse(model => {
+            // TODO we should probably check if a startAnimationAction already exists, and not have duplicates of identical ones;
+            // looks like otherwise we're getting some animation overlap that doesn't look good.
+            if (model.uuid === this.target?.uuid && this.stateAnimation) {
+                const sequence: IBehaviorElement[] = [];
+                let startAction = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == this.stateAnimation!.start && a.duration == this.stateAnimation!.duration);
+                if (!startAction) {
+                    startAction = ActionBuilder.startAnimationAction(model, this.stateAnimation.start, this.stateAnimation.duration) as ActionModel;
+                    PlayAnimationOnClick.animationActions.push(startAction);
+                }
+                sequence.push(startAction);
+
+                if (this.stateAfterPlayingAnimation && this.stateAfterPlayingAnimationModel) {
+                    let endAction = PlayAnimationOnClick.animationActions.find(a => a.affectedObjects == model && a.start == this.stateAfterPlayingAnimation!.start && a.duration == this.stateAfterPlayingAnimation!.duration);
+                    if (!endAction) {
+                        endAction = ActionBuilder.startAnimationAction(model, this.stateAfterPlayingAnimation.start, this.stateAfterPlayingAnimation.duration) as ActionModel;
+                        PlayAnimationOnClick.animationActions.push(endAction);
+                    }
+                    const idleAnim = ActionBuilder.sequence(endAction);
+                    if (this.loopAfterPlaying)
+                        idleAnim.makeLooping();
+                    sequence.push(idleAnim);
+                }
+                const playAnimationOnTap = new BehaviorModel("tap " + this.name + " for " + this.stateName + " on " + this.target?.name,
+                    TriggerBuilder.tapTrigger(this.selfModel),
+                    ActionBuilder.sequence(...sequence)
+                );
+                ext.addBehavior(playAnimationOnTap);
+            }
+        });
+    }
+
+    createAnimation(ext, model, _context) {
+        if (this.target && this.animator) {
+            
+            const state = this.animator?.runtimeAnimatorController?.findState(this.stateName);
+            this.stateAnimationModel = model;
+            this.stateAnimation = ext.registerAnimation(this.target, state?.motion.clip);
+
+            const stateAfter = this.animator?.runtimeAnimatorController?.findState(this.stateNameAfterPlaying);
+            this.stateAfterPlayingAnimationModel = model;
+            this.stateAfterPlayingAnimation = ext.registerAnimation(this.target, stateAfter?.motion.clip);
+        }
+    }
+
+}
+
+export class PreliminaryAction extends Behaviour {
+    getType(): string | void { }
+    @serializable(Object3D)
+    target?: Object3D;
+
+
+    getDuration(): number | void { };
+}
+
+export class PreliminaryTrigger extends Behaviour {
+
+    @serializable(PreliminaryAction)
+    target?: PreliminaryAction;
+}
+
+export class VisibilityAction extends PreliminaryAction {
+
+    //@type int
+    @serializable()
+    type: VisibilityActionType = VisibilityActionType.Hide;
+
+    @serializable()
+    duration: number = 1;
+
+    getType() {
+        switch (this.type) {
+            case VisibilityActionType.Hide: return "hide";
+            case VisibilityActionType.Show: return "show";
+        }
+    }
+
+    getDuration() {
+        return this.duration;
+    }
+}
+
+export class TapGestureTrigger extends PreliminaryTrigger {
+
+}
+
+export enum VisibilityActionType {
+    Show = 0,
+    Hide = 1,
+}