@needle-tools/engine 4.6.0 → 4.6.1-next.50abb78

package/lib/engine-components/postprocessing/utils.js

@@ -1,6 +1,7 @@
 import { isDevEnvironment } from "../../engine/debug/index.js";
 import { addComponent } from "../../engine/engine_components.js";
 import { foreachComponentEnumerator } from "../../engine/engine_gameobject.js";
+import { MODULES } from "../../engine/engine_modules.js";
 import { getParam } from "../../engine/engine_utils.js";
 export const debug = getParam("debugpost");
 let PostprocessingManagerType = null;
@@ -35,4 +36,101 @@ export function getPostProcessingManager(effect) {
     }
     return manager;
 }
+/**
+ * Default priority for post-processing effects. This can be used to sort effects by their rendering order when creating custom effects.
+ * E.g. in your custom effect, you can set `priority: PostProcessingEffectPriority.Bloom + 1;` to ensure it gets rendered after the bloom effect.
+ * OR `priority: PostProcessingEffectPriority.Bloom - 1;` to ensure it gets rendered before the bloom effect.
+ * @example
+ * ```typescript
+ * import { PostProcessingEffectPriority } from "@needle-tools/engine"
+ *
+ * export class MyCustomEffect extends PostProcessingEffect {
+ *    priority: PostProcessingEffectPriority.Bloom + 1; // render after bloom
+ *
+ *    // ... your effect code
+ * }
+ * ```
+ */
+export const PostProcessingEffectPriority = {
+    NormalPass: 0,
+    DepthDownsamplingPass: 10,
+    SMAA: 20,
+    SSAO: 30,
+    TiltShift: 40,
+    DepthOfField: 50,
+    ChromaticAberration: 60,
+    Bloom: 70,
+    Vignette: 80,
+    Pixelation: 90,
+    ToneMapping: 100,
+    HueSaturation: 110,
+    BrightnessContrast: 120,
+    // Sharpening: 130,
+};
+// let effectsOrder: Array<Constructor<Effect | Pass>> | null = null;
+let builtinOrder = null;
+export function orderEffects(effects) {
+    if (debug === "verbose")
+        console.debug("Before ordering effects", [...effects]);
+    if (!builtinOrder) {
+        builtinOrder = new Map();
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.NormalPass, PostProcessingEffectPriority.NormalPass);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthDownsamplingPass, PostProcessingEffectPriority.DepthDownsamplingPass);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SMAAEffect, PostProcessingEffectPriority.SMAA);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SSAOEffect, PostProcessingEffectPriority.SSAO);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.TiltShiftEffect, PostProcessingEffectPriority.TiltShift);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect, PostProcessingEffectPriority.DepthOfField);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ChromaticAberrationEffect, PostProcessingEffectPriority.ChromaticAberration);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BloomEffect, PostProcessingEffectPriority.Bloom);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.VignetteEffect, PostProcessingEffectPriority.Vignette);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.PixelationEffect, PostProcessingEffectPriority.Pixelation);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ToneMappingEffect, PostProcessingEffectPriority.ToneMapping);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.HueSaturationEffect, PostProcessingEffectPriority.HueSaturation);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect, PostProcessingEffectPriority.BrightnessContrast);
+    }
+    // enforce correct order of effects (e.g. DOF before Bloom)
+    effects.sort((a, b) => {
+        // we use find index here because sometimes constructor names are prefixed with `_`
+        // TODO: find a more robust solution that isnt name based (not sure if that exists tho... maybe we must give effect TYPES some priority/index)
+        const aidx = typeof a.priority === "number" ? a.priority : builtinOrder.get(a.effect.constructor) || -1;
+        const bidx = typeof b.priority === "number" ? b.priority : builtinOrder.get(b.effect.constructor) || -1;
+        // Unknown effects should be rendered first
+        if (aidx < 0) {
+            if (debug)
+                console.warn("Unknown effect found: ", a.constructor.name);
+            return -1;
+        }
+        else if (bidx < 0) {
+            if (debug)
+                console.warn("Unknown effect found: ", b.constructor.name);
+            return 1;
+        }
+        // if (aidx < 0) return 1;
+        // if (bidx < 0) return -1;
+        return aidx - bidx;
+    });
+    // effects.sort((a, b) => {
+    //     if (a.beforeEffect) {
+    //         const beforeA = effectsOrder!.findIndex(e => a.beforeEffect!.constructor.name.endsWith(e.name));
+    //         if (beforeA >= 0) {
+    //             return -1; // before effect should be rendered first
+    //         }
+    //         else {
+    //             return 1; // no before effect, so we can keep the order
+    //         }
+    //     }
+    //     else if (b.beforeEffect) {
+    //         const beforeB = effectsOrder!.findIndex(e => b.beforeEffect!.constructor.name.endsWith(e.name));
+    //         if (beforeB >= 0) {
+    //             return 1; // before effect should be rendered first
+    //         }
+    //         else if (a.beforeEffect) {
+    //             return -1; // no before effect, so we can keep the order
+    //         }
+    //     }
+    //     return 0; // no before effect, so we can keep the order
+    // });
+    if (debug === "verbose")
+        console.debug("After ordering effects", [...effects]);
+}
 //# sourceMappingURL=utils.js.map

