@needle-tools/engine 2.26.1-pre → 2.28.0-pre

package/src/engine/engine_serialization_builtin_serializer.ts

@@ -146,11 +146,23 @@ class ComponentSerializer extends TypeSerializer {
     }
 
     findObjectForGuid(guid: string, root: THREE.Object3D): any {
-        return GameObject.foreachComponent(root, (c) => {
-            if (guid === c.gameObject.guid) return c.gameObject;
+        // recursively search root
+        // need to check the root object too
+        if (root["guid"] === guid) return root;
+
+        const res = GameObject.foreachComponent(root, (c) => {
             if (c.guid === guid) return c;
             return undefined;
-        });
+        }, false);
+        if (res !== undefined)
+            return res;
+
+        // if not found, search in children
+        for (let i = 0; i < root.children.length; i++) {
+            const child = root.children[i];
+            const res = this.findObjectForGuid(guid, child);
+            if (res) return res;
+        }
     }
 }
 export const componentSerializer = new ComponentSerializer();

package/src/engine/engine_setup.ts

@@ -90,13 +90,26 @@ export class Context {
 	isManagedExternally: boolean = false;
 
 	domElement: HTMLElement;
+	get resolutionScaleFactor() { return this._resolutionScaleFactor; }
+	/** use to scale the resolution up or down of the renderer. default is 1 */
+	set resolutionScaleFactor(val: number) { 
+		if(val === this._resolutionScaleFactor) return;
+		if(typeof val !== "number") return;
+		if(val <= 0) {
+			console.error("Invalid resolution scale factor", val);
+			return;
+		}
+		this._resolutionScaleFactor = val;
+		this.updateSize();
+	}
+	private _resolutionScaleFactor: number = 1;
 	get domWidth(): number { return this.domElement.clientWidth; }
 	get domHeight(): number { return this.domElement.clientHeight; }
 	get domX(): number { return this.domElement.offsetLeft; }
 	get domY(): number { return this.domElement.offsetTop; }
 	get isInXR() { return this.renderer.xr?.isPresenting || false; }
 	get xrSession() { return this.renderer.xr?.getSession(); }
-	get AROverlayElement(): HTMLElement {
+	get arOverlayElement(): HTMLElement {
 		const el = this.domElement as any;
 		if (typeof el.getAROverlayContainer === "function")
 			return el.getAROverlayContainer();
@@ -208,12 +221,15 @@ export class Context {
 	private updateSize() {
 		if (!this.isManagedExternally && !this.renderer.xr.isPresenting) {
 			this._sizeChanged = false;
-			const width = this.domWidth;
-			const height = this.domHeight;
+			const scaleFactor = this.resolutionScaleFactor;
+			const width = this.domWidth * scaleFactor;
+			const height = this.domHeight * scaleFactor;
 			const camera = this.mainCamera as PerspectiveCamera;
 			this.updateAspect(camera);
 			this.renderer.setSize(width, height);
 			this.renderer.setPixelRatio(window.devicePixelRatio);
+			this.renderer.domElement.style.width = this.domWidth + "px";
+			this.renderer.domElement.style.height = this.domHeight + "px";
 			if (this.composer) {
 				this.composer.setSize(width, height);
 				this.composer.setPixelRatio(window.devicePixelRatio);

package/src/engine/extensions/NEEDLE_techniques_webgl.ts

@@ -392,8 +392,8 @@ export class NEEDLE_techniques_webgl implements GLTFLoaderPlugin {
                     for (const key in materialExtension.values) {
                         const val = materialExtension.values[key];
                         if (typeof val === "string") {
-                            if (val.startsWith("textures/")) {
-                                const indexString = val.substring(9);
+                            if (val.startsWith("/textures/")) {
+                                const indexString = val.substring("/textures/".length);
                                 const texIndex = Number.parseInt(indexString);
                                 if (texIndex >= 0) {
                                     const tex = await this.parser.getDependency("texture", texIndex);

package/src/engine/extensions/extension_utils.ts

@@ -10,12 +10,13 @@ declare type DependencyInfo = {
     dependencyName: string,
 }
 
+const rootExtensionPrefix = "/extensions/";
 const defaultDependencies = [
-    { prefix: "nodes/", dependencyName: "node" },
-    { prefix: "meshes/", dependencyName: "mesh" },
-    { prefix: "materials/", dependencyName: "material" },
-    { prefix: "textures/", dependencyName: "texture" },
-    { prefix: "animations/", dependencyName: "animation" }
+    { prefix: "/nodes/", dependencyName: "node" },
+    { prefix: "/meshes/", dependencyName: "mesh" },
+    { prefix: "/materials/", dependencyName: "material" },
+    { prefix: "/textures/", dependencyName: "texture" },
+    { prefix: "/animations/", dependencyName: "animation" }
 ]
 
 export async function resolveReferences(parser: GLTFParser, obj) {
@@ -93,7 +94,6 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParser, obj, promi
 }
 
 
-const rootExtensionPrefix = "extensions/";
 function resolveExtension(parser: GLTFParser, str): Promise<void> | null {
     if (parser && parser.plugins && typeof str === "string" && str.startsWith(rootExtensionPrefix)) {
         let name = str.substring(rootExtensionPrefix.length);

package/src/engine-components/AvatarLoader.ts

@@ -35,7 +35,7 @@ export class AvatarModel {
 
 export class AvatarLoader {
 
-    private readonly avatarRegistryUrl: string | null = null;// = "https://needle-storage-castle-demo.glitch.me";//"https://smol-worlds.glitch.me/files/";
+    private readonly avatarRegistryUrl: string | null = null;
     // private loader: GLTFLoader | null;
     // private avatarModelCache: Map<string, AvatarModel | null> = new Map<string, AvatarModel | null>();
 

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

@@ -67,19 +67,26 @@ export class BaseUIComponent extends Behaviour {
             return;
         }
 
-        // console.trace(container);
         container.name = this.name + " (" + (this.constructor.name ?? "UI") + ")";
         container.autoLayout = this._parentComponent.controlsChildLayout;
         container.shadowComponentOwner = this;
-        const raycastTarget = (this as unknown as IGraphic).raycastTarget;
+
+        // TODO: raycastTarget doesnt work anymore -> i think we need to set the gameObject layer and then check in the raycaster if the shadowComponentOwner is on the correct layer?!
+        // const raycastTarget = (this as unknown as IGraphic).raycastTarget;
+        // this.gameObject.layers.set(2)
+
+
         // TODO: only traverse our own hierarchy, we can stop if we find another owner
         container.traverse(c => {
-            if (c.shadowComponentOwner === undefined)
+            if (c.shadowComponentOwner === undefined) {
                 c.shadowComponentOwner = this;
-            if (raycastTarget === false) {
-                c.layers.set(2);
             }
+            // // this makes text not render anymore when enabled again
+            // if (raycastTarget === false) {
+            //     c.layers.set(2);
+            // }
         })
+
         if (this.Root?.gameObject === this.gameObject) {
             this.gameObject.add(container);
         }

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

@@ -22,6 +22,10 @@ export class Image extends MaskableGraphic {
             case "Background":
                 return true;
         }
+        // this is a hack/workaround for production builds where the name of the sprite is missing
+        // need to remove this!!!!
+        if(this.sprite?.texture?.image?.width === 32 && this.sprite?.texture?.image?.height === 32) 
+            return true;
         return false;
     }
 

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

@@ -91,7 +91,7 @@ export class InputField extends Behaviour implements IPointerEventHandler {
 
     private onSelected() {
         if (InputField.active === this) return;
-        if (debug) console.log("Select", this.name, this, InputField.htmlField, this.context.isInXR, this.context.AROverlayElement, this.textComponent?.text, InputField.htmlField?.value);
+        if (debug) console.log("Select", this.name, this, InputField.htmlField, this.context.isInXR, this.context.arOverlayElement, this.textComponent?.text, InputField.htmlField?.value);
 
         InputField.active?.onDeselected();
         InputField.active = this;
@@ -106,7 +106,7 @@ export class InputField extends Behaviour implements IPointerEventHandler {
                 console.log("set input field value", InputField.htmlField.value);
 
             if (this.context.isInXR) {
-                const overlay = this.context.AROverlayElement;
+                const overlay = this.context.arOverlayElement;
                 if (overlay) {
                     InputField.htmlField.style.width = "0px";
                     InputField.htmlField.style.height = "0px";

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

@@ -66,7 +66,7 @@ export class RectTransform extends BaseUIComponent {
     onEnable() {
         super.onEnable();
         this.addShadowComponent(this.rectBlock);
-        this.applyTransform();
+        this._transformNeedsUpdate = true;
     }
 
     onDisable() {