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

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

@@ -1,9 +1,8 @@
-import { Behaviour, GameObject } from "../../../../Component";
-import { USDZExporter } from "../../USDZExporter";
+import { GameObject } from "../../../../Component";
+import { IContext } from "../../../../../engine/engine_types";
 import { IUSDExporterExtension } from "../../Extension";
 import { USDObject, USDWriter } from "../../ThreeUSDZExporter";
 import { BehaviorModel } from "./BehavioursBuilder";
-import { IContext } from "../../../../../engine/engine_types";
 
 export interface UsdzBehaviour {
     createBehaviours?(ext: BehaviorExtension, model: USDObject, context: IContext): void;
@@ -11,15 +10,6 @@ export interface UsdzBehaviour {
     afterCreateDocument?(ext: BehaviorExtension, context: IContext): void;
 }
 
-export class USDZBehaviours extends Behaviour {
-    start() {
-        const exporter = GameObject.findObjectOfType(USDZExporter);
-        if (exporter) {
-            exporter.extensions.push(new BehaviorExtension());
-        }
-    }
-}
-
 export class BehaviorExtension implements IUSDExporterExtension {
 
     get extensionName(): string {
@@ -40,8 +30,8 @@ export class BehaviorExtension implements IUSDExporterExtension {
             GameObject.foreachComponent(e, (comp) => {
                 const c = comp as unknown as UsdzBehaviour;
                 if (
-                    typeof c.createBehaviours === "function" || 
-                    typeof c.beforeCreateDocument === "function" || 
+                    typeof c.createBehaviours === "function" ||
+                    typeof c.beforeCreateDocument === "function" ||
                     typeof c.afterCreateDocument === "function"
                 ) {
                     this.behaviourComponents.push(c);
@@ -66,7 +56,7 @@ export class BehaviorExtension implements IUSDExporterExtension {
         this.behaviourComponents.length = 0;
     }
 
-    onAfterHierarchy(context, writer : USDWriter) {
+    onAfterHierarchy(context, writer: USDWriter) {
         if (this.behaviours?.length) {
 
             // this.combineBehavioursWithSameTapActions();

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

@@ -7,7 +7,7 @@ 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 { USDDocument, USDObject } from "../../ThreeUSDZExporter";
 
 import { BehaviorExtension, UsdzBehaviour } from "./Behaviour";
 import { ActionBuilder, ActionModel, BehaviorModel, IBehaviorElement, MotionType, Space, TriggerBuilder } from "./BehavioursBuilder";
@@ -44,7 +44,7 @@ export class ChangeTransformOnClick extends Behaviour implements IPointerClickHa
 
         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);
@@ -63,10 +63,10 @@ export class ChangeTransformOnClick extends Behaviour implements IPointerClickHa
 
             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;
+            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);
@@ -83,7 +83,7 @@ export class ChangeTransformOnClick extends Behaviour implements IPointerClickHa
     }
 
     private *moveRelative() {
-        
+
         if (!this.target || !this.object) return;
 
         const thisPos = this.object.position.clone();
@@ -107,10 +107,10 @@ export class ChangeTransformOnClick extends Behaviour implements IPointerClickHa
 
             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;
+            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);
@@ -120,7 +120,7 @@ export class ChangeTransformOnClick extends Behaviour implements IPointerClickHa
         }
 
         this.coroutine = null;
-    }   
+    }
 
     onPointerClick() {
         if (this.coroutine) this.stopCoroutine(this.coroutine);
@@ -313,11 +313,12 @@ export class SetActiveOnClick extends Behaviour implements IPointerClickHandler,
                 hideClickedObject = true;
                 targetState = !this.target.visible;
 
-                // TODO check where we have to create the clone; here it doesn't show up
+                if (!this.selfModel.parent || this.selfModel.parent.isEmpty())
+                    USDDocument.createEmptyParent(this.selfModel);
+
                 this.toggleModel = this.selfModel.clone();
                 this.toggleModel.name += "_toggle";
-                if (this.selfModel.parent)
-                    this.selfModel.parent.add(this.toggleModel);
+                this.selfModel.parent!.add(this.toggleModel);
             }
 
             const sequence: ActionModel[] = [];
@@ -344,8 +345,8 @@ export class SetActiveOnClick extends Behaviour implements IPointerClickHandler,
                     ActionBuilder.sequence(...toggleSequence)
                 ));
 
-                ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name, 
-                    TriggerBuilder.sceneStartTrigger(), 
+                ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+                    TriggerBuilder.sceneStartTrigger(),
                     ActionBuilder.fadeAction(this.toggleModel, 0, false)
                 ));
             }
@@ -363,8 +364,8 @@ export class HideOnStart extends Behaviour implements UsdzBehaviour {
 
     createBehaviours(ext, model, _context) {
         if (model.uuid === this.gameObject.uuid)
-            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name, 
-                TriggerBuilder.sceneStartTrigger(), 
+            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+                TriggerBuilder.sceneStartTrigger(),
                 ActionBuilder.fadeAction(model, 0, false)
             ));
     }
