@needle-tools/engine 4.7.0-next.da47826 → 4.7.0-next.fe38209

package/plugins/vite/logger.client.js

@@ -0,0 +1,272 @@
+
+/**
+ * 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) {
+        message = stringifyLog(message);
+        // keep messages below payload limit
+        if(message.length > 100_000) { 
+            message = message.slice(0, 100_000) + "... <truncated>";
+        }
+        // @ts-ignore
+        import.meta.hot.send("needle:client-log", { level, message: message });
+    }
+}
+
+// const obj = {
+//     hello: "world"
+// }
+// obj["test"] = obj;
+// sendLogToServer("internal", "Test circular reference", obj);
+
+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);
+    }
+    console.error = (...args) => {
+        originalError(...args);
+        sendLogToServer("error", ...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}
+Device Memory: ${"deviceMemory" in navigator ? navigator.deviceMemory : "Not available"} GB
+Online: ${navigator.onLine}
+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"}
+`);
+
+        if ("gpu" in navigator) {
+
+            // @ts-ignore
+            navigator.gpu.requestAdapter()
+                .then(adapter => adapter ? adapter.requestDevice() : null)
+                .then(device => {
+                    if (device) {
+                        const adapterInfo = device.adapterInfo;
+                        if (adapterInfo) {
+                            sendLogToServer("internal", [`WebGPU adapter info`, {
+                                vendor: adapterInfo.vendor,
+                                architecture: adapterInfo.architecture,
+                                device: adapterInfo.device,
+                                description: adapterInfo.description,
+                                features: adapterInfo.features,
+                                limits: adapterInfo.limits
+                            }]);
+                        }
+                    }
+                });
+        }
+    }
+    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)}`);
+    });
+
+
+
+}
+
+
+
+
+
+// #region copied from common/logger.js
+
+
+/**
+ * Stringifies a log message, handling circular references and formatting.
+ * @param {any} log
+ * @param {Set<any>} [seen]
+ */
+function stringifyLog(log, seen = new Set(), depth = 0) {
+
+    const isServer = typeof window === "undefined";
+    const stringify_limits = {
+        string: isServer ? 100_000 : 2000,
+        object_keys: isServer ? 300 : 100,
+        object_depth: isServer ? 10 : 3,
+        array_items: isServer ? 2_000 : 100,
+    }
+
+    if (typeof log === "string") {
+        if (log.length > stringify_limits.string) log = `${log.slice(0, stringify_limits.string)}... <truncated ${log.length - stringify_limits.string} characters>`;
+        return log;
+    }
+    if (typeof log === "number" || typeof log === "boolean") {
+        return String(log);
+    }
+    if (log === null) {
+        return "null";
+    }
+    if (log === undefined) {
+        return "undefined";
+    }
+    if (typeof log === "function") {
+        return "<function>";
+    }
+
+    if (seen.has(log)) return "<circular>";
+
+    if (Array.isArray(log)) {
+        seen.add(log);
+        return stringifyArray(log);
+    }
+    if (typeof log === "object") {
+
+        if (depth > stringify_limits.object_depth) {
+            return "<object too deep>";
+        }
+
+        seen.add(log);
+        // const str = JSON.stringify(log, (key, value) => {
+        //     if (typeof value === "function") return "<function>";
+        //     if (typeof value === "string") return stringifyLog(value, seen, depth + 1);
+        //     if (typeof value === "object") {
+        //         if (seen.has(value)) return "<circular>";
+        //         seen.add(value);
+        //     }
+        //     return value;
+        // });
+        // return str;
+        const keys = Object.keys(log);
+        let res = "{";
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            let value = log[key];
+
+            if (typeof value === "number") {
+                // clamp precision for numbers
+                value = Number(value.toFixed(6));
+            }
+            let str = stringifyLog(value, seen, depth + 1);
+            if (typeof value === "object") {
+                if (Array.isArray(value)) {
+                    str = `[${str}]`;
+                }
+            }
+            else if (typeof value === "string") {
+                str = `"${str}"`;
+            }
+            if (i > 0) res += ", ";
+            res += `"${key}":${str}`;
+        }
+        res += "}";
+        return res;
+        // let entries = Object.entries(log).map(([key, value], index) => {
+        //     if (index > stringify_limits.object_keys) return `"${key}": <truncated>`;
+        //     return `"${key}": ${stringifyLog(value, seen, depth + 1)}`;
+        // });
+        // return `{ ${entries.join(", ")} }`;
+    }
+    return String(log);
+
+    function stringifyArray(arr) {
+        let res = "";
+        for (let i = 0; i < arr.length; i++) {
+            let entry = arr[i];
+            if (res && i > 0) res += ", ";
+            if (i > stringify_limits.array_items) {
+                res += "<truncated " + (arr.length - i) + ">";
+                break;
+            }
+            res += stringifyLog(entry, seen, depth + 1);
+        }
+        return res;
+    }
+}
+

