@needle-tools/engine 4.6.0-next.ffc175e → 4.6.1-next.1e3d612

package/lib/engine-components/postprocessing/utils.d.ts

@@ -1,11 +1,54 @@
+import type { Effect, Pass } from "postprocessing";
 import { ConstructorConcrete, IComponent } from "../../engine/engine_types.js";
 import { type PostProcessingEffect } from "./PostProcessingEffect.js";
 export declare const debug: string | number | boolean;
 export type IPostProcessingManager = IComponent & {
     get isPostProcessingManager(): boolean;
+    get dirty(): boolean;
+    set dirty(value: boolean);
     addEffect(effect: PostProcessingEffect): void;
     removeEffect(effect: PostProcessingEffect): void;
 };
 export declare function setPostprocessingManagerType(type: ConstructorConcrete<IPostProcessingManager>): void;
 export declare function findPostProcessingManager(effect: PostProcessingEffect): IPostProcessingManager | null;
 export declare function getPostProcessingManager(effect: PostProcessingEffect): IPostProcessingManager | null;
+export type PostprocessingEffectData = {
+    effect: Effect | Pass;
+    priority?: number;
+};
+/**
+ * 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 declare const PostProcessingEffectPriority: {
+    /** Used to render effects at the start of the post-processing chain */
+    AT_START: number;
+    NormalPass: number;
+    DepthDownsamplingPass: number;
+    SSAO: number;
+    SMAA: number;
+    TiltShift: number;
+    DepthOfField: number;
+    ChromaticAberration: number;
+    Bloom: number;
+    Vignette: number;
+    Pixelation: number;
+    ToneMapping: number;
+    HueSaturation: number;
+    BrightnessContrast: number;
+    Sharpening: number;
+    /** Used to render effects at the end of the post-processing chain, e.g. for final adjustments or overlays. */
+    AT_END: number;
+};
+export declare function orderEffects(effects: Array<PostprocessingEffectData>): void;

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,84 @@ 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 = {
+    /** Used to render effects at the start of the post-processing chain */
+    AT_START: -10_000,
+    NormalPass: 0,
+    DepthDownsamplingPass: 10,
+    SSAO: 20,
+    SMAA: 30,
+    TiltShift: 40,
+    DepthOfField: 50,
+    ChromaticAberration: 60,
+    Bloom: 70,
+    Vignette: 80,
+    Pixelation: 90,
+    ToneMapping: 100,
+    HueSaturation: 110,
+    BrightnessContrast: 120,
+    Sharpening: 130,
+    /** Used to render effects at the end of the post-processing chain, e.g. for final adjustments or overlays. */
+    AT_END: 10_000,
+};
+// 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_AO.MODULE.N8AOPostPass, 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.SelectiveBloomEffect, 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, a);
+            return 1;
+        }
+        else if (bidx < 0) {
+            if (debug)
+                console.warn("Unknown effect found: ", b.constructor.name, b);
+            return -1;
+        }
+        return aidx - bidx;
+    });
+    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,uEAAuE;IACvE,QAAQ,EAAE,CAAC,MAAM;IAEjB,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,UAAU,EAAE,GAAG;IAEf,8GAA8G;IAC9G,MAAM,EAAE,MAAM;CACjB,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,iBAAiB,CAAC,MAAM,CAAC,YAAY,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;QACnG,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,oBAAoB,EAAE,4BAA4B,CAAC,KAAK,CAAC,CAAC;QACzG,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,EAAE,CAAC,CAAC,CAAC;YACzE,OAAO,CAAC,CAAC;SACZ;aACI,IAAI,IAAI,GAAG,CAAC,EAAE;YACf,IAAI,KAAK;gBAAE,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACzE,OAAO,CAAC,CAAC,CAAC;SACb;QACD,OAAO,IAAI,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC,CAAC;IAGH,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-next.ffc175e",
+  "version": "4.6.1-next.1e3d612",
   "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": {

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);
 			}
 		}
@@ -1589,6 +1592,8 @@ export class Context implements IContext {
 		}
 	}
 
+	private readonly _tempClearColor = new Color();
+	private readonly _tempClearColor2 = new Color();
 	renderNow(camera?: Camera) {
 		if (!camera) {
 			camera = this.mainCamera as Camera;
@@ -1609,7 +1614,12 @@ export class Context implements IContext {
 				if (currentPassesCamera != camera)
 					this.composer.setMainCamera(camera);
 			}
+
+			const backgroundColor = this.renderer.getClearColor(this._tempClearColor);
+			this._tempClearColor2.copy(backgroundColor);
+			this.renderer.setClearColor(backgroundColor.convertSRGBToLinear());
 			this.composer.render(this.time.deltaTime);
+			this.renderer.setClearColor(this._tempClearColor2); // restore clear color
 		}
 		else if (camera) {
 			// Workaround for issue on Vision Pro – 

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/ScreenspaceAmbientOcclusionN8.ts

@@ -124,6 +124,7 @@ export class ScreenSpaceAmbientOcclusionN8 extends PostProcessingEffect {
             cam,
             width, height
         ) as N8AOPostPass;
+        ssao.name = "SSAO N8";
 
         const mode = ScreenSpaceAmbientOcclusionN8QualityMode[this.quality];
         ssao.setQualityMode(mode);

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

@@ -1,8 +1,10 @@
+import { EffectAttribute } from "postprocessing";
 import { Uniform } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
 import { PostProcessingEffect } from "../PostProcessingEffect.js";
+import { PostProcessingEffectPriority } from "../utils.js";
 // import type { createSharpeningEffectType } from "./Sharpening.effect";
 
 // let __SHARPENING_MODULE: typeof import("./Sharpening.effect");
@@ -21,6 +23,8 @@ export class SharpeningEffect extends PostProcessingEffect {
         return "Sharpening";
     }
 
+    priority: number | undefined = PostProcessingEffectPriority.Sharpening;
+
     private _effect?: any;
 
     onCreateEffect() {
@@ -130,6 +134,7 @@ function createSharpeningEffectType() {
                     ["radius", new Uniform(1)],
                     // ["threshold", new Uniform(0)],
                 ]),
+                attributes: EffectAttribute.CONVOLUTION
             });
         }
     }

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) {
@@ -86,7 +105,7 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
 
     onEnable(): void {
         super.onEnable();
-        if (debug) console.warn("onEnable effect", this, this.__internalDidAwakeAndStart)
+        if (debug) console.warn("Enable", this.constructor.name + (!this.__internalDidAwakeAndStart ? " (awake)" : ""));
         // Dont override the serialized value by enabling (we could also just disable this component / map enabled to active)
         if (this.__internalDidAwakeAndStart)
             this.active = true;
@@ -95,7 +114,7 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
 
     onDisable(): void {
         super.onDisable();
-        if (debug) console.warn("onDisable effect", this)
+        if (debug) console.warn("Disable", this.constructor.name);
         this._manager?.removeEffect(this);
         this.active = false;
     }
@@ -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 */