package/lib/engine-components/postprocessing/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/engine-components/postprocessing/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAS3C,IAAI,yBAAyB,GAAuD,IAAI,CAAC;AAEzF,MAAM,UAAU,4BAA4B,CAAC,IAAiD;IAC1F,yBAAyB,GAAG,IAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,MAA4B;IAClE,IAAI,GAAG,GAAG,MAAM,CAAC,UAA6B,CAAC;IAC/C,OAAO,GAAG,EAAE;QACR,KAAK,MAAM,IAAI,IAAI,0BAA0B,CAAC,GAAG,CAAC,EAAE;YAChD,IAAK,IAA0C,CAAC,uBAAuB,KAAK,IAAI,EAAE;gBAC9E,OAAO,IAAyC,CAAC;aACpD;SACJ;QACD,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;KACpB;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,MAA4B;IACjE,IAAI,OAAO,GAAkC,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC/E,IAAI,CAAC,OAAO,EAAE;QACV,IAAI,yBAAyB,EAAE;YAC3B,IAAI,KAAK;gBACL,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAChE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC3B,OAAO,GAAG,YAAY,CAAC,KAAK,EAAE,yBAAyB,CAAC,CAAC;SAC5D;aACI;YACD,IAAI,gBAAgB,EAAE;gBAClB,OAAO,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;SACxD;KACJ;IACD,OAAO,OAAO,CAAC;AACnB,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/engine-components/postprocessing/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAW3C,IAAI,yBAAyB,GAAuD,IAAI,CAAC;AAEzF,MAAM,UAAU,4BAA4B,CAAC,IAAiD;IAC1F,yBAAyB,GAAG,IAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,MAA4B;IAClE,IAAI,GAAG,GAAG,MAAM,CAAC,UAA6B,CAAC;IAC/C,OAAO,GAAG,EAAE;QACR,KAAK,MAAM,IAAI,IAAI,0BAA0B,CAAC,GAAG,CAAC,EAAE;YAChD,IAAK,IAA0C,CAAC,uBAAuB,KAAK,IAAI,EAAE;gBAC9E,OAAO,IAAyC,CAAC;aACpD;SACJ;QACD,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;KACpB;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,MAA4B;IACjE,IAAI,OAAO,GAAkC,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC/E,IAAI,CAAC,OAAO,EAAE;QACV,IAAI,yBAAyB,EAAE;YAC3B,IAAI,KAAK;gBACL,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAChE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC3B,OAAO,GAAG,YAAY,CAAC,KAAK,EAAE,yBAAyB,CAAC,CAAC;SAC5D;aACI;YACD,IAAI,gBAAgB,EAAE;gBAClB,OAAO,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;SACxD;KACJ;IACD,OAAO,OAAO,CAAC;AACnB,CAAC;AASD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,UAAU,EAAE,CAAC;IACb,qBAAqB,EAAE,EAAE;IACzB,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,EAAE;IAChB,mBAAmB,EAAE,EAAE;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,GAAG;IAChB,aAAa,EAAE,GAAG;IAClB,kBAAkB,EAAE,GAAG;IACvB,mBAAmB;CACtB,CAAA;AACD,qEAAqE;AAErE,IAAI,YAAY,GAAmD,IAAI,CAAC;AAExE,MAAM,UAAU,YAAY,CAAC,OAAwC;IACjE,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAEhF,IAAI,CAAC,YAAY,EAAE;QACf,YAAY,GAAG,IAAI,GAAG,EAAsC,CAAC;QAC7D,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;QACpG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,qBAAqB,CAAC,CAAC;QAC1H,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;QAC9F,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;QAC9F,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,4BAA4B,CAAC,SAAS,CAAC,CAAC;QACxG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,4BAA4B,CAAC,YAAY,CAAC,CAAC;QAC9G,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,mBAAmB,CAAC,CAAC;QAC5H,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAChG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,4BAA4B,CAAC,QAAQ,CAAC,CAAC;QACtG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;QAC1G,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,4BAA4B,CAAC,WAAW,CAAC,CAAC;QAC5G,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,4BAA4B,CAAC,aAAa,CAAC,CAAC;QAChH,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,4BAA4B,CAAC,kBAAkB,CAAC,CAAC;KAC7H;IAED,2DAA2D;IAC3D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClB,mFAAmF;QACnF,8IAA8I;QAC9I,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAa,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,WAAyC,CAAC,IAAI,CAAC,CAAC,CAAC;QACvI,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAa,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,WAAyC,CAAC,IAAI,CAAC,CAAC,CAAC;QAEvI,2CAA2C;QAC3C,IAAI,IAAI,GAAG,CAAC,EAAE;YACV,IAAI,KAAK;gBAAE,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACtE,OAAO,CAAC,CAAC,CAAC;SACb;aACI,IAAI,IAAI,GAAG,CAAC,EAAE;YACf,IAAI,KAAK;gBAAE,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACtE,OAAO,CAAC,CAAC;SACZ;QACD,0BAA0B;QAC1B,2BAA2B;QAC3B,OAAO,IAAI,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,2BAA2B;IAC3B,4BAA4B;IAC5B,2GAA2G;IAC3G,8BAA8B;IAC9B,mEAAmE;IACnE,YAAY;IACZ,iBAAiB;IACjB,sEAAsE;IACtE,YAAY;IACZ,QAAQ;IACR,iCAAiC;IACjC,2GAA2G;IAC3G,8BAA8B;IAC9B,kEAAkE;IAClE,YAAY;IACZ,qCAAqC;IACrC,uEAAuE;IACvE,YAAY;IAEZ,QAAQ;IACR,8DAA8D;IAC9D,MAAM;IAGN,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;AACnF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.6.0",
+  "version": "4.6.1-next.50abb78",
   "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.min.js",
   "exports": {
@@ -167,4 +167,4 @@
   "module": "lib/needle-engine.js",
   "typings": "lib/needle-engine.d.ts",
   "types": "lib/needle-engine.d.ts"
-}
+}

