@needle-tools/engine 3.9.1-alpha → 3.10.0-beta

package/src/engine/engine_mainloop_utils.ts

@@ -5,6 +5,7 @@ import { CubeCamera, Object3D, Scene, WebGLCubeRenderTarget } from 'three';
 import { IComponent, IContext } from './engine_types';
 import { isActiveSelf } from './engine_gameobject';
 import { ContextRegistry } from "./engine_context_registry";
+import { showBalloonWarning, isDevEnvironment, showBalloonMessage, LogType } from "./debug";
 
 const debug = getParam("debugnewscripts");
 const debugHierarchy = getParam("debughierarchy");
@@ -171,8 +172,7 @@ export function processStart(context: IContext, object?: Object3D) {
             // keep them in queue until script has started
             // call awake if the script was inactive before
             utils.safeInvoke(script.__internalAwake.bind(script));
-            if(script.enabled)
-            {
+            if (script.enabled) {
                 utils.safeInvoke(script.__internalEnable.bind(script));
                 // now call start
                 utils.safeInvoke(script.__internalStart.bind(script));
@@ -232,8 +232,13 @@ export function updateIsActive(obj?: Object3D) {
     const activeSelf = isActiveSelf(obj);
     const wasSuccessful = updateIsActiveInHierarchyRecursiveRuntime(obj, activeSelf, true);
     if (!wasSuccessful) {
-        console.error("Failed to update active state in hierarchy of \"" + obj.name + "\"", obj);
+        if (debug || isDevEnvironment()) {
+            console.error("Error updating hierarchy\nDo you have circular references in your project? <a target=\"_blank\" href=\"https://docs.needle.tools/circular-reference\"> Click here for more information.", obj)
+        }
+        else
+            console.error("Failed to update active state in hierarchy of \"" + obj.name + "\"", obj);
         console.warn(" ↑ this error might be caused by circular references. Please make sure you don't have files with circular references (e.g. one GLB 1 is loading GLB 2 which is then loading GLB 1 again).")
+
     }
 }
 

package/src/engine/engine_networking_auto.ts

@@ -1,6 +1,6 @@
 import { getParam } from "./engine_utils";
-import { Component } from "../engine-components/Component";
-import { RoomEvents } from "./engine_networking";
+import { isDevEnvironment } from "./debug";
+import { IComponent } from "./engine_types";
 
 const debug = getParam("debugautosync");
 
@@ -8,7 +8,7 @@ const $syncerId = Symbol("syncerId");
 class ComponentsSyncerManager {
     private _syncers: { [key: string]: ComponentPropertiesSyncer } = {};
 
-    getOrCreateSyncer(comp: Component): ComponentPropertiesSyncer | null {
+    getOrCreateSyncer(comp: IComponent): ComponentPropertiesSyncer | null {
         if (!comp.guid) return null;
         if (this._syncers[comp.guid]) return this._syncers[comp.guid];
         const syncer = new ComponentPropertiesSyncer(comp);
@@ -28,9 +28,9 @@ const syncerHandler = new ComponentsSyncerManager();
  */
 class ComponentPropertiesSyncer {
 
-    comp: Component;
+    comp: IComponent;
 
-    constructor(comp: Component) {
+    constructor(comp: IComponent) {
         // console.log("CREATE NEW SYNC", comp.name, comp.guid);
         this.comp = comp;
     }
@@ -115,8 +115,7 @@ class ComponentPropertiesSyncer {
         if (!this.comp) return;
         const guid = val.guid;
         if (guid && guid !== this.comp.guid) return;
-        if (debug)
-            console.log("RECEIVED", this.comp.name, this.comp.guid, val);
+        if (debug) console.log("RECEIVED", this.comp.name, this.comp.guid, val);
         try {
             this._isReceiving = true;
             for (const key in val) {
@@ -124,6 +123,7 @@ class ComponentPropertiesSyncer {
                 // TODO: maybe use serializable here?!
                 const value = val[key];
                 this.comp[key] = value;
+                if(debug) console.log("SET", key, value);
             }
         }
         catch (err) {
@@ -164,13 +164,16 @@ function testValueChanged(newValue, previousValue): boolean {
             // }
         }
         else if (typeof newValue === "object" && typeof previousValue === "object") {
-            // do we want to traverse / recursively check if anything changed???
-            for (const key of Object.keys(newValue)) {
-                if (newValue[key] !== previousValue[key]) {
-                    valueChanged = true;
-                    break;
-                }
-            }
+            valueChanged = true;
+            // The following code doesnt work because the object is a reference type
+            // To properly detect changes we would have to detect assignments for each property #
+            // OR keep a copy of the previous object
+            // for (const key of Object.keys(newValue)) {
+            //     if (newValue[key] !== previousValue[key]) {
+            //         valueChanged = true;
+            //         break;
+            //     }
+            // }
         }
     }
     return valueChanged;
@@ -203,14 +206,17 @@ export declare type SyncFieldOptions = {
 export declare type FieldChangedCallbackFn = (newValue: any, previousValue: any) => void | boolean;
 
 /**
- * Decorate a field to be automatically networked synced
+ * **Decorate a field to be automatically networked synced**  
+ * *Primitive* values are all automatically synced (like string, boolean, number).   
+ * For *arrays or objects* make sure to re-assign them (e.g. `this.mySyncField = this.mySyncField`) to trigger an update
+ * 
  * @param onFieldChanged name of a callback function that will be called when the field is changed.
  * You can also pass in a function like so: syncField(myClass.prototype.myFunctionToBeCalled)  
  * This function may return false to prevent notifyChanged from being called
  * (for example a networked color is sent as a number and may be converted to a color in the receiver again)
  * Parameters: (newValue, previousValue)
  */
-export const syncField = function(onFieldChanged?: string | FieldChangedCallbackFn) {
+export const syncField = function (onFieldChanged?: string | FieldChangedCallbackFn) {
 
     return function (target: any, propertyKey: string) {
 
@@ -225,6 +231,11 @@ export const syncField = function(onFieldChanged?: string | FieldChangedCallback
 
         const t = target;
         const internalAwake = t.__internalAwake;
+        if (typeof internalAwake !== "function") {
+            if (debug || isDevEnvironment())
+                console.error("@syncField can currently only used on Needle Engine Components, custom object of type \"" + target?.constructor?.name + "\" is not supported", target);
+            return;
+        }
         if (debug)
             console.log(propertyKey);
         const backingFieldName = Symbol(propertyKey);
@@ -234,19 +245,34 @@ export const syncField = function(onFieldChanged?: string | FieldChangedCallback
                 return;
             }
             this[backingFieldName] = this[propertyKey];
-            internalAwake.call(this);
 
             syncer = syncerHandler.getOrCreateSyncer(this);
 
             const desc = Object.getOwnPropertyDescriptor(this, propertyKey);
             if (desc?.set === undefined) {
+                let invokingCallback = false;
                 Object.defineProperty(this, propertyKey, {
                     set: function (value) {
                         const oldValue = this[backingFieldName];
                         this[backingFieldName] = value;
-                        if (testValueChanged(value, oldValue)) {
-                            if (fn?.call(this, value, oldValue) !== false)
-                                getSyncer(this)?.notifyChanged(propertyKey, value);
+                        // Prevent recursive calls when object is assigned in callback
+                        if (invokingCallback) {
+                            if (isDevEnvironment())
+                                console.warn("Recursive call detected", propertyKey);
+                            return;
+                        }
+                        invokingCallback = true;
+                        try {
+                            const valueChanged = testValueChanged(value, oldValue);
+                            if (debug) console.log("SyncField assignment", propertyKey, "changed?", valueChanged, value);
+                            if (valueChanged) {
+                                if (fn?.call(this, value, oldValue) !== false) {
+                                    getSyncer(this)?.notifyChanged(propertyKey, value);
+                                }
+                            }
+                        }
+                        finally {
+                            invokingCallback = false;
                         }
                     },
                     get: function () {
@@ -258,7 +284,7 @@ export const syncField = function(onFieldChanged?: string | FieldChangedCallback
             }
 
             syncer?.init(this);
-
+            internalAwake.call(this);
         }
 
         const internalDestroy = t.__internalDestroy;
@@ -281,7 +307,7 @@ export const sync = function (_options?: SyncOptions) {
 
     return function <T>(target: any, _propertyKey: string, descriptor: PropertyDescriptor) {
         // override awake
-        const comp = target as Component;
+        const comp = target as IComponent;
         let syncer: ComponentPropertiesSyncer | null;
         const internalAwake = comp.__internalAwake.bind(comp);
         comp.__internalAwake = function () {

package/src/engine/engine_types.ts

@@ -123,12 +123,15 @@ export declare interface IGameObject extends Object3D {
     getComponentsInParent<T>(type: Constructor<T>, arr?: T[]): Array<T>;
 }
 
-export interface IComponent {
-    get isComponent(): boolean;
+export interface IHasGuid {
+    guid: string;
+}
 
+export interface IComponent extends IHasGuid {
+    get isComponent(): boolean;
 
     gameObject: IGameObject;
-    guid: string;
+    // guid: string;
     enabled: boolean;
     sourceId?: SourceIdentifier;
 

package/src/engine-components/DragControls.ts

@@ -13,6 +13,8 @@ import { nameofFactory } from "../engine/engine_utils";
 import { InstancingUtil } from "../engine/engine_instancing";
 import { OrbitControls } from "./OrbitControls";
 import { BufferGeometry, Camera, Color, Line, LineBasicMaterial, Matrix4, Mesh, MeshBasicMaterial, Object3D, Plane, Ray, Raycaster, SphereGeometry, Vector2, Vector3 } from "three";
+import { ObjectRaycaster } from "./ui/Raycaster";
+import { serializable } from "../engine/engine_serialization_decorator";
 
 const debug = false;
 
@@ -37,6 +39,13 @@ export class DragControls extends Interactable implements IPointerDownHandler, I
     private static _active: number = 0;
     public static get HasAnySelected(): boolean { return this._active > 0; }
 
+    /** Show's drag gizmos when enabled */
+    @serializable()
+    public showGizmo: boolean = true;
+
+    /** When enabled DragControls will drag vertically when the object is viewed from a low angle */
+    @serializable()
+    public useViewAngle: boolean = true;
 
     public transformSelf: boolean = true;
     // public transformGroup: boolean = true;
@@ -47,6 +56,7 @@ export class DragControls extends Interactable implements IPointerDownHandler, I
 
     private selectStartEventListener: ((controls: DragControls, args: SelectArgs) => void)[] = [];
     private selectEndEventListener: Array<Function> = [];
+    private _dragHelper: DragHelper | null = null;
 
     constructor() {
         super();
@@ -66,11 +76,13 @@ export class DragControls extends Interactable implements IPointerDownHandler, I
         }
     }
 
-    private _dragHelper: DragHelper | null = null;
 
 
     start() {
         this.orbit = GameObject.findObjectOfType(OrbitControls, this.context);
+        if (!this.gameObject.getComponentInParent(ObjectRaycaster)) {
+            this.gameObject.addNewComponent(ObjectRaycaster);
+        }
     }
 
     private static lastHovered: Object3D;
@@ -234,6 +246,8 @@ export class DragControls extends Interactable implements IPointerDownHandler, I
 
     private onUpdateDrag() {
         if (!this._dragHelper) return;
+        this._dragHelper.showGizmo = this.showGizmo;
+        this._dragHelper.useViewAngle = this.useViewAngle;
 
         this._dragHelper.onUpdate(this.context);
         for (const rb of this._draggingRigidbodies) {
@@ -279,6 +293,9 @@ export class DragControls extends Interactable implements IPointerDownHandler, I
 
 class DragHelper {
 
+    showGizmo: boolean = true;
+    useViewAngle: boolean = true;
+
     public get hasSelected(): boolean {
         return this._selected !== null && this._selected !== undefined;
     }
@@ -416,7 +433,10 @@ class DragHelper {
             const lookDot = Math.abs(lookDirection.dot(this._groundOffsetVector));
 
             const switchModeKeyPressed = this._context?.input.isKeyPressed(mainKey) || this._context?.input.isKeyPressed(secondaryKey);
-            const dragOnGroundPlane = !isRotating && lookDot > .2 && !switchModeKeyPressed && this._context!.input.getPointerPressedCount() <= 1;
+            let dragOnGroundPlane = !this.useViewAngle || lookDot > .2;
+            if (isRotating || switchModeKeyPressed || this._context!.input.getPointerPressedCount() > 1) {
+                dragOnGroundPlane = false;
+            }
             const changed = this._didDragOnGroundPlaneLastFrame !== dragOnGroundPlane;
             this._didDragOnGroundPlaneLastFrame = dragOnGroundPlane;
 
@@ -477,8 +497,9 @@ class DragHelper {
             this._groundLine.scale.y = this._groundDistance;
         }
         else this._groundLine.scale.y = 1000;
+        this._groundLine.visible = this.showGizmo;
 
-        this._groundMarker.visible = pointOnPlane !== null;
+        this._groundMarker.visible = pointOnPlane !== null && this.showGizmo;
         if (pointOnPlane) {
             const s = getWorldPosition(this._camera).distanceTo(pointOnPlane) * .01;
             this._groundMarker.scale.set(s, s, s);

package/src/engine-components/timeline/TimelineTracks.ts

@@ -331,9 +331,19 @@ export class AnimationTrackHandler extends TrackHandler {
 
                 let handleLoop = isInTimeRange;
                 if (doPreExtrapolate) {
-                    if (preExtrapolation !== Models.ClipExtrapolation.Hold) {
-                        time += model.start;
-                        handleLoop = true;
+                    switch (preExtrapolation) {
+                        case Models.ClipExtrapolation.Hold:
+                            // Nothing to do
+                            break;
+                        case Models.ClipExtrapolation.Loop:
+                            // TODO: this is not correct yet
+                            time += model.start; 
+                            handleLoop = true;
+                            break;
+                        default:
+                            time += model.start;
+                            handleLoop = true;
+                            break;
                     }
                 }
 
@@ -341,6 +351,8 @@ export class AnimationTrackHandler extends TrackHandler {
                 let t = this.getClipTime(time, model);
                 let loops = 0;
                 const duration = clipModel.duration;
+                // This is the actual duration of the clip in the timeline (with clipping and scale)
+                // const clipDuration = (model.end - model.start) * model.timeScale;
 
                 if (doPreExtrapolate) {
                     if (preExtrapolation === Models.ClipExtrapolation.Hold) {
@@ -358,16 +370,21 @@ export class AnimationTrackHandler extends TrackHandler {
                     }
                 }
                 else if (!isInTimeRange) {
-                    switch (postExtrapolation) {
-                        case Models.ClipExtrapolation.Loop:
-                            t %= duration;
-                            break;
-                        case Models.ClipExtrapolation.PingPong:
-                            const loops = Math.floor(t / duration);
-                            const invert = loops % 2 !== 0;
-                            t %= duration;
-                            if (invert) t = duration - t;
-                            break;
+                    if (didPostExtrapolate) {
+                        switch (postExtrapolation) {
+                            case Models.ClipExtrapolation.Hold:
+                                t = this.getClipTime(model.end, model);
+                                break;
+                            case Models.ClipExtrapolation.Loop:
+                                t %= duration;
+                                break;
+                            case Models.ClipExtrapolation.PingPong:
+                                const loops = Math.floor(t / duration);
+                                const invert = loops % 2 !== 0;
+                                t %= duration;
+                                if (invert) t = duration - t;
+                                break;
+                        }
                     }
                 }
 

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

@@ -190,7 +190,15 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     onBeforeRenderRoutine = () => {
-        if(this.context.isInVR) return;
+
+        if (this.context.isInVR) {
+            // TODO TMUI @swingingtom - For VR this is so we don't have text clipping
+            this.shadowComponent?.updateMatrixWorld(true);
+            this.shadowComponent?.updateWorldMatrix(true, true);
+            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
+            return;
+        }
+
         this.previousParent = this.gameObject.parent;
         // console.log(this.previousParent?.name + "/" + this.gameObject.name);
 

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

@@ -103,7 +103,9 @@ export class Text extends Graphic implements IHasAlphaFactor {
     }
 
     onBeforeRender(): void {
-        if (this.uiObject && (this.Root as any as ICanvas).screenspace) {
+        // TODO TMUI @swingingtom this is so we don't have text clipping
+        if (this.uiObject && (this.Canvas?.screenspace || this.context.isInVR)) 
+        {
             this.updateOverflow();
         }
     }

package/src/engine-components/webxr/WebXR.ts

@@ -604,6 +604,12 @@ export class WebAR {
 
         if (!this.sessionRoot || this.sessionRoot.destroyed || !this.sessionRoot.activeAndEnabled)
             this.sessionRoot = GameObject.findObjectOfType(WebARSessionRoot, context);
+        if (!this.sessionRoot) {
+            // TODO: adding it on the scene directly doesnt work (probably because then everything in the scene is disabled including this component). See code a bit furhter below where we add this component to a temporary object inside the scene
+            const obj = this.webxr.gameObject;
+            this.sessionRoot = GameObject.addNewComponent(obj, WebARSessionRoot);
+            console.warn("WebAR: No ARSessionRoot found, creating one automatically on the WebXR object");
+        }
 
         this.previousBackground = context.scene.background;
         this.previousEnvironment = context.scene.environment;