@needle-tools/engine 4.7.0-next.2756168 → 4.7.0-next.7da7e6c

package/plugins/common/logger.js

@@ -0,0 +1,214 @@
+import { createWriteStream, existsSync, mkdirSync, readdirSync, rmSync, statSync, write } from "fs";
+
+const filename_timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+
+
+/**
+ * @typedef {"server" | "client" | "client-http"} ProcessType
+ */
+
+let originalConsoleLog = console.log;
+let originalConsoleError = console.error;
+let originalConsoleWarn = console.warn;
+let originalConsoleInfo = console.info;
+let originalConsoleDebug = console.debug;
+let didPatch = false;
+let unpatchFunction = null;
+
+export function patchConsoleLogs() {
+    if (didPatch) return unpatchFunction;
+    didPatch = true;
+
+    console.log = (...args) => {
+        originalConsoleLog(...args);
+        captureLogMessage("server", 'log', args);
+    };
+    console.error = (...args) => {
+        originalConsoleError(...args);
+        captureLogMessage("server", 'error', args);
+    };
+    console.warn = (...args) => {
+        originalConsoleWarn(...args);
+        captureLogMessage("server", 'warn', args);
+    };
+    console.info = (...args) => {
+        originalConsoleInfo(...args);
+        captureLogMessage("server", 'info', args);
+    };
+    console.debug = (...args) => {
+        originalConsoleDebug(...args);
+        captureLogMessage("server", 'debug', args);
+    };
+
+    // Restore original console methods
+    unpatchFunction = () => {
+        didPatch = false;
+        console.log = originalConsoleLog;
+        console.error = originalConsoleError;
+        console.warn = originalConsoleWarn;
+        console.info = originalConsoleInfo;
+        console.debug = originalConsoleDebug;
+    }
+    return unpatchFunction;
+}
+
+
+let isCapturing = false;
+
+/** @type {Array<{ process: ProcessType, key: string, log:any, timestamp:number }>} */
+const queue = new Array();
+
+/**
+ * @param {ProcessType} process
+ * @param {string} key
+ * @param {any} log
+ */
+export function captureLogMessage(process, key, log, time = Date.now()) {
+    if (isCapturing) {
+        queue.push({ process, key, log, timestamp: Date.now() });
+        return;
+    }
+    isCapturing = true;
+
+    try {
+        const str = stringifyLog(log);
+        const prefix = `${getTimestamp(time, true)}, ${process}.${key}: `;
+        const separator = "";
+        writeToFile(process, indent(`${prefix}${separator}${str}`, prefix.length, separator));
+    } finally {
+        isCapturing = false;
+    }
+
+    let queued = queue.pop();
+    if (queued) {
+        captureLogMessage(queued.process, queued.key, queued.log, queued.timestamp);
+    }
+}
+
+
+/**
+ * Returns the current timestamp in ISO format.
+ * @param {number} [date] - Optional date to format, defaults to current date.
+ */
+function getTimestamp(date, timeOnly = false) {
+    const now = date ? new Date(date) : new Date();
+    if (timeOnly) {
+        return now.toTimeString().split(' ')[0]; // HH:MM:SS
+    }
+    return now.toISOString();
+}
+
+/**
+ * @param {any} log
+ * @param {Set<any>} [seen]
+ */
+function stringifyLog(log, seen = new Set()) {
+
+    if (seen.has(log)) {
+        return "[circular]";
+    }
+    seen.add(log);
+    if (Array.isArray(log)) {
+        let res = "";
+        for (let item of log) {
+            if (res) res += ", ";
+            res += stringifyLog(item, seen);
+        }
+        return res;
+    }
+    if (typeof log === "object") {
+        if (seen.has(log)) {
+            return "[circular]";
+        }
+        let entries = Object.entries(log).map(([key, value]) => {
+            return `"${key}": ${stringifyLog(value, seen)}`;
+        });
+        return `{ ${entries.join(", ")} }`;
+    }
+
+    if (typeof log === "string") {
+        return log;
+    }
+    if (typeof log === "number" || typeof log === "boolean") {
+        return String(log);
+    }
+    if (log === null) {
+        return "null";
+    }
+    if (log === undefined) {
+        return "undefined";
+    }
+    return String(log);
+}
+
+/**
+ * Indents a string by a specified length.
+ * @param {string} str - The string to indent.
+ * @param {number} length - The number of spaces to indent each line.
+ * @returns {string} The indented string.
+ */
+function indent(str, length, separator = "") {
+    const lines = str.split("\n");
+    const prefixStr = " ".repeat(length) + separator;
+    for (let i = 1; i < lines.length; i++) {
+        let entry = lines[i].trim();
+        if (entry.length === 0) continue; // skip empty lines
+        // indent the line
+        lines[i] = prefixStr + entry;
+    }
+    return lines.join("\n");
+}
+
+
+// #region log to file
+
+/** @type {Map<ProcessType, import("fs").WriteStream>} */
+const filestreams = new Map();
+const fileLogDirectory = "node_modules/.needle/logs";
+// cleanup old log files
+if (existsSync(fileLogDirectory)) {
+    const files = readdirSync(fileLogDirectory);
+    // sort by age and keep the last 10 files
+    files.sort((a, b) => {
+        const aStat = statSync(`${fileLogDirectory}/${a}`);
+        const bStat = statSync(`${fileLogDirectory}/${b}`);
+        return aStat.mtimeMs - bStat.mtimeMs;
+    });
+    // remove all but the last 30 files
+    const filesToKeep = 30;
+    for (let i = 0; i < files.length - filesToKeep; i++) {
+        rmSync(`${fileLogDirectory}/${files[i]}`, { force: true });
+    }
+}
+
+/**
+ * Writes a log message to the file.
+ * @param {ProcessType} process
+ * @param {string} log
+ */
+function writeToFile(process, log) {
+    if (!filestreams.has(process)) {
+        if (!existsSync(fileLogDirectory)) {
+            mkdirSync(fileLogDirectory, { recursive: true });
+        }
+        filestreams.set(process, createWriteStream(`${fileLogDirectory}/needle.${filename_timestamp}.${process}.log`, { flags: 'a' }));
+    }
+    const writeStream = filestreams.get(process);
+    if (!writeStream) {
+        console.error(`No write stream for process: ${process}`);
+        return;
+    }
+    writeStream.write(log + '\n');
+}
+
+
+
+// #region process exit
+function onExit() {
+    filestreams.forEach((stream) => stream.end());
+    filestreams.clear();
+}
+const events = ['SIGTERM', 'SIGINT', 'beforeExit', 'rejectionHandled', 'uncaughtException', 'exit'];
+for (const event of events) {
+    process.on(event, onExit);
+}

