@needle-tools/engine 4.4.0-beta.5 → 4.4.0-beta.6

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/webcomponents/needle menu/needle-menu-spatial.ts

@@ -155,7 +155,7 @@ export class NeedleSpatialMenu {
     private readonly positionFilter = new OneEuroFilterXYZ(90, .5);
 
     private updateMenu() {
-        performance.mark('NeedleSpatialMenu updateMenu start');
+        //performance.mark('NeedleSpatialMenu updateMenu start');
         const menu = this.getMenu();
         this.handleNeedleWatermark();
         this._context.scene.add(menu as any);
@@ -200,14 +200,14 @@ export class NeedleSpatialMenu {
         }
 
         if (this.uiisDirty) {
-            performance.mark('SpatialMenu.update.uiisDirty.start');
+            //performance.mark('SpatialMenu.update.uiisDirty.start');
             this.uiisDirty = false;
             ThreeMeshUI.update();
-            performance.mark('SpatialMenu.update.uiisDirty.end');
-            performance.measure('SpatialMenu.update.uiisDirty', 'SpatialMenu.update.uiisDirty.start', 'SpatialMenu.update.uiisDirty.end');
+            //performance.mark('SpatialMenu.update.uiisDirty.end');
+            //performance.measure('SpatialMenu.update.uiisDirty', 'SpatialMenu.update.uiisDirty.start', 'SpatialMenu.update.uiisDirty.end');
         }
-        performance.mark('NeedleSpatialMenu updateMenu end');
-        performance.measure('SpatialMenu.update', 'NeedleSpatialMenu updateMenu start', 'NeedleSpatialMenu updateMenu end');
+        //performance.mark('NeedleSpatialMenu updateMenu end');
+        //performance.measure('SpatialMenu.update', 'NeedleSpatialMenu updateMenu start', 'NeedleSpatialMenu updateMenu end');
     }
 
     private ensureRenderOnTop(obj: Object3D, level: number = 0) {

package/src/engine/xr/NeedleXRController.ts

@@ -381,12 +381,11 @@ export class NeedleXRController implements IPointerHitEventReceiver {
     }
 
     onUpdate(frame: XRFrame) {
-        performance.mark('NeedleXRController onUpdate start');
         this.onUpdateFrame(frame);
         this.updateInputEvents();
         this.onUpdateMove();
-        performance.mark('NeedleXRController onUpdate end');
-        performance.measure('NeedleXRController onUpdate', 'NeedleXRController onUpdate start', 'NeedleXRController onUpdate end');
+        //performance.mark('NeedleXRController onUpdate end');
+        //performance.measure('NeedleXRController onUpdate', 'NeedleXRController onUpdate start', 'NeedleXRController onUpdate end');
     }
 
     onRenderDebug() {

package/src/engine/xr/NeedleXRSession.ts

@@ -444,7 +444,7 @@ export class NeedleXRSession implements INeedleXRSession {
         if (!context) context = ContextRegistry.All[0] as Context;
         if (!context) throw new Error("No Needle Engine Context found");
 
-        performance.mark('NeedleXRSession start');
+        //performance.mark('NeedleXRSession start');
 
         // setup session init args, make sure we have default values
         if (!init) init = {};
@@ -534,8 +534,8 @@ export class NeedleXRSession implements INeedleXRSession {
             return null;
         }
         const session = this.setSession(mode, newSession, init, context);
-        performance.mark('NeedleXRSession end');
-        performance.measure('NeedleXRSession Startup', 'NeedleXRSession start', 'NeedleXRSession end');
+        //performance.mark('NeedleXRSession end');
+        //performance.measure('NeedleXRSession Startup', 'NeedleXRSession start', 'NeedleXRSession end');
         return session;
     }
 
@@ -884,7 +884,7 @@ export class NeedleXRSession implements INeedleXRSession {
         /** the initialization arguments */
         init: XRSessionInit,
     }) {
-        performance.mark(measure_SessionStartedMarker);
+        //performance.mark(measure_SessionStartedMarker);
 
         saveSessionInfo(mode, extra.init);
         this.session = session;
@@ -1128,8 +1128,8 @@ export class NeedleXRSession implements INeedleXRSession {
 
         enableSpatialConsole(false);
 
-        performance.mark(measure_SessionEndedMarker);
-        performance.measure('NeedleXRSession', measure_SessionStartedMarker, measure_SessionEndedMarker);
+        //performance.mark(measure_SessionEndedMarker);
+        //performance.measure('NeedleXRSession', measure_SessionStartedMarker, measure_SessionEndedMarker);
     };
 
     private _didStart: boolean = false;
@@ -1139,7 +1139,7 @@ export class NeedleXRSession implements INeedleXRSession {
         const frame = context.xrFrame;
         if (!frame) return;
 
-        performance.mark('NeedleXRSession onBefore start');
+        //performance.mark('NeedleXRSession onBefore start');
 
         // ensure that XR is always set to a running session
         this.context.xr = this;
@@ -1291,7 +1291,7 @@ export class NeedleXRSession implements INeedleXRSession {
             console.error("XRControllers are not added but inputSources are present");
         }
 
-        performance.mark('NeedleXRSession update scripts start');
+        //performance.mark('NeedleXRSession update scripts start');
         // invoke update on all scripts
         for (const script of this._xr_update_scripts) {
             if (script.destroyed === true) {
@@ -1304,8 +1304,8 @@ export class NeedleXRSession implements INeedleXRSession {
             }
             if (script.onUpdateXR) script.onUpdateXR(args);
         }
-        performance.mark('NeedleXRSession update scripts end');
-        performance.measure('NeedleXRSession update scripts', 'NeedleXRSession update scripts start', 'NeedleXRSession update scripts end');
+        //performance.mark('NeedleXRSession update scripts end');
+        //performance.measure('NeedleXRSession update scripts', 'NeedleXRSession update scripts start', 'NeedleXRSession update scripts end');
 
         // handle inactive scripts
         this.handleInactiveScripts();
@@ -1326,8 +1326,8 @@ export class NeedleXRSession implements INeedleXRSession {
         this.sync?.onUpdate(this);
 
         this.onRenderDebug();
-        performance.mark('NeedleXRSession onBefore end');
-        performance.measure('NE XR frame', 'NeedleXRSession onBefore start', 'NeedleXRSession onBefore end');
+        //performance.mark('NeedleXRSession onBefore end');
+        //performance.measure('NE XR frame', 'NeedleXRSession onBefore start', 'NeedleXRSession onBefore end');
     }
 
     private onRenderDebug() {

package/src/engine-components/CameraUtils.ts

@@ -46,11 +46,14 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     else {
         camInstance.clearFlags = ClearFlags.SolidColor;
 
-        let backgroundColor = "#efefef";
-        if (typeof window !== undefined && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            backgroundColor = "#1f1f1f";
+        // Don't set the background color if the user set a background color in the <needle-engine> element
+        if (!evt.context.domElement.getAttribute("background-color")) {
+            let backgroundColor = "#efefef";
+            if (typeof window !== undefined && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                backgroundColor = "#1f1f1f";
+            }
+            scene.background = new Color(backgroundColor); // dont set it on the camera because this might be controlled from "background-color" attribute which is set on the scene directly. If the camera has a background color, it will override the scene's background color
         }
-        scene.background = new Color(backgroundColor); // dont set it on the camera because this might be controlled from "background-color" attribute which is set on the scene directly. If the camera has a background color, it will override the scene's background color
 
         // Generate a default environment map if none is set
         if (!scene.environment) {