@@ -394,8 +395,7 @@ export class EmphasizeOnClick extends Behaviour implements UsdzBehaviour {
     createBehaviours(ext, model, _context) {
         if (!this.target) return;
 
-        if (model.uuid === this.gameObject.uuid)
-        {
+        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"),
@@ -417,7 +417,7 @@ export class PlayAnimationOnClick extends Behaviour implements IPointerClickHand
 
     @serializable()
     stateName?: string;
-    
+
     @serializable()
     stateNameAfterPlaying?: string;
 
@@ -486,7 +486,7 @@ export class PlayAnimationOnClick extends Behaviour implements IPointerClickHand
 
     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);

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

@@ -74,7 +74,7 @@ function resolve(targetObject: Target, document: USDDocument): string {
             let obj = targetObject[i];
             if (typeof obj === "string")
                 str += obj;
-            else if ( typeof obj === "object") {
+            else if (typeof obj === "object") {
                 //@ts-ignore
                 if (obj.isObject3D) {
                     //@ts-ignore
@@ -436,7 +436,7 @@ export class ActionBuilder {
         act.tokenId = "Emphasize";
         act.duration = duration;
         act.style = style ?? "basic";
-        act.motionType = MotionType[motionType]; 
+        act.motionType = MotionType[motionType];
         act.moveDistance = moveDistance;
         return act;
     }

package/src/engine-components/ui/Canvas.ts

@@ -11,6 +11,7 @@ import { EventSystem } from "./EventSystem";
 import * as ThreeMeshUI from 'three-mesh-ui'
 import { getParam } from "../../engine/engine_utils";
 import { LayoutGroup } from "./Layout";
+import { Mathf } from "../../engine/engine_math";
 
 export enum RenderMode {
     ScreenSpaceOverlay = 0,
@@ -127,6 +128,9 @@ export class Canvas extends UIRootComponent implements ICanvas {
     awake() {
         //@ts-ignore
         this.shadowComponent = this.gameObject;
+        this.previousParent = this.gameObject.parent;
+        if (debugLayout)
+            console.log("Canvas.Awake()", this.previousParent?.name + "/" + this.gameObject.name)
         super.awake();
     }
 
@@ -137,7 +141,8 @@ export class Canvas extends UIRootComponent implements ICanvas {
     onEnable() {
         super.onEnable();
         this._updateRenderSettingsRoutine = undefined;
-        this.onRenderSettingsChanged();
+        this._lastMatrixWorld = new Matrix4();
+        this.onUpdateRenderMode();
         document.addEventListener("resize", this._boundRenderSettingsChanged);
         // We want to run AFTER all regular onBeforeRender callbacks
         this.context.pre_render_callbacks.push(this.onBeforeRenderRoutine);
@@ -185,9 +190,11 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onBeforeRenderRoutine = () => {
+        this.previousParent = this.gameObject.parent;
+        // console.log(this.previousParent?.name + "/" + this.gameObject.name);
+
         if (this.renderOnTop) {
             // This is just a test but in reality it should be combined with all world canvases with render on top in one render pass
-            this.previousParent = this.gameObject.parent;
             this.gameObject.removeFromParent();
         }
         else {
@@ -201,8 +208,13 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onAfterRenderRoutine = () => {
-        if (this.renderOnTop && this.previousParent && this.context.mainCamera) {
-            this.previousParent.add(this.gameObject);
+        if ((this.screenspace || this.renderMode) && this.previousParent && this.context.mainCamera) {
+            if (this.screenspace) {
+                const camObj = this.context.mainCamera;
+                camObj?.add(this.gameObject);
+            } else {
+                this.previousParent.add(this.gameObject);
+            }
             this.context.renderer.autoClear = false;
             this.context.renderer.clearDepth();
             this.onUpdateRenderMode(true);
@@ -212,6 +224,7 @@ export class Canvas extends UIRootComponent implements ICanvas {
             EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
             this.context.renderer.render(this.gameObject, this.context.mainCamera);
             this.context.renderer.autoClear = true;
+            this.previousParent.add(this.gameObject);
         }
         this._lastMatrixWorld?.copy(this.gameObject.matrixWorld);
     }
@@ -278,7 +291,10 @@ export class Canvas extends UIRootComponent implements ICanvas {
         }
         this._activeRenderMode = this._renderMode;
         let camera = this.context.mainCameraComponent;
-        let planeDistance: number = camera?.farClipPlane ?? 100;
+        let planeDistance: number = 10;
+        if (camera && camera.nearClipPlane > 0 && camera.farClipPlane > 0) {
+            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .5);
+        }
         if (this._renderMode === RenderMode.ScreenSpaceCamera) {
             if (this.worldCamera)
                 camera = this.worldCamera as Camera;
@@ -295,15 +311,12 @@ export class Canvas extends UIRootComponent implements ICanvas {
                 // showBalloonWarning("Screenspace Canvas is not supported yet. Please use worldspace");
                 if (!camera) return;
 
-                const canvas = this.gameObject;
-                const camObj = camera.gameObject;
-                camObj?.add(canvas);
                 // we move the plane SLIGHTLY closer to be sure not to cull the canvas
-                const plane = planeDistance - .1;
-                canvas.position.x = 0;
-                canvas.position.y = 0;
-                canvas.position.z = -plane;
-                canvas.quaternion.identity();
+                const plane = planeDistance + .01;
+                this.gameObject.position.x = 0;
+                this.gameObject.position.y = 0;
+                this.gameObject.position.z = -plane;
+                this.gameObject.quaternion.identity();
 
                 const rect = this.gameObject.getComponent(RectTransform)!;
                 let hasChanged = false;
@@ -316,10 +329,10 @@ export class Canvas extends UIRootComponent implements ICanvas {
 
                 const vFOV = camera.fieldOfView! * Math.PI / 180;
                 const h = 2 * Math.tan(vFOV / 2) * Math.abs(plane);
-                canvas.scale.x = h / this.context.domHeight;
-                canvas.scale.y = h / this.context.domHeight;
+                this.gameObject.scale.x = h / this.context.domHeight;
+                this.gameObject.scale.y = h / this.context.domHeight;
                 // Set scale.z, otherwise small offsets in screenspace mode have different visual results based on export scale and other settings
-                canvas.scale.z = .01;
+                this.gameObject.scale.z = .01;
 
                 if (hasChanged) {
                     rect.sizeDelta.x = this.context.domWidth;

package/src/engine-components/ui/Layout.ts

@@ -164,7 +164,8 @@ export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
         actualWidth -= this.padding.horizontal;
         actualHeight -= this.padding.vertical;
 
-        // console.log(rt.name, "width=" + totalWidth + ", height=" + totalHeight)
+        // if (rect.name === "Title")
+        //     console.log(rect.name, "width=" + totalWidth + ", height=" + totalHeight, rect.anchoredPosition.x)
 
         const paddingAxis = axis === Axis.Horizontal ? this.padding.horizontal : this.padding.vertical;
         const isHorizontal = axis === Axis.Horizontal;
@@ -243,7 +244,7 @@ export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
         }
 
         // Apply layout
-        let k = 0;
+        let k = 1;
         for (let i = 0; i < this.gameObject.children.length; i++) {
             const ch = this.gameObject.children[i];
             const rt = GameObject.getComponent(ch, RectTransform);
@@ -269,10 +270,14 @@ export abstract class HorizontalOrVerticalLayoutGroup extends LayoutGroup {
                 let halfSize = size * .5;
                 start += halfSize;
 
+                // TODO: this isnt correct yet!
                 if (forceExpandSize) {
-                    let preferredStart = sizePerChild * (k + 1) - sizePerChild * .5;
-                    if (preferredStart > start)
-                        start = preferredStart;
+                    // this is the center of the cell
+                    let preferredStart = sizePerChild * k - sizePerChild * .5;
+                    if (preferredStart > start) {
+                        start = preferredStart - sizePerChild * .5 + size + this.padding.left;
+                        start -= halfSize;
+                    }
                 }
 
                 let value = start;

package/src/engine-components/ui/RectTransform.ts

@@ -31,7 +31,7 @@ const tempQuaternion = new Quaternion();
 
 export class RectTransform extends BaseUIComponent implements IRectTransform, IRectTransformChangedReceiver {
 
-    offset: number = 0.1;
+    offset: number = .01;
 
     // @serializable(Object3D)
     // root? : Object3D;
@@ -103,7 +103,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
     awake() {
         super.awake();
         this.lastMatrix = new Matrix4();
-        this.rectBlock = new Object3D();;
+        this.rectBlock = new Object3D();
+        // Is this legacy? Not sure if this is still needed
         this.rectBlock.position.z = .1;
         this.rectBlock.name = this.name;
 
@@ -116,6 +117,8 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         onChange(this, "_anchoredPosition", () => { this.markDirty(); });
         onChange(this, "sizeDelta", () => { this.markDirty(); });
         onChange(this, "pivot", () => { this.markDirty(); });
+        onChange(this, "anchorMin", () => { this.markDirty(); });
+        onChange(this, "anchorMax", () => { this.markDirty(); });
 
         // When exported with an anchored position offset we remove it here 
         // because it would otherwise be applied twice when the anchoring is animated
@@ -191,9 +194,10 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
 
         const uiobject = this.shadowComponent;
         if (!uiobject) return;
-        if (!this.gameObject.parent) return;
-        this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent, RectTransform) as RectTransform;
-
+        if (this.gameObject.parent)
+            this._parentRectTransform = GameObject.getComponentInParent(this.gameObject.parent, RectTransform) as RectTransform;
+        else
+            this._parentRectTransform = undefined;
         this._transformNeedsUpdate = false;
         this.lastMatrix.copy(this.gameObject.matrix);
 
@@ -229,7 +233,7 @@ export class RectTransform extends BaseUIComponent implements IRectTransform, IR
         else {
             // We have to rotate the canvas when it's in worldspace
             const canvas = this.Root as any as ICanvas;
-            if (canvas && !canvas.screenspace) uiobject.rotation.y = Math.PI;
+            if (!canvas.screenspace) uiobject.rotation.y = Math.PI;
         }
 
         // iterate other components on this object that might need to know about the transform change