@needle-tools/engine 4.3.0 → 4.3.2-beta

package/plugins/vite/copyfiles.js

@@ -65,7 +65,7 @@ async function run(buildstep, config) {
 
     const outDir = resolve(baseDir, outdirName);
     if (!existsSync(outDir)) {
-        mkdirSync(outDir);
+        mkdirSync(outDir, { recursive: true });
     }
 
     // copy a list of files or directories declared in build.copy = [] in the needle.config.json

package/src/engine/engine_time.ts

@@ -42,7 +42,19 @@ export class Time implements ITime {
         return this.clock.elapsedTime;
     }
 
-    /** Approximated frames per second (Read Only). */
+    /** 
+     * @returns {Number} FPS for this frame.   
+     * Note that this returns the raw value (e.g. 59.88023952362959) and will fluctuate a lot between frames.  
+     * If you want a more stable FPS, use `smoothedFps` instead.
+    */
+    get fps() {
+        return 1 / this.deltaTime;
+    }
+
+    /** 
+     * Approximated frames per second   
+     * @returns the smoothed FPS value over the last 60 frames with decimals.  
+    */
     get smoothedFps() { return this._smoothedFps; }
     /** The smoothed time in seconds it took to complete the last frame (Read Only). */
     get smoothedDeltaTime() { return 1 / this._smoothedFps; }
@@ -51,7 +63,7 @@ export class Time implements ITime {
     private clock = new Clock();
     private _smoothedFps: number = 0;
     private _smoothedDeltaTime: number = 0;
-    private _fpsSamples: number[] = [];
+    private readonly _fpsSamples: number[] = [];
     private _fpsSampleIndex: number = 0;
 
     constructor() {

package/src/engine-components/Duplicatable.ts

@@ -1,6 +1,7 @@
 import { Object3D, Quaternion, Vector3 } from "three";
 
 import { isDevEnvironment } from "../engine/debug/index.js";
+import { WaitForSeconds } from "../engine/engine_coroutine.js";
 import { InstantiateOptions } from "../engine/engine_gameobject.js";
 import { InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
@@ -30,17 +31,10 @@ export class Duplicatable extends Behaviour implements IPointerEventHandler {
 
     /**
      * The maximum number of objects that can be duplicated in the interval.
-     * @default 10
-     */
-    @serializable()
-    limitCount = 10;
-
-    /**
-     * The interval in seconds in which the limitCount is reset.
      * @default 60
      */
     @serializable()
-    limitInterval = 60;
+    limitCount = 60;
 
     private _currentCount = 0;
     private _startPosition: Vector3 | null = null;
@@ -94,8 +88,9 @@ export class Duplicatable extends Behaviour implements IPointerEventHandler {
 
         if (!this.gameObject.getComponentInParent(ObjectRaycaster))
             this.gameObject.addComponent(ObjectRaycaster);
-
-        this.cloneLimitIntervalFn();
+    }
+    onEnable(): void {
+        this.startCoroutine(this.cloneLimitIntervalFn());
     }
 
     private _forwardPointerEvents: Map<Object3D, DragControls> = new Map();
@@ -131,7 +126,12 @@ export class Duplicatable extends Behaviour implements IPointerEventHandler {
             }
         }
         else {
-            console.warn("Could not duplicate object. Has the target object been destroyed?", this);
+            if (this._currentCount >= this.limitCount) {
+                console.warn(`[Duplicatable] Limit of ${this.limitCount} objects created within a few seconds reached. Please wait a moment before creating more objects.`);
+            }
+            else {
+                console.warn(`[Duplicatable] Could not duplicate object.`);
+            }
         }
     }
 
@@ -145,19 +145,21 @@ export class Duplicatable extends Behaviour implements IPointerEventHandler {
         }
     }
 
-    private cloneLimitIntervalFn() {
-        if (this.destroyed) return;
-        if (this._currentCount > 0) {
-            this._currentCount -= 1;
+    private *cloneLimitIntervalFn() {
+        while (this.activeAndEnabled && !this.destroyed) {
+            if (this._currentCount > 0) {
+                this._currentCount -= 1;
+            }
+            else if (this._currentCount < 0) {
+                this._currentCount = 0;
+            }
+            yield WaitForSeconds(1);
         }
-        setTimeout(() => {
-            this.cloneLimitIntervalFn();
-        }, (this.limitInterval / this.limitCount) * 1000);
     }
 
     private handleDuplication(): Object3D | null {
         if (!this.object) return null;
-        if (this._currentCount >= this.limitCount) return null;
+        if (this.limitCount > 0 && this._currentCount >= this.limitCount) return null;
         if (this.object === this.gameObject) return null;
         if (GameObject.isDestroyed(this.object)) {
             this.object = null;

package/src/engine-components/OrbitControls.ts

@@ -332,6 +332,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
         this._activePointerEvents = [];
         this.context.input.addEventListener("pointerdown", this._onPointerDown, { queue: InputEventQueue.Early });
+        this.context.input.addEventListener("pointerdown", this._onPointerDownLate, { queue: InputEventQueue.Late });
         this.context.input.addEventListener("pointerup", this._onPointerUp, { queue: InputEventQueue.Early });
         this.context.input.addEventListener("pointerup", this._onPointerUpLate, { queue: InputEventQueue.Late });
     }
@@ -352,6 +353,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
         }
         this._activePointerEvents.length = 0;
         this.context.input.removeEventListener("pointerdown", this._onPointerDown);
+        this.context.input.removeEventListener("pointerdown", this._onPointerDownLate);
         this.context.input.removeEventListener("pointerup", this._onPointerUp);
         this.context.input.removeEventListener("pointerup", this._onPointerUpLate);
     }
@@ -363,6 +365,12 @@ export class OrbitControls extends Behaviour implements ICameraController {
     private _onPointerDown = (_evt: NEPointerEvent) => {
         this._activePointerEvents.push(_evt);
     }
+    private _onPointerDownLate = (evt: NEPointerEvent) => {
+        if(evt.used && this._controls) {
+            // Disabling orbit controls here because otherwise we get a slight movement when e.g. using DragControls
+            this._controls.enabled = false;
+        }
+    }
 
     private _onPointerUp = (evt: NEPointerEvent) => {
         // make sure we cleanup the active pointer events

package/src/engine-components/Renderer.ts

@@ -847,11 +847,18 @@ export class SkinnedMeshRenderer extends MeshRenderer {
             for (const mesh of this.sharedMeshes) {
                 if (mesh instanceof SkinnedMesh) {
                     this._needUpdateBoundingSphere = false;
-                    const geometry = mesh.geometry;
-                    const raycastmesh = getRaycastMesh(mesh);
-                    if (raycastmesh) mesh.geometry = raycastmesh;
-                    mesh.computeBoundingSphere();
-                    mesh.geometry = geometry;
+                    try {
+                        const geometry = mesh.geometry;
+                        const raycastmesh = getRaycastMesh(mesh);
+                        if (raycastmesh) {
+                            mesh.geometry = raycastmesh;
+                        }
+                        mesh.computeBoundingSphere();
+                        mesh.geometry = geometry;
+                    }
+                    catch(err) {
+                        console.error(`Error updating bounding sphere for ${mesh.name}`, err);
+                    }
                 }
             }
         }

package/src/engine-components/RendererInstancing.ts

@@ -1,6 +1,7 @@
 import { BatchedMesh, BufferGeometry, Color, Material, Matrix4, Mesh, MeshStandardMaterial, Object3D, RawShaderMaterial } from "three";
 
 import { isDevEnvironment, showBalloonError } from "../engine/debug/index.js";
+import { Gizmos } from "../engine/engine_gizmos.js";
 import { $instancingAutoUpdateBounds, $instancingRenderer, NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing.js";
 import { Context } from "../engine/engine_setup.js";
 import { getParam, makeIdFromRandomWords } from "../engine/engine_utils.js";
@@ -337,6 +338,12 @@ class InstancedMeshRenderer {
             this._batchedMesh.computeBoundingBox();
         if (sphere)
             this._batchedMesh.computeBoundingSphere();
+        if (debugInstancing && this._batchedMesh.boundingSphere) {
+            const sphere = this._batchedMesh.boundingSphere;
+            // const worldPos = this._batchedMesh.worldPosition.add(sphere.center);
+            // const worldRadius = sphere!.radius;
+            Gizmos.DrawWireSphere(sphere.center, sphere.radius, 0x00ff00);
+        }
     }
 
     private _context: Context;
@@ -401,7 +408,7 @@ class InstancedMeshRenderer {
             //             break;
             //     }
             // }
-            if(!canMergeMaterial) {
+            if (!canMergeMaterial) {
                 return false;
             }
         }
@@ -566,7 +573,7 @@ class InstancedMeshRenderer {
         this.markNeedsUpdate();
     }
 
-    updateGeometry(geo: BufferGeometry, index: number) {
+    updateGeometry(geo: BufferGeometry, geometryIndex: number): boolean {
         if (!this.validateGeometry(geo)) {
             return false;
         }
@@ -575,10 +582,11 @@ class InstancedMeshRenderer {
             this.grow(geo);
         }
         if (debugInstancing)
-            console.debug("UPDATE MESH", index, this._batchedMesh["_geometryCount"], geo.name, getMeshInformation(geo), geo.attributes.position.count, geo.index ? geo.index.count : 0);
-
+            console.debug("[Instancing] UPDATE GEOMETRY at " + geometryIndex, this._batchedMesh["_geometryCount"], geo.name, getMeshInformation(geo), geo.attributes.position.count, geo.index ? geo.index.count : 0);
 
-        this._batchedMesh.setGeometryAt(index, geo);
+        this._batchedMesh.setGeometryAt(geometryIndex, geo);
+        // for LOD mesh updates we need to make sure to save the geometry index
+        this._geometryIds.set(geo, geometryIndex);
         this.markNeedsUpdate();
         return true;
     }
@@ -588,7 +596,7 @@ class InstancedMeshRenderer {
         this._batchedMesh.layers.enableAll();
 
         if (this._needUpdateBounds && this._batchedMesh[$instancingAutoUpdateBounds] === true) {
-            if (debugInstancing) console.log("Update instancing bounds", this.name, this._batchedMesh.matrixWorldNeedsUpdate);
+            if (debugInstancing === "verbose") console.log("Update instancing bounds", this.name, this._batchedMesh.matrixWorldNeedsUpdate);
             this.updateBounds();
         }
     }
@@ -623,7 +631,9 @@ class InstancedMeshRenderer {
     }
 
     private markNeedsUpdate() {
-        if (debugInstancing) console.warn("Marking instanced mesh dirty", this.name);
+        if (debugInstancing === "verbose") {
+            console.warn("Marking instanced mesh dirty", this.name);
+        }
         this._needUpdateBounds = true;
         // this.inst.instanceMatrix.needsUpdate = true;
     }
@@ -641,19 +651,23 @@ class InstancedMeshRenderer {
     }
 
     private grow(geometry: BufferGeometry) {
-        const newSize = this._maxInstanceCount * 2;
+        const growFactor = 2;
+        const newSize = Math.ceil(this._maxInstanceCount * growFactor);
 
         // create a new BatchedMesh instance
         const estimatedSpace = this.tryEstimateVertexCountSize(newSize, [geometry]);// geometry.attributes.position.count;
         // const indices = geometry.index ? geometry.index.count : 0;
         const newMaxVertexCount = Math.max(this._maxVertexCount, estimatedSpace.vertexCount);
-        const newMaxIndexCount = Math.max(this._maxIndexCount, estimatedSpace.indexCount, this._maxVertexCount * 2);
+        const newMaxIndexCount = Math.max(this._maxIndexCount, estimatedSpace.indexCount, Math.ceil(this._maxVertexCount * growFactor));
 
         if (debugInstancing) {
             const geometryInfo = getMeshInformation(geometry);
-            console.warn(`Growing batched mesh for \"${this.name}/${geometry.name}\" ${geometryInfo.vertexCount} vertices, ${geometryInfo.indexCount} indices\nMax count ${this._maxInstanceCount} → ${newSize}\nMax vertex count ${this._maxVertexCount} -> ${newMaxVertexCount}\nMax index count ${this._maxIndexCount} -> ${newMaxIndexCount}`);
+            console.warn(`[Instancing] Growing Buffer\nMesh: \"${this.name}${geometry.name?.length ? "/" + geometry.name : ""}\"\n${geometryInfo.vertexCount} vertices, ${geometryInfo.indexCount} indices\nMax count ${this._maxInstanceCount} → ${newSize}\nMax vertex count ${this._maxVertexCount} -> ${newMaxVertexCount}\nMax index count ${this._maxIndexCount} -> ${newMaxIndexCount}`);
             this._debugMaterial = createDebugMaterial();
         }
+        else if (isDevEnvironment()) {
+            console.debug(`[Instancing] Growing Buffer\nMesh: \"${this.name}${geometry.name?.length ? "/" + geometry.name : ""}\"\nMax count ${this._maxInstanceCount} → ${newSize}\nMax vertex count ${this._maxVertexCount} -> ${newMaxVertexCount}\nMax index count ${this._maxIndexCount} -> ${newMaxIndexCount}`);
+        }
 
         this._maxVertexCount = newMaxVertexCount;
         this._maxIndexCount = newMaxIndexCount;
@@ -679,8 +693,6 @@ class InstancedMeshRenderer {
 
         // since we have a new batched mesh we need to re-add all the instances
         // fixes https://linear.app/needle/issue/NE-5711
-        this._usedBuckets.length = 0;
-        this._availableBuckets.length = 0;
 
         // add current instances to new instanced mesh
         const original = [...this._handles];
@@ -745,70 +757,26 @@ class InstancedMeshRenderer {
     }
 
 
-    private readonly _availableBuckets = new Array<BucketInfo>();
-    private readonly _usedBuckets = new Array<BucketInfo>();
-
     private addGeometry(handle: InstanceHandle) {
 
-        const geo = handle.object.geometry as BufferGeometry;
+        const obj = handle.object;
+        const geo = obj.geometry as BufferGeometry;
         if (!geo) {
             // if the geometry is null we cannot add it
             return;
         }
 
-        // if (handle.reservedVertexCount <= 0 || handle.reservedIndexCount <= 0) {
-        //     console.error("Cannot add geometry with 0 vertices or indices", handle.name);
-        //     return;
-        // }
-        // search the smallest available bucket that fits our handle
-        let smallestBucket: BucketInfo | null = null;
-        let smallestBucketIndex = -1;
-        for (let i = this._availableBuckets.length - 1; i >= 0; i--) {
-            const bucket = this._availableBuckets[i];
-            if (bucket.vertexCount >= handle.maxVertexCount && bucket.indexCount >= handle.maxIndexCount) {
-                if (smallestBucket == null || bucket.vertexCount < smallestBucket.vertexCount) {
-                    smallestBucket = bucket;
-                    smallestBucketIndex = i;
-                }
-            }
-        }
-        // if we have a bucket that is big enough, use it
-        if (smallestBucket != null) {
-            const bucket = smallestBucket;
-            if (debugInstancing)
-                console.debug(`RE-USE SPACE #${bucket.geometryIndex}, ${handle.maxVertexCount} vertices, ${handle.maxIndexCount} indices, ${handle.name}`);
-            try {
-                this._batchedMesh.setGeometryAt(bucket.geometryIndex, handle.object.geometry as BufferGeometry);
-                const newIndex = this._batchedMesh.addInstance(bucket.geometryIndex);
-                this._batchedMesh.setMatrixAt(newIndex, handle.object.matrixWorld);
-                this._batchedMesh.setVisibleAt(newIndex, true);
-                handle.__instanceIndex = newIndex;
-                this._usedBuckets[bucket.geometryIndex] = bucket;
-                this._availableBuckets.splice(smallestBucketIndex, 1);
-                return;
-            }
-            catch (err) {
-                if (debugInstancing)
-                    console.error("Failed to re-use space", err);
-                else if (isDevEnvironment()) {
-                    console.warn(`Failed to re-use space \"${err instanceof Error ? err.message : err}\" in bucket ${bucket.geometryIndex} (${bucket.vertexCount}) - will add new geometry instead`);
-                }
-            }
-        }
-
         // otherwise add more geometry / instances
         let geometryId = this._geometryIds.get(geo);
         if (geometryId === undefined || geometryId === null) {
             if (debugInstancing)
-                console.debug("ADD GEOMETRY & INSTANCE", geo.name, "\nvertex:", `${this._currentVertexCount} + ${handle.maxVertexCount} < ${this._maxVertexCount}?`, "\nindex:", handle.maxIndexCount, this._currentIndexCount, this._maxIndexCount);
-
-
+                console.debug(`[Instancing] > ADD NEW GEOMETRY \"${handle.name} (${geo.name}; ${geo.uuid})\"\n${this._currentInstanceCount} instances, ${handle.maxVertexCount} max vertices, ${handle.maxIndexCount} max indices`);
 
             geometryId = this._batchedMesh.addGeometry(geo, handle.maxVertexCount, handle.maxIndexCount);
             this._geometryIds.set(geo, geometryId);
         }
         else {
-            if (debugInstancing) console.log("ADD INSTANCE", geometryId, geo.name);
+            if (debugInstancing === "verbose") console.log(`[Instancing] > ADD INSTANCE \"${handle.name}\"\nGEOMETRY_ID=${geometryId}\n${this._currentInstanceCount} instances`);
         }
         this._currentVertexCount += handle.maxVertexCount;
         this._currentIndexCount += handle.maxIndexCount;
@@ -817,10 +785,9 @@ class InstancedMeshRenderer {
         handle.__instanceIndex = i;
         handle.__reservedVertexRange = handle.maxVertexCount;
         handle.__reservedIndexRange = handle.maxIndexCount;
-        this._usedBuckets[i] = { geometryIndex: geometryId, vertexCount: handle.maxVertexCount, indexCount: handle.maxIndexCount };
         this._batchedMesh.setMatrixAt(i, handle.object.matrixWorld);
         if (debugInstancing)
-            console.debug(`ADD MESH & RESERVE SPACE #${i}, ${handle.maxVertexCount} vertices, ${handle.maxIndexCount} indices, ${handle.name} ${handle.object.uuid}`);
+            console.debug(`[Instancing] > ADDED INSTANCE \"${handle.name}\"\nGEOMETRY_ID=${geometryId}\n${this._currentInstanceCount} instances\nIndex: ${handle.__instanceIndex}`);
 
     }
 
@@ -830,19 +797,16 @@ class InstancedMeshRenderer {
             console.warn("Cannot remove geometry, instance index is invalid", handle.name);
             return;
         }
-        this._usedBuckets.splice(handle.__instanceIndex, 1);
         // deleteGeometry is currently not useable since there's no optimize method
         // https://github.com/mrdoob/three.js/issues/27985
         // if (del)
         //     this.inst.deleteGeometry(handle.__instanceIndex);
         // else 
         // this._batchedMesh.setVisibleAt(handle.__instanceIndex, false);
+        if(debugInstancing) {
+            console.debug(`[Instancing] < REMOVE INSTANCE \"${handle.name}\" at [${handle.__instanceIndex}]\nGEOMETRY_ID=${handle.__geometryIndex}\n${this._currentInstanceCount} instances\nIndex: ${handle.__instanceIndex}`);
+        }
         this._batchedMesh.deleteInstance(handle.__instanceIndex);
-        this._availableBuckets.push({
-            geometryIndex: handle.__geometryIndex,
-            vertexCount: handle.reservedVertexCount,
-            indexCount: handle.reservedIndexCount
-        });
     }
 }
 

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

@@ -43,20 +43,20 @@ export class PostProcessingHandler {
         this.context = context;
     }
 
-    apply(components: PostProcessingEffect[]) {
+    apply(components: PostProcessingEffect[]) : Promise<void> {
         if ("env" in import.meta && import.meta.env.VITE_NEEDLE_USE_POSTPROCESSING === "false") {
             if (debug) console.warn("Postprocessing is disabled via vite env setting");
             else console.debug("Postprocessing is disabled via vite env setting");
-            return;
+            return Promise.resolve();
         }
         if (!NEEDLE_USE_POSTPROCESSING) {
             if (debug) console.warn("Postprocessing is disabled via global vite define setting");
             else console.debug("Postprocessing is disabled via vite define");
-            return;
+            return Promise.resolve();
         }
 
         this._isActive = true;
-        this.onApply(this.context, components);
+        return this.onApply(this.context, components);
     }
 
     unapply() {
@@ -98,11 +98,12 @@ export class PostProcessingHandler {
 
         // IMPORTANT
         // Load postprocessing modules ONLY here to get lazy loading of the postprocessing package
-        const modules = await Promise.all([
+        await Promise.all([
             MODULES.POSTPROCESSING.load(),
             MODULES.POSTPROCESSING_AO.load(),
             // import("./Effects/Sharpening.effect")
         ]);
+
         // try {
         //     internal_SetSharpeningEffectModule(modules[2]);
         // }
@@ -179,16 +180,15 @@ export class PostProcessingHandler {
         // https://github.com/pmndrs/postprocessing/blob/271944b74b543a5b743a62803a167b60cc6bb4ee/src/core/EffectComposer.js#L230C12-L230C12
         renderer[autoclearSetting] = renderer.autoClear;
 
-        const maxSamples = renderer.capabilities.maxSamples;
         // create composer and set active on context
         if (!this._composer) {
             // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
             this._composer = new MODULES.POSTPROCESSING.MODULE.EffectComposer(renderer, {
                 frameBufferType: HalfFloatType,
                 stencilBuffer: true,
-                multisampling: Math.min(DeviceUtilities.isMobileDevice() ? 4 : 8, maxSamples),
             });
         }
+
         if (context.composer && context.composer !== this._composer) {
             console.warn("There's already an active EffectComposer in your scene: replacing it with a new one. This might cause unexpected behaviour. Make sure to only use one PostprocessingManager/Volume in your scene.");
         }
@@ -219,18 +219,12 @@ export class PostProcessingHandler {
                     if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect)
                         effects.push(ef as Effect);
                     else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass) {
-                        // const pass = new MODULES.POSTPROCESSING.MODULE.EffectPass(cam, ...effects);
-                        // pass.mainScene = scene;
-                        // pass.name = effects.map(e => e.constructor.name).join(", ");
-                        // pass.enabled = true;
-                        // composer.addPass(pass);
-                        // effects.length = 0;
                         composer.addPass(ef as Pass);
                     }
                     else {
                         // seems some effects are not correctly typed, but three can deal with them,
                         // so we might need to just pass them through
-                        // composer.addPass(ef);
+                        composer.addPass(ef);
                     }
                 }
 

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

@@ -1,9 +1,10 @@
 import type { Effect } from "postprocessing";
 
 import { isDevEnvironment, showBalloonMessage } from "../../engine/debug/index.js";
+import { Context } from "../../engine/engine_context.js";
 import type { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync.js";
 import { serializeable } from "../../engine/engine_serialization_decorator.js";
-import { getParam } from "../../engine/engine_utils.js";
+import { DeviceUtilities, getParam } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
 import { EffectWrapper } from "./Effects/EffectWrapper.js";
 import { PostProcessingEffect } from "./PostProcessingEffect.js";
@@ -58,6 +59,16 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
     @serializeable(VolumeProfile)
     sharedProfile?: VolumeProfile;
 
+    /**
+     * Set multisampling to "auto" to automatically adjust the multisampling level based on performance.   
+     * Set to a number to manually set the multisampling level.
+     * @default "auto"
+     * @min 0
+     * @max renderer.capabilities.maxSamples
+     */
+    @serializeable()
+    multisampling: "auto" | number = "auto";
+
     /**
      * Add a post processing effect to the stack and schedules the effect stack to be re-created.  
      */
@@ -66,12 +77,15 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
         if (!(entry instanceof PostProcessingEffect)) {
             entry = new EffectWrapper(entry);
         }
-        if(entry.gameObject === undefined) this.gameObject.addComponent(entry);
+        if (entry.gameObject === undefined) this.gameObject.addComponent(entry);
         if (this._effects.includes(entry)) return effect;
         this._effects.push(entry);
         this._isDirty = true;
         return effect;
     }
+    /**
+     * Remove a post processing effect from the stack and schedules the effect stack to be re-created.
+     */
     removeEffect<T extends PostProcessingEffect | Effect>(effect: T): T {
 
         let index = -1;
@@ -106,7 +120,7 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
     /**
      * When dirty the post processing effects will be re-applied
      */
-    markDirty() {
+    markDirty(): void {
         this._isDirty = true;
     }
 
@@ -128,7 +142,13 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
         this.sharedProfile?.__init(this);
     }
 
+    private _componentEnabledTime: number = -1;
+    private _multisampleAutoChangeTime: number = 0;
+    private _multisampleAutoDecreaseTime: number = 0;
+
+    /** @internal */
     onEnable(): void {
+        this._componentEnabledTime = this.context.time.realtimeSinceStartup;
         this._isDirty = true;
     }
 
@@ -155,7 +175,7 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
                 }
             }
 
-            if (this.context.composer && this._postprocessing?.composer === this.context.composer) {
+            if (this.context.composer && this._postprocessing && this._postprocessing.composer === this.context.composer) {
                 if (this.context.renderer.getContext().isContextLost()) {
                     this.context.renderer.forceContextRestore();
                 }
@@ -164,6 +184,40 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
 
                 this.context.composer.setMainScene(this.context.scene);
 
+                const composer = this.context.composer;
+                if (this.multisampling === "auto") {
+
+                    const timeSinceLastChange = this.context.time.realtimeSinceStartup - this._multisampleAutoChangeTime;
+
+                    if (this.context.time.realtimeSinceStartup - this._componentEnabledTime > 2
+                        && timeSinceLastChange > .5
+                    ) {
+                        const prev = composer.multisampling;
+
+                        if (composer.multisampling > 0 && this.context.time.smoothedFps <= 50) {
+                            this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
+                            this._multisampleAutoDecreaseTime = this.context.time.realtimeSinceStartup;
+                            composer.multisampling *= .5;
+                            composer.multisampling = Math.floor(composer.multisampling);
+                            if (debug) console.debug(`[PostProcessing] Reduced multisampling from ${prev} to ${composer.multisampling}`);
+                        }
+                        // if performance is good for a while try increasing multisampling again
+                        else if (timeSinceLastChange > 1
+                            && this.context.time.smoothedFps >= 59
+                            && composer.multisampling < this.context.renderer.capabilities.maxSamples
+                            && this.context.time.realtimeSinceStartup - this._multisampleAutoDecreaseTime > 10
+                        ) {
+                            this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
+                            composer.multisampling = composer.multisampling <= 0 ? 1 : composer.multisampling * 2;
+                            composer.multisampling = Math.floor(composer.multisampling);
+                            if (debug) console.debug(`[PostProcessing] Increased multisampling from ${prev} to ${composer.multisampling}`);
+                        }
+                    }
+                }
+                else {
+                    composer.multisampling = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
+                }
+
                 // only set the main camera if any pass has a different camera
                 // trying to avoid doing this regularly since it involves doing potentially unnecessary work
                 // https://github.com/pmndrs/postprocessing/blob/3d3df0576b6d49aec9e763262d5a1ff7429fd91a/src/core/EffectComposer.js#L406
@@ -222,8 +276,30 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
         if (this._activeEffects.length > 0) {
             if (!this._postprocessing)
                 this._postprocessing = new PostProcessingHandler(this.context);
-            this._postprocessing.apply(this._activeEffects);
-            this._applyPostQueue();
+
+            this._postprocessing.apply(this._activeEffects)
+                ?.then(() => {
+                    if (!this.activeAndEnabled) return;
+
+                    this._applyPostQueue();
+
+                    const composer = this._postprocessing?.composer;
+                    if (composer) {
+                        if (this.multisampling === "auto") {
+                            composer.multisampling = DeviceUtilities.isMobileDevice()
+                                ? 2
+                                : 4;
+                        }
+                        else {
+                            composer.multisampling = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
+                        }
+                        if (debug) console.debug(`[PostProcessing] Set multisampling to ${composer.multisampling} (Is Mobile: ${DeviceUtilities.isMobileDevice()})`);
+                    }
+                    else if (debug) {
+                        console.warn(`[PostProcessing] No composer found`);
+                    }
+                })
+
         }
 
     }

package/src/engine-components/ui/Canvas.ts

@@ -141,14 +141,14 @@ export class Canvas extends UIRootComponent implements ICanvas {
     }
 
     start() {
-        this.onUpdateRenderMode();
+        this.applyRenderSettings();
     }
 
     onEnable() {
         super.onEnable();
         this._updateRenderSettingsRoutine = undefined;
         this._lastMatrixWorld = new Matrix4();
-        this.onUpdateRenderMode();
+        this.applyRenderSettings();
         document.addEventListener("resize", this._boundRenderSettingsChanged);
         // We want to run AFTER all regular onBeforeRender callbacks
         this.context.pre_render_callbacks.push(this.onBeforeRenderRoutine);