Needle Engine 4.3.2-beta

Files changed (4) hide show

src/engine/engine_time.ts +14 -2
src/engine-components/postprocessing/PostProcessingHandler.ts +8 -14
src/engine-components/RendererInstancing.ts +6 -57
src/engine-components/postprocessing/Volume.ts +82 -6

src/engine/engine_time.ts CHANGED Viewed

@@ -42,7 +42,19 @@
         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 @@
     private clock = new Clock();
     private _smoothedFps: number = 0;
     private _smoothedDeltaTime: number = 0;
-    private _fpsSamples: number[] = [];
+    private readonly _fpsSamples: number[] = [];
     private _fpsSampleIndex: number = 0;
     constructor() {

src/engine-components/postprocessing/PostProcessingHandler.ts CHANGED Viewed

@@ -43,20 +43,20 @@
         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 @@
         // 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 @@
         // 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 @@
                     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);
                     }
                 }

src/engine-components/RendererInstancing.ts CHANGED Viewed

@@ -573,7 +573,7 @@
         this.markNeedsUpdate();
     }
-    updateGeometry(geo: BufferGeometry, index: number) {
+    updateGeometry(geo: BufferGeometry, geometryIndex: number): boolean {
         if (!this.validateGeometry(geo)) {
             return false;
         }
@@ -582,10 +582,11 @@
             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;
     }
@@ -692,8 +693,6 @@
         // 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];
@@ -758,9 +757,6 @@
     }
-    private readonly _availableBuckets = new Array<BucketInfo>();
-    private readonly _usedBuckets = new Array<BucketInfo>();
     private addGeometry(handle: InstanceHandle) {
         const obj = handle.object;
@@ -770,51 +766,11 @@
             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(`[Instancing] SET GEOMETRY \"${handle.name}\"\nGEOMETRY_ID=${bucket.geometryIndex}\n${this._currentInstanceCount} instances\n${handle.maxVertexCount} vertices, ${handle.maxIndexCount} indices, `);
-            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(`[Instancing] > ADD GEOMETRY \"${handle.name}\"\n${this._currentInstanceCount} instances, ${handle.maxVertexCount} max vertices, ${handle.maxIndexCount} max indices`);
+                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);
@@ -829,7 +785,6 @@
         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(`[Instancing] > ADDED INSTANCE \"${handle.name}\"\nGEOMETRY_ID=${geometryId}\n${this._currentInstanceCount} instances\nIndex: ${handle.__instanceIndex}`);
@@ -842,7 +797,6 @@
             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)
@@ -853,11 +807,6 @@
             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
-        });
     }
 }

src/engine-components/postprocessing/Volume.ts CHANGED Viewed

@@ -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";
@@ -59,6 +60,16 @@
     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.
      */
     addEffect<T extends PostProcessingEffect | Effect>(effect: T): T {
@@ -66,12 +77,15 @@
         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 @@
     /**
      * When dirty the post processing effects will be re-applied
      */
-    markDirty() {
+    markDirty(): void {
         this._isDirty = true;
     }
@@ -128,7 +142,13 @@
         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 @@
                 }
             }
-            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 @@
                 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 @@
         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`);
+                    }
+                })
         }
     }