@needle-tools/engine 4.4.0-beta → 4.4.0-beta.10

package/src/engine/engine_context.ts

@@ -408,7 +408,7 @@ export class Context implements IContext {
 
 	get isCreated() { return this._isCreated; }
 
-	private _sizeChanged: boolean = false;
+	private _needsUpdateSize: boolean = false;
 	private _isCreated: boolean = false;
 	private _isCreating: boolean = false;
 	private _isVisible: boolean = false;
@@ -446,11 +446,11 @@ export class Context implements IContext {
 		this.animations = new AnimationsRegistry(this);
 
 
-		const resizeCallback = () => this._sizeChanged = true;
+		const resizeCallback = () => this._needsUpdateSize = true;
 		window.addEventListener('resize', resizeCallback);
 		this._disposeCallbacks.push(() => window.removeEventListener('resize', resizeCallback));
 
-		const resizeObserver = new ResizeObserver(_ => this._sizeChanged = true);
+		const resizeObserver = new ResizeObserver(_ => this._needsUpdateSize = true);
 		resizeObserver.observe(this.domElement);
 		this._disposeCallbacks.push(() => resizeObserver.disconnect());
 
@@ -519,15 +519,30 @@ export class Context implements IContext {
 
 
 	/** will request a renderer size update the next render call (will call updateSize the next update) */
-	requestSizeUpdate() { this._sizeChanged = true; }
+	requestSizeUpdate() { this._needsUpdateSize = true; }
 
 	/** Clamps the renderer max resolution. If undefined the max resolution is not clamped. Default is undefined */
 	maxRenderResolution?: Vec2;
 
+	/** Control the renderer devicePixelRatio.  
+	 * **Options**   
+	 * - `auto` - Needle Engine automatically sets the pixel ratio to the current window.devicePixelRatio.
+	 * - `manual` - Needle Engine will not change the renderer pixel ratio. You can set it manually.
+	 * - `number` - Needle Engine will set the pixel ratio to the given number. The change will be applied to the renderer and the composer (if used) at the end of the current frame.
+	 */
+	get devicePixelRatio() { return this._devicePixelRatio; }
+	set devicePixelRatio(val: "auto" | "manual" | number) {
+		if (val !== this._devicePixelRatio) {
+			this._devicePixelRatio = val;
+			this._needsUpdateSize = true;
+		}
+	}
+	private _devicePixelRatio: "auto" | "manual" | number = "auto";
+
 	/** update the renderer and canvas size */
 	updateSize(force: boolean = false) {
 		if (force || (!this.isManagedExternally && this.renderer.xr?.isPresenting === false)) {
-			this._sizeChanged = false;
+			this._needsUpdateSize = false;
 			const scaleFactor = this.resolutionScaleFactor;
 			let width = this.domWidth * scaleFactor;
 			let height = this.domHeight * scaleFactor;
@@ -540,15 +555,24 @@ export class Context implements IContext {
 			const camera = this.mainCamera as PerspectiveCamera;
 			this.updateAspect(camera);
 			this.renderer.setSize(width, height, true);
-			this.renderer.setPixelRatio(window.devicePixelRatio);
 			// avoid setting pixel values here since this can cause pingpong updates
 			// e.g. when system scale is set to 125%
 			// https://github.com/needle-tools/needle-engine-support/issues/69
 			this.renderer.domElement.style.width = "100%";
 			this.renderer.domElement.style.height = "100%";
+
+			const devicePixelRatio = typeof this.devicePixelRatio === "number"
+				? this.devicePixelRatio
+				: this.devicePixelRatio === "auto"
+					? window.devicePixelRatio
+					: undefined;
+			if (devicePixelRatio !== undefined) {
+				this.renderer.setPixelRatio(devicePixelRatio);
+			}
+
 			if (this.composer) {
 				this.composer.setSize?.call(this.composer, width, height);
-				if ("setPixelRatio" in this.composer && typeof this.composer.setPixelRatio === "function")
+				if (devicePixelRatio !== undefined && "setPixelRatio" in this.composer && typeof this.composer.setPixelRatio === "function")
 					this.composer.setPixelRatio?.call(this.composer, window.devicePixelRatio);
 			}
 		}
@@ -1016,7 +1040,7 @@ export class Context implements IContext {
 			// this.composer.setSize(this.domWidth, this.domHeight);
 		}
 
-		this._sizeChanged = true;
+		this._needsUpdateSize = true;
 
 		if (this._stats) {
 			this._stats.showPanel(0);
@@ -1186,11 +1210,11 @@ export class Context implements IContext {
 		if (frame === undefined) frame = null;
 		if (isDevEnvironment() || debug || looputils.hasNewScripts()) {
 			try {
-				performance.mark('update.start');
+				//performance.mark('update.start');
 				this.internalStep(timestamp, frame);
 				this._renderlooperrors = 0;
-				performance.mark('update.end');
-				performance.measure('NE Frame', 'update.start', 'update.end');
+				//performance.mark('update.end');
+				//performance.measure('NE Frame', 'update.start', 'update.end');
 			}
 			catch (err) {
 				this._renderlooperrors += 1;
@@ -1361,7 +1385,7 @@ export class Context implements IContext {
 			this.executeCoroutines(FrameEvent.OnBeforeRender);
 			invokeLifecycleFunctions(this, FrameEvent.OnBeforeRender);
 
-			if (this._sizeChanged)
+			if (this._needsUpdateSize)
 				this.updateSize();
 
 			if (this.pre_render_callbacks) {

package/src/engine/engine_element.ts

@@ -12,6 +12,7 @@ import { NeedleLoader } from "./engine_scenetools.js";
 import { Context, ContextCreateArgs } from "./engine_setup.js";
 import { type INeedleEngineComponent, type LoadedModel } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
+import { RGBAColor } from "./js-extensions/RGBAColor.js";
 import { ensureFonts } from "./webcomponents/fonts.js";
 
 // 
@@ -177,6 +178,9 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         -webkit-touch-callout: none;
         -webkit-user-drag: none;
         -webkit-user-modify: none;
+
+        left: 0;
+        top: 0;
     }
     :host .content {
         position: absolute;
@@ -517,7 +521,7 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
 
     private applyAttributes() {
         // set tonemapping if configured
-        if (this._context.renderer) {
+        if (this._context?.renderer) {
             const attribute = this.getAttribute("tonemapping") || this.getAttribute("tone-mapping") as TonemappingAttributeOptions | null | undefined;
             switch (attribute?.toLowerCase()) {
                 case "none":
@@ -555,15 +559,12 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         }
 
         const backgroundColor = this.getAttribute("background-color");
-        if (this._context) {
+        if (this._context?.renderer) {
             if (typeof backgroundColor === "string" && backgroundColor.length > 0) {
-                const currentBackground = this._context.scene.background;
-                if (currentBackground instanceof Color) {
-                    currentBackground.set(backgroundColor);
-                }
-                else {
-                    this._context.scene.background = new Color(backgroundColor);
-                }
+                const rgbaColor = RGBAColor.fromColorRepresentation(backgroundColor);
+                if(debug) console.debug("<needle-engine> background-color changed, str:", backgroundColor, "→", rgbaColor)
+                this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
+                this.context.scene.background = null;
             }
         }
     }

package/src/engine/engine_gameobject.ts

@@ -1,5 +1,6 @@
 import { Bone, Object3D, Quaternion, SkinnedMesh, Vector3 } from "three";
 
+import { $shadowDomOwner } from "../engine-components/ui/Symbols.js";
 import { type AssetReference } from "./engine_addressables.js";
 import { __internalNotifyObjectDestroyed as __internalRemoveReferences, disposeObjectResources } from "./engine_assetdatabase.js";
 import { ComponentLifecycleEvents } from "./engine_components_internal.js";
@@ -380,6 +381,12 @@ function internalInstantiate(
 )
     : GameObject | Object3D | null {
     if (!instance) return null;
+
+    // Don't clone UI shadow objects
+    if (instance[$shadowDomOwner]) {
+        return null;
+    }
+    
     // prepare, remove things that dont work out of the box
     // e.g. user data we want to manually clone
     // also children throw errors (e.g. recursive toJson with nested meshes)

package/src/engine/engine_license.ts

@@ -11,7 +11,7 @@ const _licenseCheckResultChangedCallbacks: ((result: boolean) => void)[] = [];
 // This is modified by a bundler (e.g. vite)
 // Do not edit manually
 let NEEDLE_ENGINE_LICENSE_TYPE: string = "basic";
-if (debug) 
+if (debug)
     console.log("License Type: " + NEEDLE_ENGINE_LICENSE_TYPE)
 
 /** @internal */
@@ -33,15 +33,24 @@ export function hasIndieLicense() {
     return false;
 }
 
+/** @internal */
+export function hasEduLicense() {
+    switch (NEEDLE_ENGINE_LICENSE_TYPE) {
+        case "edu":
+            return true;
+    }
+    return false;
+}
+
 /** @internal */
 export function hasCommercialLicense() {
-    return hasProLicense() || hasIndieLicense();
+    return hasProLicense() || hasIndieLicense() || hasEduLicense();
 }
 
 
 /** @internal */
 export function onLicenseCheckResultChanged(cb: (result: boolean) => void) {
-    if (hasProLicense() || hasIndieLicense())
+    if (hasProLicense() || hasIndieLicense() || hasEduLicense())
         return cb(true);
     _licenseCheckResultChangedCallbacks.push(cb);
 }
@@ -85,14 +94,17 @@ async function checkLicense() {
                 invokeLicenseCheckResultChanged(true);
             }
             else if (res?.status === 403) {
+                invokeLicenseCheckResultChanged(false);
                 applicationIsForbidden = true;
                 applicationForbiddenText = await res.text();
             }
             else {
+                invokeLicenseCheckResultChanged(false);
                 if (debug) console.log("License check failed with status " + res?.status);
             }
         }
         catch (err) {
+            invokeLicenseCheckResultChanged(false);
             if (debug) console.error("License check failed", err);
         }
     }
@@ -167,7 +179,9 @@ async function handleForbidden(ctx: IContext) {
 
 async function showLicenseInfo(ctx: IContext) {
     try {
-        if (hasCommercialLicense() !== true) return onNonCommercialVersionDetected(ctx);
+        if (!hasProLicense() && !hasIndieLicense()) {
+            return onNonCommercialVersionDetected(ctx);
+        }
     }
     catch (err) {
         if (debug) console.log("License check failed", err)
@@ -179,85 +193,120 @@ async function showLicenseInfo(ctx: IContext) {
 
 
 async function onNonCommercialVersionDetected(ctx: IContext) {
+
     // if the engine loads faster than the license check, we need to capture the ready event here
     let isReady = false;
     ctx.domElement.addEventListener("ready", () => isReady = true);
 
     await runtimeLicenseCheckPromise?.catch(() => { });
-    if (hasCommercialLicense()) return;
-    logNonCommercialUse();
+
+
+    if (hasProLicense() || hasIndieLicense()) return;
+    if (hasCommercialLicense() === false) logNonCommercialUse();
 
     // check if the engine is already ready (meaning has finished loading)
-    // if (isReady) {
-    //     insertNonCommercialUseHint(ctx);
-    // }
-    // else {
-    //     ctx.domElement.addEventListener("ready", () => {
-    //         insertNonCommercialUseHint(ctx);
-    //     });
-    // }
+    if (isReady) {
+        insertNonCommercialUseHint(ctx);
+    }
+    else {
+        ctx.domElement.addEventListener("ready", () => {
+            insertNonCommercialUseHint(ctx);
+        });
+    }
 }
 
 // const licenseElementIdentifier = "needle-license-element";
 // const licenseDuration = 10000;
 // const licenseDelay = 1200;
-// function insertNonCommercialUseHint(ctx: IContext) {
-
-//     return;
-//     const banner = LicenseBanner.create();
-//     ctx.domElement.shadowRoot?.appendChild(banner);
-//     let bannerStyle = `
-//         position: absolute;
-//         bottom: 20px;
-//         right: 20px;
-//         opacity: 0;
-//         transform: translateY(10px);
-//         transition: all .5s ease-in-out 1s;
-//         pointer: cursor;
-//     `;
-//     banner.style.cssText = bannerStyle;
-//     let expectedBannerStyle = banner.style.cssText;
-//     setTimeout(() => {
-//         bannerStyle = bannerStyle.replace("opacity: 0", "opacity: 1");
-//         bannerStyle = bannerStyle.replace("transform: translateY(10px)", "transform: translateY(0)");
-//         banner.style.cssText = bannerStyle;
-//         expectedBannerStyle = banner.style.cssText;
-//     }, 100);
-
-//     // ensure the banner is always visible
-//     const interval = setInterval(() => {
-//         const parent = ctx.domElement.shadowRoot || ctx.domElement;
-//         if (banner.parentNode !== parent) {
-//             parent.appendChild(banner);
-//         }
-//         if (expectedBannerStyle != banner.style.cssText) {
-//             banner.style.cssText = bannerStyle;
-//             expectedBannerStyle = banner.style.cssText;
-//             showBalloonError("This website violates the Needle Engine License! Please contact hi@needle.tools");
-//         }
-//     }, 1000);
-
-//     if (hasIndieLicense()) {
-//         const removeDelay = licenseDuration + licenseDelay;
-//         setTimeout(() => {
-//             clearInterval(interval);
-//             banner?.remove();
-//             // show the logo every x minutes
-//             const intervalInMinutes = 5;
-//             setTimeout(() => {
-//                 if (ctx.domElement.parentNode)
-//                     insertNonCommercialUseHint(ctx);
-//             }, 1000 * 60 * intervalInMinutes)
-//         }, removeDelay);
-//     }
-
-// }
+function insertNonCommercialUseHint(ctx: IContext) {
+
+    const style = `
+        position: relative;
+        display: block;
+        background-size: 20px;
+        background-position: 10px 5px;
+        background-repeat:no-repeat;
+        background-image:url('${base64Logo}');
+        background-max-size: 40px;
+        padding: 10px;
+        padding-left: 30px;
+    `;
+    if (NEEDLE_ENGINE_LICENSE_TYPE === "edu") {
+        console.log("%c " + "Supported by Needle for Education – https://needle.tools", style);
+    }
+    else {
+        // if the user has a basic license we already show the logo in the menu and log a license message
+        return;
+    }
+
+    const banner = document.createElement("div");
+    banner.className = "needle-non-commercial-use";
+    banner.innerHTML = "Made with Needle for Education";
+    ctx.domElement.shadowRoot?.appendChild(banner);
+    let bannerStyle = `
+        position: absolute;
+        font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+        font-size: 12px;
+        color: rgb(100, 100, 100);
+        /*mix-blend-mode: difference;*/
+        background-color: transparent;
+        z-index: 10000;
+
+        cursor: pointer;
+        user-select: none;
+        opacity: 0;
+
+        bottom: 6px;
+        right: 12px;
+        transform: translateY(0px);
+        transition: all .5s ease-in-out 1s;
+    `;
+    banner.style.cssText = bannerStyle;
+    banner.addEventListener("click", () => { window.open("https://needle.tools", "_blank") });
+    let expectedBannerStyle = banner.style.cssText;
+    setTimeout(() => {
+        bannerStyle = bannerStyle.replace("opacity: 0", "opacity: 1");
+        bannerStyle = bannerStyle.replace("transform: translateY(10px)", "transform: translateY(0)");
+        banner.style.cssText = bannerStyle;
+        expectedBannerStyle = banner.style.cssText;
+    }, 100);
+
+    // ensure the banner is always visible
+    const interval = setInterval(() => {
+        const parent = ctx.domElement.shadowRoot || ctx.domElement;
+        if (banner.parentNode !== parent) {
+            parent.appendChild(banner);
+        }
+        if (expectedBannerStyle != banner.style.cssText) {
+            banner.style.cssText = bannerStyle;
+            expectedBannerStyle = banner.style.cssText;
+        }
+    }, 1000);
+
+    if (hasEduLicense()) {
+        const removeDelay = 20_000;
+        setTimeout(() => {
+            clearInterval(interval);
+            banner?.remove();
+            // show the logo every x minutes
+            const intervalInMinutes = 5;
+            setTimeout(() => {
+                if (ctx.domElement.parentNode)
+                    insertNonCommercialUseHint(ctx);
+            }, 1000 * 60 * intervalInMinutes)
+        }, removeDelay);
+    }
+
+}
+
+
+const base64Logo = "data:image/webp;base64,UklGRrABAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSKEAAAARN6CmbSM4WR7vdARON11EBDq3fLiNbVtVzpMCPlKAEzsx0Y/x+Ovuv4dn0EFE/ydAvz6YggXzgh5sVgXM/zOC/4sii7qgGvB5N7hmuQYwkvazWAu1JPW41FXSHq6pnaQWvqYH18Fc0j1hO/BFTtIeSBlJi5w6qIIO7IOrwhFsB2Yxukif0FTRLpXswHR8MxbslKe9VZsn/Ub5C7YFOpqSTABWUDgg6AAAAFAGAJ0BKiAAIAA+7VyoTqmkpCI3+qgBMB2JbACdMt69DwMIQBLhkTO6XwY00UEDK6cNIDnuNibPf0EgAP7Y1myuiQHLDsF/0h5unrGh6WAbv7aegg2ZMd3uRKfT/3SJztcaujYfTvMXspfCTmYcoO6a+vhC3ss4M8uM58t4siiu59I4aOl59e9Sr6xoxYlHf2v+NnBNpJYeJf8jABQAId/PXuBkLEFkiCucgSGEcfhvajql/j3reCGl0M5/9gQWy7ayNPs+wlvIxFnNfSlfuND4CZOCyxOHhRqOmHN4ULHo3tCSrUNvgAA=";
+
 let lastLogTime = 0;
 async function logNonCommercialUse(_logo?: string) {
     const now = Date.now();
     if (now - lastLogTime < 2000) return;
     lastLogTime = now;
-    const logo = "data:image/webp;base64,UklGRrABAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSKEAAAARN6CmbSM4WR7vdARON11EBDq3fLiNbVtVzpMCPlKAEzsx0Y/x+Ovuv4dn0EFE/ydAvz6YggXzgh5sVgXM/zOC/4sii7qgGvB5N7hmuQYwkvazWAu1JPW41FXSHq6pnaQWvqYH18Fc0j1hO/BFTtIeSBlJi5w6qIIO7IOrwhFsB2Yxukif0FTRLpXswHR8MxbslKe9VZsn/Ub5C7YFOpqSTABWUDgg6AAAAFAGAJ0BKiAAIAA+7VyoTqmkpCI3+qgBMB2JbACdMt69DwMIQBLhkTO6XwY00UEDK6cNIDnuNibPf0EgAP7Y1myuiQHLDsF/0h5unrGh6WAbv7aegg2ZMd3uRKfT/3SJztcaujYfTvMXspfCTmYcoO6a+vhC3ss4M8uM58t4siiu59I4aOl59e9Sr6xoxYlHf2v+NnBNpJYeJf8jABQAId/PXuBkLEFkiCucgSGEcfhvajql/j3reCGl0M5/9gQWy7ayNPs+wlvIxFnNfSlfuND4CZOCyxOHhRqOmHN4ULHo3tCSrUNvgAA=";
     const style = `
         position: relative;
         display: block;
@@ -265,7 +314,7 @@ async function logNonCommercialUse(_logo?: string) {
         background-size: 20px;
         background-position: 10px 5px;
         background-repeat:no-repeat;
-        background-image:url('${logo}');
+        background-image:url('${base64Logo}');
         background-max-size: 40px;
         margin-bottom: 5px;
         margin-top: .3em;

package/src/engine/engine_networking_blob.ts

@@ -1,6 +1,7 @@
 // workaround for this is not a function when deployed
 // see https://github.com/pvorb/node-md5/issues/52
 import md5 from "md5";
+import { FileLoader } from "three";
 
 import { showBalloonWarning } from "./debug/index.js";
 import { hasCommercialLicense } from "./engine_license.js";
@@ -219,35 +220,55 @@ export namespace BlobStorage {
     }
 
     export async function download(url: string, progressCallback?: (prog: ProgressEvent) => void): Promise<Uint8Array | null> {
-        const response = await fetch(url);
-
-        const reader = response.body?.getReader();
-        const contentLength = response.headers.get('Content-Length');
-        const total = contentLength ? parseInt(contentLength) : 0;
-
-        if (!reader) return null;
-
-        let received: number = 0;
-        const chunks: Uint8Array[] = [];
-        while (true) {
-            const { done, value } = await reader.read();
-            if (value) {
-                chunks.push(value);
-                received += value.length;
-                progressCallback?.call(null, new ProgressEvent('progress', { loaded: received, total: total }));
-            }
 
-            if (done) {
-                break;
+        // Using a FileLoader here instead of manually fetching so we're able to use the three.js cache system
+        const loader = new FileLoader();
+        loader.setResponseType('arraybuffer');
+        // loader.setRequestHeader( this.requestHeader );
+        // loader.setWithCredentials( this.withCredentials );
+        const res = await loader.loadAsync(url, prog => {
+            if (progressCallback) {
+                progressCallback.call(null, prog);
             }
+        });
+        if (!(res instanceof ArrayBuffer)) {
+            console.error("Download failed, no arraybuffer returned");
+            return null;
         }
-        const final = new Uint8Array(received);
-        let position = 0;
-        for (const chunk of chunks) {
-            final.set(chunk, position);
-            position += chunk.length;
-        }
-        return final;
+        return new Uint8Array(res);
+
+
+        // Old solution: this didn't re-use the three.js loading cache. Using a FileLoader the GLTFLoader under the hood is smart enough to NOT start a new download request
+
+        // const response = await fetch(url);
+
+        // const reader = response.body?.getReader();
+        // const contentLength = response.headers.get('Content-Length');
+        // const total = contentLength ? parseInt(contentLength) : 0;
+
+        // if (!reader) return null;
+
+        // let received: number = 0;
+        // const chunks: Uint8Array[] = [];
+        // while (true) {
+        //     const { done, value } = await reader.read();
+        //     if (value) {
+        //         chunks.push(value);
+        //         received += value.length;
+        //         progressCallback?.call(null, new ProgressEvent('progress', { loaded: received, total: total }));
+        //     }
+
+        //     if (done) {
+        //         break;
+        //     }
+        // }
+        // const final = new Uint8Array(received);
+        // let position = 0;
+        // for (const chunk of chunks) {
+        //     final.set(chunk, position);
+        //     position += chunk.length;
+        // }
+        // return final;
     }
 }
 

package/src/engine/engine_physics_rapier.ts

@@ -598,17 +598,15 @@ export class RapierPhysics implements IPhysicsEngine {
         scale.multiplyScalar(0.5);
 
         // prevent negative scale
-        if (scale.x < 0)
-            scale.x = Math.abs(scale.x);
-        if (scale.y < 0)
-            scale.y = Math.abs(scale.y);
-        if (scale.z < 0)
-            scale.z = Math.abs(scale.z);
+        if (scale.x < 0) scale.x = Math.abs(scale.x);
+        if (scale.y < 0) scale.y = Math.abs(scale.y);
+        if (scale.z < 0) scale.z = Math.abs(scale.z);
 
         // prevent zero scale - seems normals are flipped otherwise
-        if (scale.x == 0) scale.x = 0.0000001;
-        if (scale.y == 0) scale.y = 0.0000001;
-        if (scale.z == 0) scale.z = 0.0000001;
+        const minSize = 0.0000001;
+        if (scale.x < minSize) scale.x = minSize;
+        if (scale.y < minSize) scale.y = minSize;
+        if (scale.z < minSize) scale.z = minSize;
 
         const desc = MODULES.RAPIER_PHYSICS.MODULE.ColliderDesc.cuboid(scale.x, scale.y, scale.z);
         // const objectLayerMask = collider.gameObject.layers.mask;
@@ -994,9 +992,9 @@ export class RapierPhysics implements IPhysicsEngine {
                 const sc = col as IBoxCollider;
                 const obj = col.gameObject;
                 const scale = getWorldScale(obj, this._tempPosition);
-                const newX = sc.size.x * 0.5 * scale.x;
-                const newY = sc.size.y * 0.5 * scale.y;
-                const newZ = sc.size.z * 0.5 * scale.z;
+                const newX = Math.abs(sc.size.x * 0.5 * scale.x);
+                const newY = Math.abs(sc.size.y * 0.5 * scale.y);
+                const newZ = Math.abs(sc.size.z * 0.5 * scale.z);
                 sizeHasChanged = cuboid.halfExtents.x !== newX || cuboid.halfExtents.y !== newY || cuboid.halfExtents.z !== newZ;
                 cuboid.halfExtents.x = newX;
                 cuboid.halfExtents.y = newY;

package/src/engine/engine_serialization_core.ts

@@ -517,11 +517,14 @@ function deserializeObjectWithType(data: any, typeOrConstructor: ConstructorConc
     // then we dont need to do anything else
     if (!typeIsFunction && currentValue) {
         if (currentValue instanceof Material) return currentValue;
-        if (currentValue instanceof Texture) return currentValue;
         if (currentValue instanceof Mesh) return currentValue;
         if (currentValue instanceof BufferGeometry) return currentValue;
         if (currentValue instanceof AnimationClip) return currentValue;
+        // We need to call the RenderTexture deserializer so we can not just return here:
+        // if (currentValue instanceof Texture) return currentValue;
+        // So this has now been moved down below the deserializer code
     }
+    
     // Removed this line because it prevents assigning serialized values to existing instances for e.g. EventList
     // https://linear.app/needle/issue/NE-5350
     // if (!typeIsFunction && currentValue instanceof type) return currentValue;
@@ -594,6 +597,8 @@ function deserializeObjectWithType(data: any, typeOrConstructor: ConstructorConc
 
     // console.log(type.prototype.get("$serializedTypes"));
 
+    // We check textures AFTER running deserializers because some textures might need to be converted to a RenderTexture
+    if (currentValue instanceof Texture) return currentValue;
 
     let instance: any = undefined;
     if (data && (data.isMaterial || data.isTexture || data.isObject3D || data instanceof AnimationClip)) {

package/src/engine/engine_utils_screenshot.ts

@@ -175,7 +175,7 @@ export function screenshot2(opts: ScreenshotOptionsDataUrl | ScreenshotOptionsTe
     }
 
     const renderer = context.renderer;
-    const isXRScreenshot = renderer.xr.enabled;
+    const isXRScreenshot = renderer.xr.enabled && renderer.xr.isPresenting;
 
 
     // Perform XR screenshot in onBeforeRender (after the screenshot we want to render the original camera view)

package/src/engine/js-extensions/RGBAColor.ts

@@ -73,4 +73,54 @@ export class RGBAColor extends Color {
         this.alpha = array[offset + 3];
         return super.fromArray(array, offset);
     }
+
+    static fromColorRepresentation(col: ColorRepresentation) {
+
+        if (typeof col === "string") {
+            if (col.trim() === "transparent") {
+                return new RGBAColor(0, 0, 0, 0);
+            }
+            // handle hex colors with alpha
+            if (col.startsWith("#") && col.length === 9) {
+                const hex = parseInt(col.slice(1, 9), 16);
+                const r = (hex >> 24) & 0xff;
+                const g = (hex >> 16) & 0xff;
+                const b = (hex >> 8) & 0xff;
+                const a = (hex >> 0) & 0xff;
+                return new RGBAColor(r / 255, g / 255, b / 255, a / 255);
+            }
+            // handle hex colors
+            else if (col.startsWith("#")) {
+                const hex = parseInt(col.slice(1), 16);
+                const r = (hex >> 16) & 0xff;
+                const g = (hex >> 8) & 0xff;
+                const b = (hex >> 0) & 0xff;
+                return new RGBAColor(r / 255, g / 255, b / 255, 1);
+            }
+            // handle rgba string
+            else if (col.startsWith("rgba")) {
+                const rgba = col.slice(5, -1).split(",").map(Number);
+                return new RGBAColor(rgba[0] / 255, rgba[1] / 255, rgba[2] / 255, rgba[3]);
+            }
+            // handle rgb string
+            else if (col.startsWith("rgb")) {
+                const rgb = col.slice(4, -1).split(",").map(Number);
+                return new RGBAColor(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255, 1);
+            }
+        }
+        else if (Array.isArray(col)) {
+            // handle rgba colors
+            if (col.length === 4) {
+                return new RGBAColor(col[0], col[1], col[2], col[3]);
+            }
+            // handle rgb colors
+            else if (col.length === 3) {
+                return new RGBAColor(col[0], col[1], col[2], 1);
+            }
+            else {
+                console.error("Invalid color array length. Expected 3 or 4, got " + col.length);
+            }
+        }
+        return new RGBAColor(col);
+    }
 }