package/plugins/vite/logger.js

@@ -0,0 +1,101 @@
+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 | null}
+ */
+export const needleLogger = (command, config, userSettings) => {
+
+    if (userSettings?.disableLogging === true) {
+        return null;
+    }
+
+    patchConsoleLogs();
+    captureLogMessage("server", "info", "Vite started with command \"" + command + "\" in " + __dirname, null);
+
+    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) {
+    /**
+     * Logs a message to the server console and captures it.
+     * @type {Map<import("vite").WebSocket, {id:string}>}
+     */
+    const connectedClients = new Map();
+    let index = 0;
+
+    if ("ws" in server) {
+        // Clent connections
+        server.ws.on('connection', (socket, request) => {
+            const clientId = String(index++);
+            connectedClients.set(socket, { id: clientId });
+            const ip = request.socket.remoteAddress || 'unknown';
+            captureLogMessage("server", "connection", `New websocket connection established ${clientId} from ${ip}`, clientId);
+            socket.on('close', () => {
+                captureLogMessage("server", "connection", `Websocket connection closed ${clientId}`, clientId);
+            });
+        });
+        // 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;
+            }
+            const socket = client.socket;
+            const info = connectedClients.get(socket);
+            captureLogMessage("client", data.level, data.message, info ? info.id : null);
+        });
+    }
+    // Log HTTP requests
+    if (log_http_requests) {
+        server.middlewares.use((req, res, next) => {
+            captureLogMessage("client-http", "info", [req.method, req.url], null);
+            next();
+        });
+    }
+}

package/plugins/vite/materialx.js