package/plugins/vite/dependency-watcher.js

@@ -162,8 +162,14 @@ function testIfInstallIsRequired(projectDir, packageJson) {
                 }
                 if (expectedVersion?.length > 0) {
                     const isRange = expectedVersion.includes("x") || expectedVersion.includes("^") || expectedVersion.includes(">") || expectedVersion.includes("<") || expectedVersion.includes("~");
-                    const isLatest = expectedVersion === "latest";
-                    if (!isRange && !isLatest) {
+                    const isTagName = expectedVersion === "stable" ||
+                        expectedVersion === "latest" ||
+                        expectedVersion === "next" ||
+                        expectedVersion === "beta" ||
+                        expectedVersion === "alpha" ||
+                        expectedVersion === "canary" ||
+                        expectedVersion === "experimental";
+                    if (!isRange && !isTagName) {
                         const packageJsonPath = path.join(depPath, "package.json");
                         /** @type {String} */
                         const installedVersion = JSON.parse(readFileSync(packageJsonPath, "utf8")).version;

package/src/engine/engine_assetdatabase.ts

@@ -61,7 +61,9 @@ export function disposeObjectResources(obj: object | null | undefined) {
         return;
     }
 
-    obj[$disposed] = true;
+    if(typeof obj === "object") {
+        obj[$disposed] = true;
+    }
 
     if (obj instanceof Scene) {
         disposeObjectResources(obj.environment);

package/src/engine/engine_context.ts

@@ -33,7 +33,7 @@ import { NetworkConnection } from './engine_networking.js';
 import { Physics } from './engine_physics.js';
 import { PlayerViewManager } from './engine_playerview.js';
 import { RendererData as SceneLighting } from './engine_scenelighting.js';
-import { logHierarchy } from './engine_three_utils.js';
+import { getTempColor, logHierarchy } from './engine_three_utils.js';
 import { Time } from './engine_time.js';
 import { patchTonemapping } from './engine_tonemapping.js';
 import type { CoroutineData, ICamera, IComponent, IContext, ILight, LoadedModel, Model, Vec2 } from "./engine_types.js";
@@ -758,6 +758,9 @@ export class Context implements IContext {
 		this.physics?.engine?.clearCaches();
 		this.lodsManager.disable();
 
+		this._onBeforeRenderListeners.clear();
+		this._onAfterRenderListeners.clear();
+
 		if (!this.isManagedExternally) {
 			if (this.renderer) {
 				this.renderer.renderLists.dispose();
@@ -889,16 +892,17 @@ export class Context implements IContext {
 		}
 	}
 
-	private _onBeforeRenderListeners = new Map<string, OnRenderCallback[]>();
-	private _onAfterRenderListeners = new Map<string, OnRenderCallback[]>();
+	private readonly _onBeforeRenderListeners = new Map<string, OnRenderCallback[]>();
+	private readonly _onAfterRenderListeners = new Map<string, OnRenderCallback[]>();
 
 	/** Use to subscribe to onBeforeRender events on threejs objects.
 	 * @link https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender
 	 */
 	addBeforeRenderListener(target: Object3D, callback: OnRenderCallback) {
 		if (!this._onBeforeRenderListeners.has(target.uuid)) {
-			this._onBeforeRenderListeners.set(target.uuid, []);
-			target.onBeforeRender = this._createRenderCallbackWrapper(target, this._onBeforeRenderListeners);
+			const arr: OnRenderCallback[] = [];
+			this._onBeforeRenderListeners.set(target.uuid, arr);
+			target.onBeforeRender = this._createRenderCallbackWrapper(arr);
 		}
 		this._onBeforeRenderListeners.get(target.uuid)!.push(callback);
 	}
@@ -919,8 +923,9 @@ export class Context implements IContext {
 	*/
 	addAfterRenderListener(target: Object3D, callback: OnRenderCallback) {
 		if (!this._onAfterRenderListeners.has(target.uuid)) {
-			this._onAfterRenderListeners.set(target.uuid, []);
-			target.onAfterRender = this._createRenderCallbackWrapper(target, this._onAfterRenderListeners);
+			const arr = [];
+			this._onAfterRenderListeners.set(target.uuid, arr);
+			target.onAfterRender = this._createRenderCallbackWrapper(arr);
 		}
 		this._onAfterRenderListeners.get(target.uuid)?.push(callback);
 	}
@@ -937,12 +942,10 @@ export class Context implements IContext {
 	}
 
 
-	private _createRenderCallbackWrapper(target: Object3D, array: Map<string, OnRenderCallback[]>): OnRenderCallback {
+	private _createRenderCallbackWrapper(array: 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];
+			for (let i = 0; i < array.length; i++) {
+				const fn = array[i];
 				fn(renderer, scene, camera, geometry, material, group);
 			}
 		}
@@ -1609,6 +1612,8 @@ export class Context implements IContext {
 				if (currentPassesCamera != camera)
 					this.composer.setMainCamera(camera);
 			}
+			const backgroundColor = this.renderer.getClearColor(getTempColor());
+			if(backgroundColor) this.renderer.setClearColor(backgroundColor.convertSRGBToLinear());
 			this.composer.render(this.time.deltaTime);
 		}
 		else if (camera) {

package/src/engine/engine_utils_screenshot.ts

@@ -45,7 +45,7 @@ export declare type ScreenshotOptions = {
     /**
      * The context to take the screenshot from. If not provided, the current context will be used.
      */
-    context?: Pick<Context, "scene" | "renderer" | "mainCamera" | "renderNow" | "updateAspect" | "updateSize" | "currentFrameEvent">,
+    context?: Pick<Context, "scene" | "renderer" | "mainCamera" | "renderNow" | "updateAspect" | "updateSize" | "currentFrameEvent" | "devicePixelRatio">,
     /**
      * The width of the screenshot - if not provided, the width of the current renderer will be used.
      */
@@ -205,11 +205,21 @@ export function screenshot2(opts: ScreenshotOptionsDataUrl | ScreenshotOptionsTe
     const renderWidth = width;
     const renderHeight = height;
 
-    // apply page zoom
-    const zoomLevel = window.devicePixelRatio || 1;
+    // Apply page zoom
+    let zoomLevel = (window.devicePixelRatio || 1);
+    let contextZoomLevel = 1;
+    // Apply context zoom level
+    if (context.devicePixelRatio === 'auto' || context.devicePixelRatio === 'manual')
+        contextZoomLevel = 1;
+    else
+        contextZoomLevel = context.devicePixelRatio / window.devicePixelRatio;
+    zoomLevel *= contextZoomLevel;
     width /= zoomLevel;
     height /= zoomLevel;
 
+    width = Math.floor(width);
+    height = Math.floor(height);
+
     // save XR state and reset it for screenshot
     const xrframe = renderer.xr.isPresenting && renderer.xr.getFrame();
     const previousXRState = renderer.xr.enabled;

package/src/engine-components/ReflectionProbe.ts

@@ -22,6 +22,10 @@ export class ReflectionProbe extends Behaviour {
 
     private static _probes: Map<Context, ReflectionProbe[]> = new Map();
 
+    static isUsingReflectionProbe(material: Material) {
+        return !!(material[$reflectionProbeKey] || material[$originalMaterial]?.[$reflectionProbeKey]);
+    }
+
     public static get(object: Object3D | null | undefined, context: Context, isAnchor: boolean, anchor?: Object3D): ReflectionProbe | null {
         if (!object || object.isObject3D !== true) return null;
         if (disable) return null;
@@ -29,7 +33,7 @@ export class ReflectionProbe extends Behaviour {
         if (probes) {
             for (const probe of probes) {
                 if (!probe.__didAwake) probe.__internalAwake();
-                if (probe.enabled) {
+                if (probe.activeAndEnabled) {
                     if (anchor) {
                         // test if anchor is reflection probe object
                         if (probe.gameObject === anchor) {

package/src/engine-components/Renderer.ts

@@ -708,7 +708,15 @@ export class Renderer extends Behaviour implements IRenderer {
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
             this._reflectionProbe.onSet(this);
         }
-
+        // since three 163 we need to set the envMap to the scene envMap if it is not set
+        // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
+        // internal issue: https://linear.app/needle/issue/NE-6363
+        for (const mat of this._sharedMaterials) {
+            // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
+            if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
+                mat.envMap = this.context.scene.environment;
+            }
+        }
     }
 
     private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
@@ -716,11 +724,6 @@ export class Renderer extends Behaviour implements IRenderer {
             const factor = this.hasLightmap ? Math.PI : 1;
             const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
-            
-            // since three 163 we need to set the envMap to the scene envMap if it is not set
-            // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
-            // internal issue: https://linear.app/needle/issue/NE-6363
-            if (!material.envMap) material.envMap = this.context.scene.environment;
         }
 
         if (this._lightmaps) {
@@ -856,7 +859,7 @@ export class SkinnedMeshRenderer extends MeshRenderer {
                         mesh.computeBoundingSphere();
                         mesh.geometry = geometry;
                     }
-                    catch(err) {
+                    catch (err) {
                         console.error(`Error updating bounding sphere for ${mesh.name}`, err);
                     }
                 }

package/src/engine-components/postprocessing/Effects/Antialiasing.ts

@@ -33,7 +33,9 @@ export class Antialiasing extends PostProcessingEffect {
     onCreateEffect(): EffectProviderResult {
         const effect = new MODULES.POSTPROCESSING.MODULE.SMAAEffect({
             preset: MODULES.POSTPROCESSING.MODULE.SMAAPreset.HIGH,
-            edgeDetectionMode: MODULES.POSTPROCESSING.MODULE.EdgeDetectionMode.DEPTH
+            edgeDetectionMode: MODULES.POSTPROCESSING.MODULE.EdgeDetectionMode.LUMA,
+            // Keep predication mode disabled (default) since it looks better
+            // predicationMode: MODULES.POSTPROCESSING.MODULE.PredicationMode.DEPTH,
         });
 
         this.preset.onValueChanged = (newValue) => {

package/src/engine-components/postprocessing/Effects/BloomEffect.ts

@@ -1,4 +1,4 @@
-import type { BloomEffect as _BloomEffect } from "postprocessing";
+import { BloomEffect as _BloomEffect, EffectAttribute } from "postprocessing";
 import { MathUtils } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
@@ -91,8 +91,10 @@ export class BloomEffect extends PostProcessingEffect {
                 luminanceThreshold: this.threshold.value,
                 luminanceSmoothing: this.scatter.value,
                 radius: 0.85, // default value
-                intensity: this.intensity.value,
+                intensity: this.intensity.value, 
             });
+            // @ts-ignore Well... it's protected but bloom needs this :(
+            bloom.setAttributes(EffectAttribute.CONVOLUTION);
         }
 
         this.intensity.onValueChanged = newValue => {

package/src/engine-components/postprocessing/Effects/Tonemapping.ts

@@ -1,5 +1,5 @@
 import type { ToneMappingEffect as _TonemappingEffect, ToneMappingMode } from "postprocessing";
-import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping } from "three";
+import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping, WebGLRenderer } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
@@ -36,6 +36,7 @@ function toThreeToneMapping(mode: NEToneMappingMode | undefined) {
         case NEToneMappingMode.KhronosNeutral:
             return NeutralToneMapping;
         default:
+            if(debug) console.warn("[Postprocessing] Unknown tone mapping mode", mode);
             return NeutralToneMapping;
     }
 }
@@ -84,7 +85,7 @@ export class ToneMappingEffect extends PostProcessingEffect {
     setMode(mode: NEToneMappingModeNames) {
         const enumValue = NEToneMappingMode[mode as NEToneMappingModeNames];
         if (enumValue === undefined) {
-            console.error("Invalid ToneMapping mode", mode);
+            console.error("[PostProcessing] Invalid ToneMapping mode", mode);
             return this;
         }
         this.mode.value = enumValue;
@@ -110,7 +111,7 @@ export class ToneMappingEffect extends PostProcessingEffect {
                 if (other === this) break;
                 // If another tonemapping effect is found, warn the user
                 if (other != this && other instanceof ToneMappingEffect) {
-                    console.warn("Multiple tonemapping effects found in the same postprocessing stack: Please check your scene setup.", { activeEffect: other, ignoredEffect: this });
+                    console.warn("[PostProcessing] Multiple tonemapping effects found in the same postprocessing stack: Please check your scene setup.", { activeEffect: other, ignoredEffect: this });
                     return undefined;
                 }
             }
@@ -119,8 +120,9 @@ export class ToneMappingEffect extends PostProcessingEffect {
 
         // ensure the effect tonemapping value is initialized
         if (this.mode.isInitialized == false) {
-            const init = threeToNeToneMapping(this.context.renderer.toneMapping);
-            this.mode.initialize(init);
+            const mode = threeToNeToneMapping(this.context.renderer.toneMapping);
+            if(debug) console.log("[PostProcessing] Initializing ToneMapping mode to renderer.toneMapping", this.context.renderer.toneMapping + " → " + mode);
+            this.mode.initialize(mode);
         }
 
         const threeMode = toThreeToneMapping(this.mode.value);
@@ -130,9 +132,9 @@ export class ToneMappingEffect extends PostProcessingEffect {
         this.mode.onValueChanged = (newValue) => {
             const threeMode = toThreeToneMapping(newValue);
             tonemapping.mode = threeToneMappingToEffectMode(threeMode);
-            if (debug) console.log("ToneMapping mode changed to", NEToneMappingMode[newValue], threeMode, tonemapping.mode);
+            if (debug) console.log("[PostProcessing] ToneMapping mode changed to", NEToneMappingMode[newValue], threeMode, tonemapping.mode);
         };
-        if (debug) console.log("Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
+        if (debug) console.log("[PostProcessing] Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
 
 
         this.exposure.onValueChanged = (newValue) => {

package/src/engine-components/postprocessing/PostProcessingEffect.ts

@@ -55,6 +55,25 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
 
     get isPostProcessingEffect() { return true; }
 
+    /**
+     * The priority of this effect. The higher the priority the later the effect will be applied in the post processing stack.
+     * This can be used to control the order of effects when multiple effects are applied.  
+     * It is recommended to use the PostProcessingEffectPriority constant to order your custom effects before or after built-in effects.  
+     * @default `undefined` (no specific priority set, will be applied in the order of registration)
+     * 
+     * @example
+     * ```typescript
+     * import { PostProcessingEffectPriority } from "@needle-tools/engine"
+     * 
+     * export class MyCustomEffect extends PostProcessingEffect {
+     *    priority: PostProcessingEffectPriority.Bloom + 1; // render after bloom
+     *    
+     *    // ... the rest of your effect code
+     * }
+     * ```
+     */
+    priority: number | undefined = undefined;
+
     constructor(params: any = undefined) {
         super();
         if (params) {
@@ -103,7 +122,8 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
     protected onEffectEnabled(manager?: IPostProcessingManager) {
         if (manager && manager.isPostProcessingManager === true) this._manager = manager;
         else if (!this._manager) this._manager = getPostProcessingManager(this);
-        this._manager?.addEffect(this);
+        this._manager!.addEffect(this);
+        this._manager!.dirty = true;
     }
 
     /** override to initialize bindings on parameters */