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

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

@@ -2,13 +2,13 @@ import { onChange, updateRenderSettings as updateRenderSettingsRecursive } from
 import { serializable } from "../../engine/engine_serialization_decorator";
 import { FrameEvent } from "../../engine/engine_setup";
 import { BaseUIComponent, UIRootComponent } from "./BaseUIComponent";
-import { Mathf } from "../../engine/engine_math";
-import * as THREE from "three";
-import { getComponentsInChildren } from "../../engine/engine_components";
-import { IComponent } from "../../engine/engine_types";
 import { GameObject } from "../Component";
-import { showBalloonMessage, showBalloonWarning } from "../../engine/debug";
 import { Object3D } from "three";
+import { RectTransform } from "./RectTransform";
+import { ICanvas } from "./Interfaces";
+import { Camera } from "../Camera";
+import { EventSystem } from "./EventSystem";
+import * as ThreeMeshUI from 'three-mesh-ui'
 
 export enum RenderMode {
     ScreenSpaceOverlay = 0,
@@ -17,7 +17,11 @@ export enum RenderMode {
     Undefined = -1,
 }
 
-export class Canvas extends UIRootComponent {
+export class Canvas extends UIRootComponent implements ICanvas {
+
+    get screenspace(): any {
+        return this.renderMode !== RenderMode.WorldSpace;
+    }
 
     @serializable()
     set renderOnTop(val: boolean) {
@@ -27,8 +31,15 @@ export class Canvas extends UIRootComponent {
         this._renderOnTop = val;
         this.onRenderSettingsChanged();
     }
-    get renderOnTop() { return this._renderOnTop; }
-    private _renderOnTop: boolean = false;
+    get renderOnTop() {
+        if (this._renderOnTop !== undefined) return this._renderOnTop;
+        if (this.screenspace) {
+            // Render ScreenSpaceOverlay always on top
+            if (this._renderMode === RenderMode.ScreenSpaceOverlay) return true;
+        }
+        return false;
+    }
+    private _renderOnTop: boolean | undefined;
 
     @serializable()
     set depthWrite(val: boolean) {
@@ -99,7 +110,14 @@ export class Canvas extends UIRootComponent {
         this._scaleFactor = val;
     }
 
+    @serializable(Camera)
+    worldCamera?: Camera;
+
+    @serializable()
+    planeDistance: number = -1;
+
     awake() {
+        //@ts-ignore
         this.shadowComponent = this.gameObject;
         super.awake();
     }
@@ -108,34 +126,59 @@ export class Canvas extends UIRootComponent {
         super.onEnable();
         this._updateRenderSettingsRoutine = undefined;
         this.onRenderSettingsChanged();
+        document.addEventListener("resize", this._boundRenderSettingsChanged);
+        // We want to run AFTER all regular onBeforeRender callbacks
+        this.context.pre_render_callbacks.push(this.onBeforeRenderRoutine);
+        this.context.post_render_callbacks.push(this.onAfterRenderRoutine);
+    }
+
+    onDisable(): void {
+        super.onDisable();
+        document.removeEventListener("resize", this._boundRenderSettingsChanged);
+        // Remove callbacks
+        const preRenderIndex = this.context.pre_render_callbacks.indexOf(this.onBeforeRenderRoutine);
+        if (preRenderIndex !== -1) {
+            this.context.pre_render_callbacks.splice(preRenderIndex, 1);
+        }
+        const postRenderIndex = this.context.post_render_callbacks.indexOf(this.onAfterRenderRoutine);
+        if (postRenderIndex !== -1) {
+            this.context.post_render_callbacks.splice(postRenderIndex, 1);
+        }
     }
 
-    private previousAspect: number = -1;
+    private _boundRenderSettingsChanged = this.onRenderSettingsChanged.bind(this);
+
     private previousParent: Object3D | null = null;
 
-    onBeforeRender() {
-        if (this.isScreenSpace && this.context.mainCameraComponent && this.context.mainCameraComponent.aspect !== this.previousAspect) {
-            this.previousAspect = this.context.mainCameraComponent.aspect;
-            this.updateRenderMode();
-        }
-        else if(this.renderOnTop){
+    onBeforeRenderRoutine = () => {
+        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 {
+            this.onUpdateRenderMode();
+            // TODO: we might need to optimize this. This is here to make sure the TMUI text clipping matrices are correct. Ideally the text does use onBeforeRender and apply the clipping matrix there so we dont have to force update all the matrices here
+            this.shadowComponent?.updateMatrixWorld(true);
+            this.shadowComponent?.updateWorldMatrix(true, true);
+            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
+        }
     }
 
-    onAfterRender(): void {
+    onAfterRenderRoutine = () => {
         if (this.renderOnTop && this.previousParent && this.context.mainCamera) {
             this.previousParent.add(this.gameObject);
             this.context.renderer.autoClear = false;
             this.context.renderer.clearDepth();
+            this.onUpdateRenderMode(true);
+            this.shadowComponent?.updateMatrixWorld(true);
+            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
             this.context.renderer.render(this.gameObject, this.context.mainCamera);
             this.context.renderer.autoClear = true;
         }
     }
 
-    applyRenderSettings(){
+    applyRenderSettings() {
         this.onRenderSettingsChanged();
     }
 
@@ -149,7 +192,7 @@ export class Canvas extends UIRootComponent {
         yield;
         this._updateRenderSettingsRoutine = undefined;
         if (this.shadowComponent) {
-            this.updateRenderMode();
+            this.onUpdateRenderMode();
             // this.onWillUpdateRenderSettings();
             updateRenderSettingsRecursive(this.shadowComponent, this);
             for (const ch of GameObject.getComponentsInChildren(this.gameObject, BaseUIComponent)) {
@@ -159,44 +202,65 @@ export class Canvas extends UIRootComponent {
     }
 
     private _activeRenderMode: RenderMode = -1;
+    private _lastWidth: number = -1;
+    private _lastHeight: number = -1;
 
-    private get isScreenSpace(): boolean {
-        return this._activeRenderMode === RenderMode.ScreenSpaceCamera || this._activeRenderMode === RenderMode.ScreenSpaceOverlay;
-    }
+    private onUpdateRenderMode(force: boolean = false) {
+        if (!force) {
+            if (this._renderMode === this._activeRenderMode && this._lastWidth === this.context.domWidth && this._lastHeight === this.context.domHeight) {
+                return;
+            }
+        }
+        this._activeRenderMode = this._renderMode;
+        let camera = this.context.mainCameraComponent;
+        let planeDistance: number = camera?.farClipPlane ?? 100;
+        if (this._renderMode === RenderMode.ScreenSpaceCamera) {
+            if (this.worldCamera)
+                camera = this.worldCamera as Camera;
+            if (this.planeDistance > 0)
+                planeDistance = this.planeDistance;
+        }
 
-    private updateRenderMode() {
-        if (this.renderMode === this._activeRenderMode) return;
-        switch (this.renderMode) {
+        switch (this._renderMode) {
             case RenderMode.ScreenSpaceOverlay:
             case RenderMode.ScreenSpaceCamera:
-                showBalloonWarning("Screenspace Canvas is not supported yet. Please use worldspace");
-                const camera = this.context.mainCameraComponent;
+                this._lastWidth = this.context.domWidth;
+                this._lastHeight = this.context.domHeight;
+
+                // showBalloonWarning("Screenspace Canvas is not supported yet. Please use worldspace");
                 if (!camera) return;
+
                 const canvas = this.gameObject;
                 const camObj = camera.gameObject;
                 camObj?.add(canvas);
-                const pos = camera.farClipPlane;
+                // 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 = -pos;
+                canvas.position.z = -plane;
+                canvas.quaternion.identity();
 
-                // console.log(this.shadowComponent)
+                const rect = this.gameObject.getComponent(RectTransform)!;
 
-                if (camera.fieldOfView) {
-                    const w = Math.tan(Mathf.toRadians(camera.fieldOfView) * pos) * (camera.aspect * 1.333333);
-                    const h = w * (this.context.domHeight / this.context.domWidth);
-                    canvas.scale.x = -w;
-                    canvas.scale.y = h;
+                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;
+                // Set scale.z, otherwise small offsets in screenspace mode have different visual results based on export scale and other settings
+                canvas.scale.z = .01;
+                rect.sizeDelta.x = this.context.domWidth;
+                rect.sizeDelta.y = this.context.domHeight;
+                rect?.markDirty();
 
-                }
-                // const rects = this.gameObject.getComponentsInChildren(BaseUIComponent);
-                // for (const rect of rects) {
-                //     rect.set({ width: this.context.domWidth * .5, height: 100 })
-                // }
+
+                // this.context.scene.add(this.gameObject)
+                // this.gameObject.scale.multiplyScalar(.01);
+                // this.gameObject.position.set(0,0,0);
 
                 break;
             case RenderMode.WorldSpace:
-
+                this._lastWidth = -1;
+                this._lastHeight = -1;
                 break;
         }
     }

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

@@ -7,7 +7,7 @@ import { Context } from "../../engine/engine_setup";
 import { OrbitControls } from "../OrbitControls";
 import { IPointerEventHandler, PointerEventData } from "./PointerEvents";
 import { ObjectRaycaster, Raycaster } from "./Raycaster";
-import { InputEvents } from "../../engine/engine_input";
+import { InputEvents, PointerEventArgs } from "../../engine/engine_input";
 import { Object3D } from "three";
 import { ICanvasGroup, IGraphic } from "./Interfaces";
 import { getParam } from "../../engine/engine_utils";
@@ -22,6 +22,12 @@ export enum EventSystemEvents {
     AfterHandleInput = "AfterHandleInput",
 }
 
+export declare type AfterHandleInputEvent = {
+    sender: EventSystem,
+    args: PointerEventData,
+    hasActiveUI: boolean
+}
+
 export class EventSystem extends Behaviour {
 
 
@@ -249,16 +255,16 @@ export class EventSystem extends Behaviour {
         if (!hits) return;
         this.lastPointerEvent = args;
 
-        const evt = {
+        const evt : AfterHandleInputEvent = {
             sender: this,
             args: args,
             hasActiveUI: this.currentActiveMeshUIComponents.length > 0,
         }
-        if(debug && args.isClicked)
-            showBalloonMessage("EventSystem: " +  args.pointerId + " - " + this.context.time.frame + " - Up:" + args.isUp + ", Down:" + args.isDown)
+        if (debug && args.isClicked)
+            showBalloonMessage("EventSystem: " + args.pointerId + " - " + this.context.time.frame + " - Up:" + args.isUp + ", Down:" + args.isDown)
         this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }))
         this.handleIntersections(hits, args);
-        this.dispatchEvent(new CustomEvent(EventSystemEvents.AfterHandleInput, { detail: evt }))
+        this.dispatchEvent(new CustomEvent<AfterHandleInputEvent>(EventSystemEvents.AfterHandleInput, { detail: evt }))
     }
 
     private _tempComponentsArray: Behaviour[] = [];
@@ -518,8 +524,8 @@ class MeshUIHelper {
                 if (currentFrame === lu.frame) return;
                 lu.frame = currentFrame;
                 let shouldUpdate = this.needsUpdate || currentFrame < 1;
-                if(lu.nextUpdate === context.time.frameCount) shouldUpdate = true;
-                if(this.needsUpdate) lu.nextUpdate = currentFrame + 3;
+                if (lu.nextUpdate === context.time.frameCount) shouldUpdate = true;
+                // if(this.needsUpdate) lu.nextUpdate = currentFrame + 3;
                 if (shouldUpdate) {
                     if (debug)
                         console.log("Update threemeshui");
@@ -564,8 +570,9 @@ class MeshUIHelper {
     static findBlockInParent(elem: any): ThreeMeshUI.Block | null {
         if (!elem) return null;
         if (elem.isBlock) {
-            if (Object.keys(elem.states).length > 0)
-                return elem;
+            // @TODO : Replace states managements
+            // if (Object.keys(elem.states).length > 0)
+            return elem;
         }
         return this.findBlockInParent(elem.parent);
     }

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

@@ -1,4 +1,4 @@
-import { IGraphic } from './Interfaces';
+import { IGraphic, IRectTransformChangedReceiver } from './Interfaces';
 import * as ThreeMeshUI from 'three-mesh-ui'
 import { RGBAColor } from "../js-extensions/RGBAColor"
 import { BaseUIComponent } from "./BaseUIComponent";
@@ -7,9 +7,15 @@ import { Color, LinearEncoding, sRGBEncoding, Texture } from 'three';
 import { RectTransform } from './RectTransform';
 import { onChange, scheduleAction } from "./Utils"
 import { GameObject } from '../Component';
+import SimpleStateBehavior from "three-mesh-ui/examples/behaviors/states/SimpleStateBehavior"
+import { Outline } from './Outline';
 
+const _colorStateObject: { backgroundColor: Color, backgroundOpacity: number } = {
+    backgroundColor: new Color(1, 1, 1),
+    backgroundOpacity: 1,
+};
 
-export class Graphic extends BaseUIComponent implements IGraphic {
+export class Graphic extends BaseUIComponent implements IGraphic, IRectTransformChangedReceiver {
 
     get isGraphic() { return true; }
 
@@ -26,9 +32,11 @@ export class Graphic extends BaseUIComponent implements IGraphic {
         }
         this._color.copy(col);
     }
+
     protected onColorChanged() {
-        const newcolor = this.color;
-        this.setOptions({ backgroundColor: newcolor, backgroundOpacity: newcolor.alpha, borderOpacity: newcolor.alpha });
+        _colorStateObject.backgroundColor = this._color;
+        _colorStateObject.backgroundOpacity = this._color.alpha;
+        this.uiObject?.set(_colorStateObject);
     }
 
     // used via animations
@@ -44,6 +52,9 @@ export class Graphic extends BaseUIComponent implements IGraphic {
 
 
     private _rect: RectTransform | null = null;
+
+    private _stateManager : SimpleStateBehavior | null = null;
+
     protected get rectTransform(): RectTransform {
         if (!this._rect) {
             this._rect = GameObject.getComponent(this.gameObject, RectTransform);
@@ -51,6 +62,11 @@ export class Graphic extends BaseUIComponent implements IGraphic {
         return this._rect!;
     }
 
+    onParentRectTransformChanged() {
+        this.uiObject?.set({ width: this.rectTransform.width, height:this.rectTransform.height })
+        this.markDirty();
+    }
+
     __internalNewInstanceCreated(): void {
         super.__internalNewInstanceCreated();
         this._rect = null;
@@ -63,14 +79,21 @@ export class Graphic extends BaseUIComponent implements IGraphic {
         if (this.uiObject) {
             //@ts-ignore
             this.uiObject.setState(state);
+            this?.markDirty();
         }
     }
 
     setupState(state: object) {
         this.makePanel();
         if (this.uiObject) {
+
+            // @marwie : v7.x now have a concurrent state management in core mimicking html/css
+            // ie : (::firstChild::hover::disabled) where firstchild, hover and disabled are all on different channels
+            // In order to keep needle Raycaster and EventSystem intact, I added in v7 a SimpleStateBehavior, which acts as previously
+
+            if( !this._stateManager ) this._stateManager = new SimpleStateBehavior(this.uiObject);
             //@ts-ignore
-            this.uiObject.setupState(state);
+            this.uiObject.setupState(state.state, state.attributes);
         }
     }
 
@@ -79,8 +102,8 @@ export class Graphic extends BaseUIComponent implements IGraphic {
         if (this.uiObject) {
             //@ts-ignore
             this.uiObject.set(opts);
-            if (opts["backgroundColor"] !== undefined || opts["backgroundOpacity"] !== undefined)
-                this.uiObject["updateBackgroundMaterial"]?.call(this.uiObject);
+            // if (opts["backgroundColor"] !== undefined || opts["backgroundOpacity"] !== undefined)
+            //     this.uiObject["updateBackgroundMaterial"]?.call(this.uiObject);
         }
     }
 
@@ -119,6 +142,7 @@ export class Graphic extends BaseUIComponent implements IGraphic {
             offset: 1, // without a tiny offset we get z fighting
         };
         this.onBeforeCreate(opts);
+        this.applyEffects(opts);
         this.onCreate(opts);
         this.controlsChildLayout = false;
         this._currentlyCreatingPanel = false;
@@ -133,6 +157,17 @@ export class Graphic extends BaseUIComponent implements IGraphic {
     }
     protected onAfterCreated() { }
 
+    private applyEffects(opts){
+        const outline = this.gameObject?.getComponent(Outline);
+        if (outline) {
+            if (outline.effectDistance) opts.borderWidth = Math.max(Math.abs(outline.effectDistance.x), Math.abs(outline.effectDistance.y));
+            if (outline.effectColor) {
+                opts.borderColor = outline.effectColor;
+                opts.borderOpacity = outline.effectColor.alpha;
+            }
+        }
+    }
+
     /** used internally to ensure textures assigned to UI use linear encoding */
     static textureCache: Map<Texture, Texture> = new Map();
 
@@ -151,13 +186,14 @@ export class Graphic extends BaseUIComponent implements IGraphic {
                     tex = clone;
                 }
             }
-            this.setOptions({ backgroundTexture: tex, borderRadius: 0, backgroundOpacity: this.color.alpha, backgroundSize: "stretch" });
+            this.setOptions({ backgroundImage: tex, borderRadius: 0, backgroundOpacity: this.color.alpha, backgroundSize: "stretch" });
         }
     }
 
     protected onAfterAddedToScene(): void {
         super.onAfterAddedToScene();
         if (this.shadowComponent) {
+            // @TODO: I think we dont even need this anymore and this leads to the offset being applied twice
             //@ts-ignore
             this.shadowComponent.offset = this.shadowComponent.position.z;
 

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

@@ -24,11 +24,15 @@ export class Image extends MaskableGraphic {
 
     private _sprite?: Sprite;
 
+    @serializable()
+    private pixelsPerUnitMultiplier: number = 1;
+
     private isBuiltinSprite() {
         switch (this.sprite?.texture?.name) {
             case "InputFieldBackground":
             case "UISprite":
             case "Background":
+            case "Knob":
                 return true;
         }
         // this is a hack/workaround for production builds where the name of the sprite is missing
@@ -39,12 +43,17 @@ export class Image extends MaskableGraphic {
     }
 
     protected onBeforeCreate(opts: any): void {
+        super.onBeforeCreate(opts);
         if (this.isBuiltinSprite()) {
-            opts.borderRadius = 5;
+            opts.borderRadius = 5 / this.pixelsPerUnitMultiplier;
+            if(this.sprite?.texture?.name === "Knob") {
+                opts.borderRadius = 999;
+            }
             opts.borderColor = new Color(.4, .4, .4);
             opts.borderOpacity = this.color.alpha;
             opts.borderWidth = .3;
         }
+
     }
 
     protected onAfterCreated(): void {

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

@@ -13,7 +13,7 @@ const debug = getParam("debuginputfield");
 
 export class InputField extends Behaviour implements IPointerEventHandler {
 
-    get text() : string {
+    get text(): string {
         return this.textComponent?.text ?? "";
     }
 
@@ -148,6 +148,14 @@ export class InputField extends Behaviour implements IPointerEventHandler {
             this.onEndEdit?.invoke(InputField.htmlField.value);
     }
 
+    // @Marwie, I can provide this fix. But the issue seems to comes from Raycaster+EventSystem
+    // As we rollout InputField, and no others elements is behind raycast,
+    // ThreeMeshUI.update is not called.
+    update() {
+        if (InputField.active === this) {
+            this.textComponent?.markDirty();
+        }
+    }
 
     private onInput(evt: KeyboardEvent) {
         if (InputField.active !== this) return;

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

@@ -1,5 +1,9 @@
 import { IComponent } from "../../engine/engine_types";
 
+export interface ICanvas {
+    get screenspace() : boolean;
+}
+
 export interface ICanvasGroup {
     get isCanvasGroup() : boolean;
     blocksRaycasts: boolean;
@@ -9,4 +13,12 @@ export interface ICanvasGroup {
 export interface IGraphic extends IComponent {
     get isGraphic() : boolean;
     raycastTarget: boolean;
+}
+
+export interface IRectTransform extends IComponent {
+
+}
+
+export interface IRectTransformChangedReceiver {
+    onParentRectTransformChanged(comp : IRectTransform) : void;
 }

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

@@ -0,0 +1,13 @@
+import { RGBAColor } from "../js-extensions";
+import { serializable } from "../../engine/engine_serialization";
+import { Behaviour } from "../Component";
+import { Color, Vector2 } from "three"
+
+export class Outline extends Behaviour {
+
+    @serializable(RGBAColor)
+    effectColor?: RGBAColor;
+
+    @serializable(Vector2)
+    effectDistance?: Vector2;
+}