@@ -0,0 +1,32 @@
+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)) {
+                    if (!code.includes("@needle-tools/materialx")) {
+                        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_addressables.ts

@@ -188,14 +188,11 @@ export class AssetReference {
     private _urlName: string;
     private _progressListeners: ProgressCallback[] = [];
 
-    private _hash?: string;
-    private _hashedUri: string;
-
     private _isLoadingRawBinary: boolean = false;
     private _rawBinary?: ArrayBufferLike | null;
 
     /** @internal */
-    constructor(uri: string, hash?: string, asset: any = null) {
+    constructor(uri: string, _hash?: string, asset: any = null) {
         this._url = uri;
 
         const lastUriPart = uri.lastIndexOf("/");
@@ -210,14 +207,8 @@ export class AssetReference {
         else {
             this._urlName = uri;
         }
-
-        this._hash = hash;
-        if (uri.includes("?v="))
-            this._hashedUri = uri;
-        else
-            this._hashedUri = hash ? uri + "?v=" + hash : uri;
+        
         if (asset !== null) this.asset = asset;
-
         registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
 
@@ -263,8 +254,8 @@ export class AssetReference {
         if (this._isLoadingRawBinary) return null;
         if (this._rawBinary !== undefined) return this._rawBinary;
         this._isLoadingRawBinary = true;
-        if (debug) console.log("Preload", this._hashedUri);
-        const res = await BlobStorage.download(this._hashedUri, p => {
+        if (debug) console.log("Preload", this.url);
+        const res = await BlobStorage.download(this.url, p => {
             this.raiseProgressEvent(p);
         });
         this._rawBinary = res?.buffer ?? null;
@@ -294,7 +285,7 @@ export class AssetReference {
         // console.log("START LOADING");
         if (this._rawBinary) {
             if (!(this._rawBinary instanceof ArrayBuffer)) {
-                console.error("Invalid raw binary data", this._rawBinary);
+                console.error("Failed loading: Invalid raw binary data. Must be of type ArrayBuffer. " + (typeof this._rawBinary));
                 return null;
             }
             this._loading = getLoader().parseSync(context, this._rawBinary, this.url, null);
@@ -302,7 +293,7 @@ export class AssetReference {
         }
         else {
             if (debug) console.log("Load async", this.url);
-            this._loading = getLoader().loadSync(context, this._hashedUri, this.url, null, prog => {
+            this._loading = getLoader().loadSync(context, this.url, this.url, null, prog => {
                 this.raiseProgressEvent(prog);
             });
         }

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();
@@ -1618,10 +1618,11 @@ export class Context implements IContext {
 			}
 
 			const backgroundColor = this.renderer.getClearColor(this._tempClearColor);
+			const clearAlpha = this.renderer.getClearAlpha();
 			this._tempClearColor2.copy(backgroundColor);
-			this.renderer.setClearColor(backgroundColor.convertSRGBToLinear());
+			this.renderer.setClearColor(backgroundColor.convertSRGBToLinear(), this.renderer.getClearAlpha());
 			this.composer.render(this.time.deltaTime);
-			this.renderer.setClearColor(this._tempClearColor2); // restore clear color
+			this.renderer.setClearColor(this._tempClearColor2, clearAlpha); // restore clear color
 		}
 		else if (camera) {
 			// Workaround for issue on Vision Pro – 

package/src/engine/engine_lightdata.ts

@@ -53,10 +53,12 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     tryGetSkybox(sourceId?: SourceIdentifier | null): Texture | null {
+        if (debugLightmap) console.log("[Get Skybox]", sourceId, this._lightmaps)
         return this.tryGet(sourceId, LightmapType.Skybox, 0);
     }
 
     tryGetReflection(sourceId?: SourceIdentifier | null): Texture | null {
+        if (debugLightmap) console.log("[Get Reflection]", sourceId, this._lightmaps)
         return this.tryGet(sourceId, LightmapType.Reflection, 0);
     }
 
@@ -66,9 +68,15 @@ export class LightDataRegistry implements ILightDataRegistry {
             return null;
         }
         const entry = this._lightmaps.get(sourceId);
-        if (!entry) return null;
+        if (!entry) {
+            if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture entry for`, sourceId);
+            return null;
+        }
         const arr = entry.get(type);
-        if (arr === undefined) return null;
+        if (arr === undefined) {
+            if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture for`, sourceId, "index", index);
+            return null;
+        }
         if (!arr?.length || arr.length <= index) return null;
         return arr[index];
     }

package/src/engine/engine_lods.ts

@@ -23,6 +23,9 @@ export class LODsManager implements NEEDLE_progressive_plugin {
     readonly context: Context;
     private _lodsManager?: _LODsManager;
 
+    private _settings: Partial<Pick<_LODsManager, "skinnedMeshAutoUpdateBoundsInterval" | "targetTriangleDensity">> = {
+    }
+
     /**
      * The internal LODs manager. See @needle-tools/gltf-progressive for more information.  
      * @link https://npmjs.com/package/@needle-tools/gltf-progressive
@@ -31,24 +34,38 @@ export class LODsManager implements NEEDLE_progressive_plugin {
         return this._lodsManager;
     }
 
+    get skinnedMeshAutoUpdateBoundsInterval() {
+        return this._lodsManager?.skinnedMeshAutoUpdateBoundsInterval || this._settings.skinnedMeshAutoUpdateBoundsInterval || 0;
+    }
+    set skinnedMeshAutoUpdateBoundsInterval(value: number) {
+        this._settings.skinnedMeshAutoUpdateBoundsInterval = value;
+        this.applySettings();
+    }
+
     /**
      * The target triangle density is the desired max amount of triangles on screen when the mesh is filling the screen.  
      * @default 200_000
      */
     get targetTriangleDensity() {
-        return this._lodsManager?.targetTriangleDensity ?? -1;
+        return this._lodsManager?.targetTriangleDensity || this._settings.targetTriangleDensity || 200_000; // default value
     }
     set targetTriangleDensity(value: number) {
-        if (!this._lodsManager) {
-            return;
-        }
-        this._lodsManager.targetTriangleDensity = value;
+        this._settings.targetTriangleDensity = value;
+        this.applySettings();
     }
 
     constructor(context: Context) {
         this.context = context;
     }
 
+    private applySettings() {
+        if(this._lodsManager) {
+            for(const key in this._settings) {
+                this._lodsManager[key] = this._settings[key];
+            }
+        }
+    }
+
     /** @internal */
     setRenderer(renderer: WebGLRenderer) {
         this._lodsManager?.disable();
@@ -56,6 +73,7 @@ export class LODsManager implements NEEDLE_progressive_plugin {
         _LODsManager.addPlugin(this);
         _LODsManager.debugDrawLine = Gizmos.DrawLine;
         this._lodsManager = _LODsManager.get(renderer);
+        this.applySettings();
         this._lodsManager.enable();
     }
 

package/src/engine/engine_three_utils.ts

@@ -734,6 +734,9 @@ export function getBoundingBox(objects: Object3D | Object3D[], ignore: ((obj: Ob
                 console.warn(`Object \"${obj.name}\" has NaN values in position or scale.... will ignore it`, pos, scale);
                 return;
             }
+            // Sanitize for the three.js method that only checks for undefined here
+            // @ts-ignore
+            if (obj.geometry === null) obj.geometry = undefined;
             box.expandByObject(obj, true);
             obj.children = children;
         }

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) {