@needle-tools/engine 4.8.4 → 4.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.8.4",
+  "version": "4.8.5",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {
@@ -93,7 +93,7 @@
   ],
   "dependencies": {
     "@dimforge/rapier3d-compat": "^0.14.0",
-    "@needle-tools/gltf-progressive": "^3.3.1",
+    "@needle-tools/gltf-progressive": "3.3.2",
     "@webxr-input-profiles/motion-controllers": "^1.0.0",
     "flatbuffers": "2.0.4",
     "md5": "^2.3.0",
@@ -102,7 +102,7 @@
     "postprocessing": "^6.36.6",
     "simplex-noise": "^4.0.1",
     "stats.js": "^0.17.0",
-    "three": "npm:@needle-tools/three@0.169.7",
+    "three": "npm:@needle-tools/three@0.169.8",
     "three-mesh-bvh": "^0.9.1",
     "three-mesh-ui": "npm:@needle-tools/three-mesh-ui@^7.1.5-alpha.5",
     "three.quarks": "0.15.6",

package/src/engine/debug/debug_console.ts

@@ -1,7 +1,5 @@
-import { isLocalNetwork } from "../engine_networking_utils.js";
-import { DeviceUtilities,getParam } from "../engine_utils.js";
-import { isDevEnvironment } from "./debug.js";
-import { getErrorCount, makeErrorsVisibleForDevelopment } from "./debug_overlay.js";
+import { getParam } from "../engine_utils.js";
+import { getErrorCount } from "./debug_overlay.js";
 
 let consoleInstance: VConsole | null | undefined = undefined;
 let consoleHtmlElement: HTMLElement | null = null;
@@ -12,38 +10,10 @@ let watchInterval: any = null;
 const defaultButtonIcon = "terminal";
 
 const showConsole = getParam("console");
-const suppressConsole = getParam("noerrors") || getParam("noconsole") || window.crossOriginIsolated;
 if (showConsole) {
     showDebugConsole();
 }
 
-if (!suppressConsole && (showConsole || isLocalNetwork())) {
-    if (isLocalNetwork() && !showConsole) {
-        const consoleUrl = new URL(window.location.href);
-        consoleUrl.searchParams.set("console", "1");
-        console.log("🌵 Tip: You can add the \"?console\" query parameter to the url to show the debug console (on mobile it will automatically open in the bottom right corner when your get errors during development. In VR a spatial console will appear.)", "\nOpen this page to get the console: " + consoleUrl.toString());
-    }
-    const enableConsole = DeviceUtilities.isMobileDevice() || (DeviceUtilities.isQuest() && isDevEnvironment());
-    if (enableConsole || showConsole) {
-        // we need to invoke this here - otherwise we will miss errors that happen after the console is loaded
-        // and calling the method from the root needle-engine.ts import is evaluated later (if we import the method from the toplevel file and then invoke it)
-        makeErrorsVisibleForDevelopment();
-        beginWatchingLogs();
-        createConsole(true);
-        if (enableConsole) {
-            const engineElement = document.querySelector("needle-engine");
-            engineElement?.addEventListener("enter-ar", () => {
-                if (showConsole || consoleInstance || getErrorCount() > 0) {
-                    if (getParam("noerrors")) return;
-                }
-            });
-            engineElement?.addEventListener("exit-ar", () => {
-                onResetConsoleElementToDefaultParent();
-            });
-        }
-    }
-}
-
 const $defaultConsoleParent = Symbol("consoleParent");
 
 export function showDebugConsole() {
@@ -247,7 +217,7 @@ function createConsole(startHidden: boolean = false) {
         isLoading = false;
         consoleInstance = null;
     };
-    script.src = "https://cdn.jsdelivr.net/npm/vconsole@3.9.1/dist/vconsole.min.js";
+    script.src = "https://cdn.jsdelivr.net/npm/vconsole@3.15.1/dist/vconsole.min.js";
     document.body.appendChild(script);
 }
 

package/src/engine/engine_pmrem.ts

@@ -0,0 +1,118 @@
+import { createLoaders } from "@needle-tools/gltf-progressive";
+import { CubeUVReflectionMapping, SRGBColorSpace, Texture, TextureLoader, WebGLRenderer } from "three";
+import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader";
+import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { disposeObjectResources, setDisposable } from "./engine_assetdatabase.js";
+
+const running: Map<string, Promise<Texture | null>> = new Map();
+
+// #region api
+
+export function loadPMREM(url: string, renderer: WebGLRenderer): Promise<Texture | null> {
+    if (running.has(url)) {
+        return running.get(url)!;
+    }
+    const actualUrl = new URL(url, window.location.href);
+    const promise = internalLoadPMREM(actualUrl, renderer);
+    running.set(url, promise);
+    return promise;
+}
+
+
+
+// #region Cache
+
+declare type SkyboxCacheEntry = { src: string, texture: Promise<Texture | null> };
+function ensureGlobalCache() {
+    if (!globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"])
+        globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"] = new Array<SkyboxCacheEntry>();
+    return globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"] as Array<SkyboxCacheEntry>;
+}
+
+function tryGetPreviouslyLoadedTexture(src: string) {
+    const cache = ensureGlobalCache();
+    const found = cache.find(x => x.src === src);
+    if (found) {
+        return found.texture;
+    }
+    return null;
+}
+async function disposeCachedTexture(tex: Promise<Texture | null>) {
+    const texture = await tex;
+    if (!texture) return;
+    setDisposable(texture, true);
+    disposeObjectResources(texture);
+}
+function registerPromise(src: string, texture: Promise<Texture | null>) {
+    const cache = ensureGlobalCache();
+    // Make sure the cache doesnt get too big
+    while (cache.length > 5) {
+        const entry = cache.shift();
+        if (entry) { disposeCachedTexture(entry.texture); }
+    }
+    texture.then(t => { return setDisposable(t, false) });
+    cache.push({ src, texture });
+}
+
+
+
+// #region loading
+
+
+async function internalLoadPMREM(url: URL, renderer: WebGLRenderer) {
+    if (!url) return Promise.resolve(null);
+
+    const pathname = url.pathname;
+    const isPMREM_URL: boolean = url.toString().toLowerCase().includes("pmrem") || url.searchParams.get("pmrem") != null;
+
+    const cached = tryGetPreviouslyLoadedTexture(pathname);
+    if (cached) {
+        const res = await cached;
+        if (res?.source?.data?.length > 0 || res?.source?.data?.data?.length) return res;
+    }
+    const isEXR = pathname.endsWith(".exr");
+    const isHdr = pathname.endsWith(".hdr");
+    const isKtx2 = pathname.endsWith(".ktx2");
+
+    let loader: RGBELoader | EXRLoader | TextureLoader | KTX2Loader;
+
+    if (isEXR) {
+        loader = new EXRLoader();
+    }
+    else if (isHdr) {
+        loader = new RGBELoader();
+    }
+    else if (isKtx2) {
+        const { ktx2Loader } = createLoaders(renderer);
+        loader = ktx2Loader;
+    }
+    else {
+        loader = new TextureLoader();
+    }
+
+    const str = url.toString();
+    const promise = loader.loadAsync(str)
+        .then(tex => {
+            if (tex) {
+                const nameIndex = pathname.lastIndexOf("/");
+                tex.name = pathname.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
+
+                if (isPMREM_URL) {
+                    tex.mapping = CubeUVReflectionMapping;
+                }
+
+                if (loader instanceof TextureLoader) {
+                    tex.colorSpace = SRGBColorSpace;
+                }
+            }
+            return tex;
+        });
+
+    registerPromise(str, promise);
+    const texture = await promise.catch(_err => {
+        console.warn("Failed to load texture from url:", url);
+        return null;
+    });
+    return texture;
+}

package/src/engine-components/Camera.ts

@@ -694,7 +694,7 @@ class CameraSkybox {
         }
         else if (this.context.scene.background !== this._skybox) {
 
-            const hasBackgroundAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color") || this.context.domElement.getAttribute("skybox-image");
+            const hasBackgroundAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color");
 
             if (debug) console.debug(`[Camera] Apply Skybox ${this._skybox?.name} ${hasBackgroundAttribute} - \"${this._camera.name}\"`);
             if (!hasBackgroundAttribute?.length) {

package/src/engine-components/CameraUtils.ts

@@ -39,11 +39,6 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     // 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
-        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/DragControls.ts

@@ -454,7 +454,6 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
             const sync = GameObject.getComponentInChildren(evt.object, SyncedTransform);
             if (sync) {
                 sync.fastMode = false;
-                // sync?.requestOwnership();
             }
         }
         if (this._marker)

package/src/engine-components/Duplicatable.ts

@@ -119,8 +119,9 @@ export class Duplicatable extends Behaviour implements IPointerEventHandler {
         const res = this.handleDuplication();
         if (res) {
             const dragControls = GameObject.getComponent(res, DragControls);
-            if (!dragControls) console.warn("Duplicated object does not have DragControls", res);
-            else {
+            if (!dragControls) {
+                if (isDevEnvironment()) console.warn(`Duplicated object (${res.name}) does not have DragControls`);
+            } else {
                 dragControls.onPointerDown(args);
                 this._forwardPointerEvents.set(args.event.space, dragControls);
             }

package/src/engine-components/Skybox.ts

@@ -1,12 +1,11 @@
-import { createLoaders } from "@needle-tools/gltf-progressive";
-import { CompressedCubeTexture, CubeRefractionMapping, CubeTexture, EquirectangularRefractionMapping, SRGBColorSpace, Texture, TextureLoader } from "three"
+import { CompressedCubeTexture, CubeRefractionMapping, CubeTexture, CubeUVReflectionMapping, EquirectangularRefractionMapping, SRGBColorSpace, Texture, TextureLoader } from "three"
 import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader.js";
 import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader.js";
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 
-import { disposeObjectResources, setDisposable } from "../engine/engine_assetdatabase.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { syncField } from "../engine/engine_networking_auto.js";
+import { loadPMREM } from "../engine/engine_pmrem.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { type IContext } from "../engine/engine_types.js";
 import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback } from "../engine/engine_utils.js";
@@ -51,7 +50,9 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     const context = args.context;
     const skyboxImage = context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
-    if (skyboxImage) {
+    const envAndSkyboxAreSame = skyboxImage === environmentImage;
+
+    if (skyboxImage && !envAndSkyboxAreSame) {
         if (debug) console.log("Creating remote skybox to load " + skyboxImage);
         // 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
@@ -61,7 +62,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     }
     if (environmentImage) {
         if (debug) console.log("Creating remote environment to load " + environmentImage);
-        const promise = createRemoteSkyboxComponent(context, environmentImage, false, true, "environment-image");
+        const promise = createRemoteSkyboxComponent(context, environmentImage, envAndSkyboxAreSame, true, "environment-image");
         if (promise) promises.push(promise);
     }
 });
@@ -71,39 +72,6 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, () => {
     })
 });
 
-declare type SkyboxCacheEntry = { src: string, texture: Promise<Texture | null> };
-function ensureGlobalCache() {
-    if (!globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"])
-        globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"] = new Array<SkyboxCacheEntry>();
-    return globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"] as Array<SkyboxCacheEntry>;
-}
-
-function tryGetPreviouslyLoadedTexture(src: string) {
-    const cache = ensureGlobalCache();
-    const found = cache.find(x => x.src === src);
-    if (found) {
-        if (debug) console.log("Skybox: Found previously loaded texture for " + src);
-        return found.texture;
-    }
-    return null;
-}
-async function disposeCachedTexture(tex: Promise<Texture | null>) {
-    const texture = await tex;
-    if (!texture) return;
-    setDisposable(texture, true);
-    disposeObjectResources(texture);
-}
-function registerLoadedTexture(src: string, texture: Promise<Texture | null>) {
-    const cache = ensureGlobalCache();
-    // Make sure the cache doesnt get too big
-    while (cache.length > 5) {
-        const entry = cache.shift();
-        if (entry) { disposeCachedTexture(entry.texture); }
-    }
-    texture.then(t => { return setDisposable(t, false) });
-    cache.push({ src, texture });
-}
-
 
 /**
  * RemoteSkybox is a component that allows you to set the skybox of a scene from a URL or a local file.  
@@ -177,7 +145,6 @@ export class RemoteSkybox extends Behaviour {
     @serializable()
     allowNetworking: boolean = true;
 
-    private _loader?: RGBELoader | EXRLoader | TextureLoader | KTX2Loader;
     private _prevUrl?: string;
     private _prevLoadedEnvironment?: Texture;
     private _prevEnvironment: Texture | null = null;
@@ -245,7 +212,7 @@ export class RemoteSkybox extends Behaviour {
         }
         this._prevUrl = url;
 
-        const texture = await this.loadTexture(url, name);
+        const texture = await loadPMREM(url, this.context.renderer);
         if (!texture) {
             if (debug) console.warn("RemoteSkybox: Failed to load texture from url", url);
             return false;
@@ -262,62 +229,18 @@ export class RemoteSkybox extends Behaviour {
         }
         // Update the current url
         this.url = url;
-        const nameIndex = url.lastIndexOf("/");
-        texture.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
-        if (this._loader instanceof TextureLoader) {
-            texture.colorSpace = SRGBColorSpace;
-        }
         this._prevLoadedEnvironment = texture;
         this.apply();
         return true;
     }
 
-    private async loadTexture(url: string, name?: string) {
-        if (!url) return Promise.resolve(null);
-        name ??= url;
-        const cached = tryGetPreviouslyLoadedTexture(name);
-        if (cached) {
-            const res = await cached;
-            if (res?.source?.data?.length > 0 || res?.source?.data?.data?.length) return res;
-        }
-        const isEXR = name.endsWith(".exr");
-        const isHdr = name.endsWith(".hdr");
-        const isKtx2 = name.endsWith(".ktx2");
-        if (isEXR) {
-            if (!(this._loader instanceof EXRLoader))
-                this._loader = new EXRLoader();
-        }
-        else if (isHdr) {
-            if (!(this._loader instanceof RGBELoader))
-                this._loader = new RGBELoader();
-        }
-        else if (isKtx2) {
-            if (!(this._loader instanceof KTX2Loader)) {
-                const { ktx2Loader } = createLoaders(this.context.renderer);
-                this._loader = ktx2Loader;
-            }
-        }
-        else {
-            if (!(this._loader instanceof TextureLoader))
-                this._loader = new TextureLoader();
-        }
-
-        if (debug) console.log("Loading skybox: " + url);
-        const loadingTask = this._loader.loadAsync(url).catch(_err => {
-            console.warn("RemoteSkybox: Failed to load texture from url:", url);
-            return null;
-        });
-        registerLoadedTexture(name, loadingTask);
-        const envMap = await loadingTask;
-        return envMap;
-    }
 
     private apply() {
         const envMap = this._prevLoadedEnvironment;
         if (!envMap) return;
 
 
-        if ((envMap instanceof CubeTexture || envMap instanceof CompressedCubeTexture)) {
+        if ((envMap instanceof CubeTexture || envMap instanceof CompressedCubeTexture) || envMap.mapping == CubeUVReflectionMapping) {
             // Nothing to do
         }
         else {
@@ -437,13 +360,14 @@ export class RemoteSkybox extends Behaviour {
                     console.warn(`[RemoteSkybox]: File \"${file.name}\" is not supported. Supported files are ${this.validTextureTypes.join(", ")}`);
                     return;
                 }
-                if (tryGetPreviouslyLoadedTexture(file.name) === null) {
-                    const blob = new Blob([file]);
-                    const url = URL.createObjectURL(blob);
-                    e.preventDefault();
-                    this.setSkybox(url, file.name);
-                }
-                else {
+                // if (tryGetPreviouslyLoadedTexture(file.name) === null) {
+                //     const blob = new Blob([file]);
+                //     const url = URL.createObjectURL(blob);
+                //     e.preventDefault();
+                //     this.setSkybox(url, file.name);
+                // }
+                // else 
+                {
                     e.preventDefault();
                     this.setSkybox(file.name);
                 }
@@ -458,31 +382,35 @@ export class RemoteSkybox extends Behaviour {
 
 function tryParseMagicSkyboxName(str: string | null | undefined, environment: boolean, background: boolean): string | null {
 
+    if (str === null || str === undefined) return null;
+
     const useLowRes = environment && !background;
 
-    switch (str?.toLowerCase()) {
+    switch (str.toLowerCase()) {
         case "studio":
             if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/modelviewer-Neutral-small.hdr";
+                return "https://cdn.needle.tools/static/skybox/modelviewer-Neutral-small.pmrem4x4.ktx2?pmrem";
             }
-            else return "https://cdn.needle.tools/static/skybox/modelviewer-Neutral.hdr";
+            return "https://cdn.needle.tools/static/skybox/modelviewer-Neutral.pmrem4x4.ktx2?pmrem";
 
         case "blurred-skybox":
             if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/blurred-skybox-small.exr";
+                return "https://cdn.needle.tools/static/skybox/blurred-skybox-small.pmrem4x4.ktx2?pmrem";
             }
-            return "https://cdn.needle.tools/static/skybox/blurred-skybox.exr";
+            return "https://cdn.needle.tools/static/skybox/blurred-skybox.pmrem4x4.ktx2?pmrem";
         case "quicklook-ar":
             if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/QuickLook-ARMode-small.exr";
+                return "https://cdn.needle.tools/static/skybox/QuickLook-ARMode-small.pmrem4x4.ktx2?pmrem";
             }
-            return "https://cdn.needle.tools/static/skybox/QuickLook-ARMode.exr";
+            return "https://cdn.needle.tools/static/skybox/QuickLook-ARMode.pmrem4x4.ktx2?pmrem";
         case "quicklook":
             if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode-small.exr";
+                return "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode-small.pmrem4x4.ktx2?pmrem";
             }
-            return "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode.exr";
+            return "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode.pmrem4x4.ktx2?pmrem";
     }
-    if (str === undefined) return null;
+
+
+
     return str;
 }

package/src/engine-components/TransformGizmo.ts

@@ -129,13 +129,22 @@ export class TransformGizmo extends Behaviour {
     private onControlChangedEvent = (event) => {
         const orbit = this.orbit;
         if (orbit) orbit.enabled = !event.value;
+
         if (event.value) {
-            // request ownership on drag start
-            const sync = GameObject.getComponentInParent(this.gameObject, SyncedTransform);
+            // Start of interaction
+            const sync = this.gameObject.getComponentInParent(SyncedTransform);
             if (sync) {
+                sync.fastMode = true;
                 sync.requestOwnership();
             }
         }
+        else {
+            // End of interaction
+            const sync = this.gameObject.getComponentInParent(SyncedTransform);
+            if (sync) {
+                sync.fastMode = false;
+            }
+        }
     }
 
     /**