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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.5.0-alpha",
+    "version": "3.5.1-alpha",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
     "main": "dist/needle-engine.umd.cjs",
     "type": "module",

package/src/engine/engine_context.ts

@@ -80,7 +80,7 @@ export enum XRSessionMode {
 	ImmersiveAR = "immersive-ar",
 }
 
-export declare type OnBeforeRenderCallback = (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void
+export declare type OnRenderCallback = (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void
 
 
 export function registerComponent(script: IComponent, context?: Context) {
@@ -440,33 +440,57 @@ export class Context implements IContext {
 		}
 	}
 
-	private _onBeforeRenderListeners: { [key: string]: OnBeforeRenderCallback[] } = {};
+
+
+	private _onBeforeRenderListeners = new Map<string, OnRenderCallback[]>();
+	private _onAfterRenderListeners = new Map<string, OnRenderCallback[]>();
 
 	/** use this to subscribe to onBeforeRender events on threejs objects */
-	addBeforeRenderListener(target: Object3D, callback: OnBeforeRenderCallback) {
-		if (!this._onBeforeRenderListeners[target.uuid]) {
-			this._onBeforeRenderListeners[target.uuid] = [];
-			const onBeforeRenderCallback = (renderer, scene, camera, geometry, material, group) => {
-				const arr = this._onBeforeRenderListeners[target.uuid];
-				if (!arr) return;
-				for (let i = 0; i < arr.length; i++) {
-					const fn = arr[i];
-					fn(renderer, scene, camera, geometry, material, group);
-				}
-			}
-			target.onBeforeRender = onBeforeRenderCallback as any;
+	addBeforeRenderListener(target: Object3D, callback: OnRenderCallback) {
+		if (!this._onBeforeRenderListeners.has(target.uuid)) {
+			this._onBeforeRenderListeners.set(target.uuid, []);
+			target.onBeforeRender = this._createRenderCallbackWrapper(target, this._onBeforeRenderListeners);
+		}
+		this._onBeforeRenderListeners.get(target.uuid)?.push(callback);
+	}
+	removeBeforeRenderListener(target: Object3D, callback: OnRenderCallback) {
+		if (this._onBeforeRenderListeners.has(target.uuid)) {
+			const arr = this._onBeforeRenderListeners.get(target.uuid)!;
+			const idx = arr.indexOf(callback);
+			if (idx >= 0) arr.splice(idx, 1);
 		}
-		this._onBeforeRenderListeners[target.uuid].push(callback);
 	}
 
-	removeBeforeRenderListener(target: Object3D, callback: OnBeforeRenderCallback) {
-		if (this._onBeforeRenderListeners[target.uuid]) {
-			const arr = this._onBeforeRenderListeners[target.uuid];
+	/** use this to subscribe to onAfterRender events on threejs objects */
+	addAfterRenderListener(target: Object3D, callback: OnRenderCallback) {
+		if (!this._onAfterRenderListeners.has(target.uuid)) {
+			this._onAfterRenderListeners.set(target.uuid, []);
+			target.onAfterRender = this._createRenderCallbackWrapper(target, this._onAfterRenderListeners);
+		}
+		this._onAfterRenderListeners.get(target.uuid)?.push(callback);
+	}
+	removeAfterRenderListener(target: Object3D, callback: OnRenderCallback) {
+		if (this._onAfterRenderListeners.has(target.uuid)) {
+			const arr = this._onAfterRenderListeners.get(target.uuid)!;
 			const idx = arr.indexOf(callback);
 			if (idx >= 0) arr.splice(idx, 1);
 		}
 	}
 
+
+	private _createRenderCallbackWrapper(target: Object3D, array: Map<string, OnRenderCallback[]>): OnRenderCallback {
+		return (renderer, scene, camera, geometry, material, group) => {
+			const arr = array.get(target.uuid);
+			if (!arr) return;
+			for (let i = 0; i < arr.length; i++) {
+				const fn = arr[i];
+				fn(renderer, scene, camera, geometry, material, group);
+			}
+		}
+	}
+
+
+
 	private _requireDepthTexture: boolean = false;
 	private _requireColorTexture: boolean = false;
 	private _renderTarget?: WebGLRenderTarget;
@@ -584,7 +608,7 @@ export class Context implements IContext {
 			else {
 				ContextRegistry.dispatchCallback(ContextEvent.MissingCamera, this);
 				if (!this.mainCamera && !this.isManagedExternally)
-					console.error("MISSING camera", this);
+					console.warn("Missing camera in main scene", this);
 			}
 		}
 

package/src/engine-components/ReflectionProbe.ts

@@ -129,17 +129,28 @@ export class ReflectionProbe extends Behaviour {
         // otherwise some renderers outside of the probe will be affected or vice versa
         for (let i = 0; i < _rend.sharedMaterials.length; i++) {
             const material = _rend.sharedMaterials[i];
-            if (!material) continue;
-            if (material["envMap"] === undefined) continue;
-            if (material["envMap"] === this.texture) {
+            if (!material) {
                 continue;
             }
+            if (material["envMap"] === undefined) {
+                continue;
+            }
+
             let cached = rendererCache[i];
 
             // make sure we have the currently assigned material cached (and an up to date clone of that)
             // TODO: this is causing problems with progressive textures sometimes (depending on the order) when the version changes and we re-create materials over and over. We might want to just set the material envmap instead of making a clone
-            if (!cached || cached.material !== material || cached.copy.version !== material.version) {
-                if(debug) console.log("Cloning material", material.name, material.version);
+            let isCachedInstance = material === cached?.copy;
+            let hasChanged = !cached || cached.material.uuid !== material.uuid || cached.copy.version !== material.version;
+            if (!isCachedInstance && hasChanged) {
+                if (debug) {
+                    let reason = "";
+                    if (!cached) reason = "not cached";
+                    else if (cached.material !== material) reason = "reference changed; cached instance?: " + isCachedInstance;
+                    else if (cached.copy.version !== material.version) reason = "version changed";
+                    console.warn("Cloning material", material.name, material.version, "Reason:", reason, "\n", material.uuid, "\n", cached?.copy.uuid, "\n", _rend.name);
+                }
+
                 const clone = material.clone();
                 clone.version = material.version;
 
@@ -158,8 +169,7 @@ export class ReflectionProbe extends Behaviour {
                 clone[$reflectionProbeKey] = this;
                 clone[$originalMaterial] = material;
 
-                if (debug)
-                    console.log("Set reflection", _rend.name, _rend.guid);
+                if (debug) console.log("Set reflection", _rend.name, _rend.guid);
             }
 
             /** this is the material that we copied and that has the reflection probe */

package/src/engine-components/Renderer.ts

@@ -605,15 +605,15 @@ export class Renderer extends Behaviour implements IRenderer {
             }
         }
 
-    }
+        
+        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.onSet(this);
+        }
 
+    }
     onBeforeRenderThree(_renderer, _scene, _camera, _geometry, material, _group) {
 
         this.loadProgressiveTextures(material);
-        // TODO: we might want to just set the material.envMap for one material during rendering instead of cloning the material
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onSet(this);
-        }
 
         if (material.envMapIntensity !== undefined) {
             const factor = this.hasLightmap ? Math.PI : 1;

package/src/engine-components/RendererLightmap.ts

@@ -1,7 +1,7 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
 import { Texture } from "three";
-import { Context, OnBeforeRenderCallback } from "../engine/engine_setup";
+import { Context, OnRenderCallback } from "../engine/engine_setup";
 
 // this component is automatically added by the Renderer if the object has lightmap uvs AND we have a lightmap
 // for multimaterial objects GLTF exports a "Group" with the renderer component

package/src/engine-components/export/usdz/ThreeUSDZExporter.ts

@@ -17,7 +17,6 @@ import {
 	Camera,
 	Color,
 	MeshStandardMaterial,
-	LinearEncoding,
 	sRGBEncoding,
 	MeshPhysicalMaterial,
 } from 'three';
@@ -1109,9 +1108,6 @@ function buildMaterial( material: MeshStandardMaterial, textures ) {
 		const textureTransformInput = `</Materials/Material_${material.id}/${uvReader}.outputs:result>`;
 		const textureTransformOutput = `</Materials/Material_${material.id}/Transform2d_${mapType}.outputs:result>`;
 
-		const rawTextureExtra = `(
-			colorSpace = "Raw"
-		)`;
 		const needsTextureScale = mapType !== 'normal' && (color && (color.r !== 1 || color.g !== 1 || color.b !== 1 || opacity !== 1)) || false;
 		const needsNormalScaleAndBias = mapType === 'normal';
 		const normalScaleValueString = (material.normalScale ? material.normalScale.x * 2 : 2).toFixed( PRECISION );
@@ -1133,7 +1129,8 @@ function buildMaterial( material: MeshStandardMaterial, textures ) {
 		def Shader "Texture_${texture.id}_${mapType}"
         {
             uniform token info:id = "UsdUVTexture"
-            asset inputs:file = @textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}@ ${mapType === 'normal' ? rawTextureExtra : ''}
+            asset inputs:file = @textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}@
+			token inputs:sourceColorSpace = "${ texture.colorSpace === 'srgb' ? 'sRGB' : 'raw' }"
             float2 inputs:st.connect = ${needsTextureTransform ? textureTransformOutput : textureTransformInput}
 			${needsTextureScale ? `
 			float4 inputs:scale = (${color ? color.r + ', ' + color.g + ', ' + color.b : '1, 1, 1'}, ${opacity ? opacity : '1'})

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