package/plugins/types/userconfig.d.ts

@@ -49,7 +49,7 @@ export type userSettings = {
     /** Custom configuration for facebook instant games. */
     facebookInstantGames?: {}
     /** Set to true to create an imports.log file that shows all module imports. The file is generated when stopping the server. */
-    logModuleImportChains?: boolean;
+    debugImportChains?: boolean;
 
     /** Set to true to disable generating the buildinfo.json file in your output directory */
     noBuildInfo?: boolean;
@@ -117,4 +117,6 @@ export type userSettings = {
      * @default undefined
      */
     openBrowser?: boolean;
+
+    loadMaterialX?: boolean;
 }

package/plugins/vite/alias.js

@@ -42,18 +42,23 @@ const packages_to_resolve = {
     because this is automatically done by vite according to whatever we define in our package.json exports
     This did previously prevent us from declaring proper exports in package.json
     */
-    '@needle-tools/engine': (res, packageName, index, path) => {
+    '@needle-tools/engine': (res, packageName, index, _path) => {
         // Check if the import is something like @needle-tools/engine/engine/engine_utils
         // in which case we want to resolve into the lib directory
-        if (path.startsWith("@needle-tools/engine/engine")) {
+        if (_path.startsWith("@needle-tools/engine/engine")) {
             return res + "/lib";
         }
+        const node_modules_path = path.resolve(projectDir, 'node_modules', '@needle-tools/engine');
+        if (existsSync(node_modules_path)) {
+            return node_modules_path;
+        }
     },
 
     // Auto resolve to 'node_modules/<name>' or '@needle-tools/engine/node_modules/<name>'
     'peerjs': "auto-resolve",
     'websocket-ts': "auto-resolve",
     'md5': "auto-resolve",
+    'three-mesh-bvh': "auto-resolve",
     'postprocessing': "auto-resolve",
     '@dimforge/rapier3d-compat': "auto-resolve",
 }

package/plugins/vite/imports-logger.js

@@ -6,7 +6,7 @@ import fs from 'fs';
  */
 export const needleImportsLogger = (command, config, userSettings) => {
 
-    if (!userSettings.logModuleImportChains) return;
+    if (!userSettings.debugImportChains) return;
 
     const graph =  {
         allNodes: new Map(),

package/plugins/vite/index.js

@@ -66,6 +66,8 @@ export { needleBuildInfo } from "./buildinfo.js";
 import { needleServer } from "./server.js";
 import { needleNPM } from "./npm.js";
 import { needleTransformCode } from "./transform.js";
+import { needleMaterialXLoader } from "./materialx.js";
+import { needleLogger } from "./logger.js";
 export { needleServer } from "./server.js";
 
 
@@ -110,6 +112,7 @@ export const needlePlugins = async (command, config = undefined, userSettings =
     userSettings = { ...defaultUserSettings, ...userSettings };
 
     const array = [
+        needleLogger(command, config, userSettings),
         needleDefines(command, config, userSettings),
         needleLicense(command, config, userSettings),
         needleViteAlias(command, config, userSettings),
@@ -133,6 +136,7 @@ export const needlePlugins = async (command, config = undefined, userSettings =
         needlePWA(command, config, userSettings),
         needleServer(command, config, userSettings),
         needleNPM(command, config, userSettings),
+        needleMaterialXLoader(command, config, userSettings),
     ];
 
     const asap = await needleAsap(command, config, userSettings);

package/plugins/vite/logger.client.js

@@ -0,0 +1,124 @@
+
+/**
+ * Patches console methods to capture log messages and send them to the server.
+ * This is useful for debugging and logging in the client.
+ * @param {"log" | "warn" | "info" | "debug" | "error" | "internal"} level
+ * @param {any} message - The log message to capture.
+ */
+function sendLogToServer(level, message) {
+    if ("hot" in import.meta) {
+        // @ts-ignore
+        import.meta.hot.send("needle:client-log", { level, message });
+    }
+}
+
+
+if (import.meta && "hot" in import.meta) {
+
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalInfo = console.info;
+    const originalDebug = console.debug;
+    const originalError = console.error;
+
+    console.log = (...args) => {
+        originalLog(...args);
+        sendLogToServer("log", args);
+    }
+    console.warn = (...args) => {
+        originalWarn(...args);
+        sendLogToServer("warn", args);
+    }
+    console.info = (...args) => {
+        originalInfo(...args);
+        sendLogToServer("info", args);
+    }
+    console.debug = (...args) => {
+        originalDebug(...args);
+        sendLogToServer("debug", args);
+    }
+
+    try {
+        sendLogToServer("internal", `Page loaded
+URL: ${window.location.href}
+UserAgent: ${navigator.userAgent}
+Screen: ${window.innerWidth} x ${window.innerHeight}px
+Device Pixel Ratio: ${window.devicePixelRatio}
+Language: ${navigator.language}
+Timezone: ${Intl.DateTimeFormat().resolvedOptions().timeZone}
+Connection: ${"connection" in navigator ? JSON.stringify(navigator.connection) : "Not available"}
+User Activation: ${"userActivation" in navigator ? JSON.stringify(navigator.userActivation) : "Not available"}
+`);
+    }
+    catch (e) {
+        // silently fail
+        sendLogToServer("error", `Error during initial log: ${e.message}`);
+    }
+
+    window.addEventListener('error', (event) => {
+        const errorMessage = event.error ? event.error.stack || event.error.message : event.message;
+        sendLogToServer("error", errorMessage);
+    });
+    window.addEventListener('unhandledrejection', (event) => {
+        const reason = event.reason ? event.reason.stack || event.reason.message : "Unhandled rejection without reason";
+        sendLogToServer("error", `Unhandled promise rejection: ${reason}`);
+    });
+    window.addEventListener('beforeunload', () => {
+        sendLogToServer("internal", "Page is unloading");
+    });
+    document.addEventListener('visibilitychange', () => {
+        console.log("Visibility changed:", document.visibilityState);
+        if (document.visibilityState === 'hidden') {
+            sendLogToServer("internal", "Page is hidden");
+        }
+        else if (document.visibilityState === 'visible') {
+            sendLogToServer("internal", "Page is visible again");
+        }
+        else {
+            sendLogToServer("internal", `Page visibility changed to ${document.visibilityState}`);
+        }
+    });
+    window.addEventListener("focus", () => {
+        sendLogToServer("internal", "Page gained focus");
+    });
+    window.addEventListener("blur", () => {
+        sendLogToServer("internal", "Page lost focus");
+    });
+    window.addEventListener('load', () => {
+        sendLogToServer("internal", "Page fully loaded");
+    });
+    window.addEventListener('DOMContentLoaded', () => {
+        sendLogToServer("internal", "DOM fully loaded and parsed");
+    });
+    window.addEventListener('online', () => {
+        sendLogToServer("internal", "Browser is online");
+    });
+    window.addEventListener('offline', () => {
+        sendLogToServer("warn", "Browser is offline");
+    });
+    window.addEventListener('resize', () => {
+        sendLogToServer("internal", `Window resized to ${window.innerWidth}x${window.innerHeight}px`);
+    });
+    window.addEventListener('orientationchange', () => {
+        sendLogToServer("internal", `Orientation changed to ${screen.orientation.type}`);
+    });
+    window.addEventListener('fullscreenchange', () => {
+        if (document.fullscreenElement) {
+            sendLogToServer("internal", "Entered fullscreen mode");
+        } else {
+            sendLogToServer("internal", "Exited fullscreen mode");
+        }
+    });
+
+
+    // url change event
+    window.addEventListener('hashchange', () => {
+        sendLogToServer("internal", `URL hash changed to ${location.hash}`);
+    });
+    window.addEventListener('popstate', () => {
+        sendLogToServer("internal", `History state changed: ${JSON.stringify(history.state)}`);
+    });
+
+
+
+}

package/plugins/vite/logger.js

@@ -0,0 +1,85 @@
+import { existsSync, readFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { captureLogMessage, patchConsoleLogs } from '../common/logger.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+/**
+ * write logs to local file
+ * @param {import('../types/userconfig.js').userSettings} userSettings
+ * @returns {import('vite').Plugin}
+ */
+export const needleLogger = (command, config, userSettings) => {
+
+    patchConsoleLogs();
+    captureLogMessage("server", "info", "Vite started with command \"" + command + "\" in " + __dirname);
+
+    return {
+        name: "needle:logger",
+        enforce: 'pre',
+        configureServer(server) {
+            logRequests(server);
+        },
+        configurePreviewServer(server) {
+            logRequests(server);
+        },
+        transformIndexHtml: {
+            order: 'pre',
+            handler(html, ctx) {
+                // inject client logger script during development
+                if (command === 'serve') {
+                    const file = path.join(__dirname, 'logger.client.js');
+                    if (existsSync(file)) {
+                        const scriptContent = readFileSync(file, 'utf8');
+                        return [
+                            {
+                                tag: 'script',
+                                attrs: {
+                                    type: 'module',
+                                },
+                                children: scriptContent,
+                                injectTo: 'head-prepend',
+                            },
+                        ];
+                    }
+                }
+            },
+        },
+    }
+}
+
+
+/**
+ * Logs HTTP requests to the console.
+ * This function is used in the Vite server to log incoming HTTP requests.
+ * @param {import('vite').PreviewServer | import('vite').ViteDevServer} server
+ */
+function logRequests(server, log_http_requests = false) {
+    if ("ws" in server) {
+        // Clent connections
+        server.ws.on('connection', (socket, request) => {
+            captureLogMessage("server", "connection", "New websocket connection established");
+            socket.on('close', () => {
+                captureLogMessage("server", "connection", "Websocket connection closed");
+            });
+        });
+        // Client log messages via websocket
+        server.ws.on('needle:client-log', async (data, client) => {
+            if (!data || !data.level || !data.message) {
+                console.warn("Received empty log data, ignoring");
+                return;
+            }
+            captureLogMessage("client", data.level, data.message);
+        });
+    }
+    // Log HTTP requests
+    if (log_http_requests) {
+        server.middlewares.use((req, res, next) => {
+            captureLogMessage("client-http", "info", [req.method, req.url]);
+            next();
+        });
+    }
+}

package/plugins/vite/materialx.js

@@ -0,0 +1,30 @@
+import { existsSync } from 'fs';
+
+const materialx_packagejson_path = "node_modules/@needle-tools/materialx/package.json";
+const materialx_import_chunk =
+    `import { useNeedleMaterialX } from "@needle-tools/materialx/needle";
+useNeedleMaterialX();
+`
+
+/**
+ * Vite plugin to automatically setup the MaterialX loader for Needle Engine.
+ * @param {string} command 
+ * @param {object} config
+ * @param {import('../types/userconfig.js').userSettings} userSettings
+ * @returns {import('vite').Plugin}
+ */
+export const needleMaterialXLoader = (command, config, userSettings) => {
+
+    return {
+        name: 'needle-materialx-loader',
+        transform: (code, id) => {
+            if (id.endsWith("src/main.ts")) {
+                if (userSettings?.loadMaterialX !== false && existsSync(materialx_packagejson_path)) {
+                    console.log("[needle-materialx-loader] Adding MaterialX import to main.ts");
+                    code = materialx_import_chunk + "\n" + code;
+                }
+            }
+            return code;
+        }
+    }
+}

package/plugins/vite/transform.js

@@ -3,6 +3,7 @@
 
 /** 
  * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin[]}
  */
 export const needleTransformCode = (command, config, userSettings) => {
 

package/src/engine/engine_context.ts

@@ -751,7 +751,7 @@ export class Context implements IContext {
 		ContextRegistry.dispatchCallback(ContextEvent.ContextClearing, this);
 		invokeLifecycleFunctions(this, ContextEvent.ContextClearing);
 		// NOTE: this does dispose the environment/background image too
-		// which is probably not desired if it is set via the skybox-image attribute
+		// which is probably not desired if it is set via the background-image attribute
 		destroy(this.scene, true, true);
 		this.scene = new Scene();
 		this.addressables?.dispose();

package/src/engine/webcomponents/needle-engine.attributes.ts

@@ -44,7 +44,7 @@ type LoadingAttributes = {
 }
 
 type SkyboxAttributes = {
-    /** use background-image instead - URL to .exr, .hdr, .png, .jpg to be used as skybox */
+    /** @deprecated. Use background-image instead - URL to .exr, .hdr, .png, .jpg to be used as skybox */
     "skybox-image"?: string,
     /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
     "background-image"?: string, 

package/src/engine-components/Camera.ts

@@ -560,7 +560,7 @@ export class Camera extends Behaviour implements ICamera {
             console.debug(msg);
         }
 
-        const hasBackgroundImageOrColorAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color") || this.context.domElement.getAttribute("skybox-image");
+        const hasBackgroundImageOrColorAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color");
 
         switch (this._clearFlags) {
             case ClearFlags.None:

package/src/engine-components/CameraUtils.ts

@@ -36,12 +36,14 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     if (transparentAttribute != undefined) {
         camInstance.clearFlags = ClearFlags.Uninitialized;
     }
-    // Set the clearFlags to a skybox if we have one OR if the user set a skybox image attribute
-    else if (evt.context.domElement.getAttribute("skybox-image")?.length || evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
+    // Set the clearFlags to a skybox if we have one OR if the user set a background-image attribute
+    else if (evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
         camInstance.clearFlags = ClearFlags.Skybox;
         // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?
         // e.g. when we export a scene from blender without a camera in the scene
-        camInstance.backgroundBlurriness = .2; // same as in blender 0.5
+        if (evt.context.domElement.getAttribute("background-blurriness") === null) {
+            evt.context.scene.backgroundBlurriness = 0.2; // default value, same as in Blender
+        }
     }
     else {
         camInstance.clearFlags = ClearFlags.SolidColor;

package/src/engine-components/Skybox.ts

@@ -16,10 +16,10 @@ import { Behaviour, GameObject } from "./Component.js";
 
 const debug = getParam("debugskybox");
 
-registerObservableAttribute("skybox-image");
+registerObservableAttribute("background-image");
 registerObservableAttribute("environment-image");
 
-function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boolean, environment: boolean, attribute: "skybox-image" | "environment-image") {
+function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boolean, environment: boolean, attribute: "background-image" | "environment-image") {
     const remote = new RemoteSkybox();
     remote.allowDrop = false;
     remote.allowNetworking = false;
@@ -42,7 +42,7 @@ function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boo
 const promises = new Array<Promise<any>>();
 ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     const context = args.context;
-    const skyboxImage = context.domElement.getAttribute("skybox-image") || context.domElement.getAttribute("background-image");
+    const skyboxImage = context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
     if (skyboxImage) {
         if (debug)
@@ -50,8 +50,8 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
         // if the user is loading a GLB without a camera then the CameraUtils (which creates the default camera)
         // checks if we have this attribute set and then sets the skybox clearflags accordingly
         // if the user has a GLB with a camera but set to solid color then the skybox image is not visible -> we will just warn then and not override the camera settings
-        if (context.mainCameraComponent?.clearFlags !== ClearFlags.Skybox) console.warn("\"skybox-image\"/\"background-image\" attribute has no effect: camera clearflags are not set to \"Skybox\"");
-        const promise = createRemoteSkyboxComponent(context, skyboxImage, true, false, "skybox-image");
+        if (context.mainCameraComponent?.clearFlags !== ClearFlags.Skybox) console.warn("\"background-image\" attribute has no effect: camera clear flags are not set to \"Skybox\"");
+        const promise = createRemoteSkyboxComponent(context, skyboxImage, true, false, "background-image");
         promises.push(promise);
     }
     if (environmentImage) {

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

@@ -1,10 +1,13 @@
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
+import { getParam } from "../../../engine/engine_utils.js";
 import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
 import { VolumeParameter } from "../VolumeParameter.js";
 import { registerCustomEffectType } from "../VolumeProfile.js";
 
 
+const debug = getParam("debugpost");
+
 
 export enum QualityLevel {
     LOW = 0,
@@ -32,15 +35,19 @@ export class Antialiasing extends PostProcessingEffect {
 
     onCreateEffect(): EffectProviderResult {
         const effect = new MODULES.POSTPROCESSING.MODULE.SMAAEffect({
-            preset: MODULES.POSTPROCESSING.MODULE.SMAAPreset.HIGH,
+            preset: this.preset?.value ?? MODULES.POSTPROCESSING.MODULE.SMAAPreset.HIGH,
             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) => {
+            if(debug) console.log("Antialiasing preset changed to", newValue);
             effect.applyPreset(newValue);
         };
+        // setInterval(()=> {
+        //     effect.applyPreset(Math.floor(Math.random()*3))
+        // }, 1000)
 
         // effect.edgeDetectionMaterial.edgeDetectionThreshold = .01;
 

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

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