Needle Engine 3.48.1

Files changed (14) hide show

src/engine-components/Animation.ts +0 -1
src/engine-components/AnimatorController.ts +12 -7
src/engine-components/ContactShadows.ts +5 -4
src/engine/debug/debug_overlay.ts +1 -0
src/engine/engine_animation.ts +12 -3
src/engine/engine_element_attributes.ts +13 -1
src/engine/engine_element_overlay.ts +14 -6
src/engine/engine_element.ts +67 -32
src/engine/engine_typestore.ts +26 -8
src/engine/engine_utils_format.ts +19 -2
src/engine/webcomponents/needle menu/needle-menu.ts +11 -3
src/engine-components/Skybox.ts +2 -2
src/engine-components/SpriteRenderer.ts +19 -11
src/engine-components/webxr/WebARSessionRoot.ts +8 -0

src/engine-components/Animation.ts CHANGED Viewed

@@ -226,7 +226,6 @@
     onDisable(): void {
         if (this.mixer) {
             this.mixer.stopAllAction();
-            this.mixer = undefined;
         }
     }
     /** @internal */

src/engine-components/AnimatorController.ts CHANGED Viewed

@@ -405,7 +405,7 @@
                 const dur = state.motion.clip!.duration;
                 const normalizedTime = dur <= 0 ? 1 : Math.abs(action.time / dur);
                 let exitTime = transition.exitTime;
                 // When the animation is playing backwards we need to check exit time inverted
                 if (action.timeScale < 0) {
                     exitTime = 1 - exitTime;
@@ -752,13 +752,18 @@
                     for (const behaviour of state.behaviours) {
                         if (!behaviour?.typeName) continue;
                         const type = TypeStore.get(behaviour.typeName);
-                        const instance: StateMachineBehaviour = new type() as StateMachineBehaviour;
-                        if (instance.isStateMachineBehaviour) {
-                            instance._context = this.context ?? undefined;
-                            assign(instance, behaviour.properties);
-                            behaviour.instance = instance;
+                        if (type) {
+                            const instance: StateMachineBehaviour = new type() as StateMachineBehaviour;
+                            if (instance.isStateMachineBehaviour) {
+                                instance._context = this.context ?? undefined;
+                                assign(instance, behaviour.properties);
+                                behaviour.instance = instance;
+                            }
+                            if (debug) console.log("Created animator controller behaviour", state.name, behaviour.typeName, behaviour.properties, instance);
                         }
-                        if (debug) console.log("Created animator controller behaviour", state.name, behaviour.typeName, behaviour.properties, instance);
+                        else {
+                            if (debug || isDevEnvironment()) console.warn("Could not find AnimatorBehaviour type: " + behaviour.typeName);
+                        }
                     }
                 }
             }

src/engine-components/ContactShadows.ts CHANGED Viewed

@@ -128,9 +128,9 @@
      * Call to fit the shadows to the scene.
      */
     fitShadows() {
-        if (debug) console.log("Fitting shadows to scene");
-        setAutoFitEnabled(this.gameObject, false);
-        const box = getBoundingBox(this.context.scene.children, [this.gameObject]);
+        if (debug) console.warn("Fitting shadows to scene");
+        setAutoFitEnabled(this.shadowsRoot, false);
+        const box = getBoundingBox(this.context.scene.children, [this.shadowsRoot]);
         // expand box in all directions (except below ground)
         // 0.75 expands by 75% in each direction
         // The "32" is pretty much heuristically determined – adjusting the value until we don't get a visible border anymore.
@@ -154,13 +154,14 @@
         this.shadowsRoot.scale.set(box.max.x - min.x, box.max.y - min.y, box.max.z - min.z);
         this.applyMinSize();
         this.shadowsRoot.matrixWorldNeedsUpdate = true;
+        if (debug) console.log("Fitted shadows to scene", this.shadowsRoot.scale.clone());
     }
     /** @internal */
     awake() {
         // ignore self for autofitting
-        setAutoFitEnabled(this.gameObject, false);
+        setAutoFitEnabled(this.shadowsRoot, false);
     }
     /** @internal */

src/engine/debug/debug_overlay.ts CHANGED Viewed

@@ -194,6 +194,7 @@
 div[data-needle_engine_debug_overlay] {
     font-family: 'Roboto Flex', sans-serif;
     font-weight: 400;
+    font-size: 16px;
 }
 div[data-needle_engine_debug_overlay] strong {

src/engine/engine_animation.ts CHANGED Viewed

@@ -38,7 +38,10 @@
      * Unregister an animation mixer instance.
      */
     unregisterAnimationMixer(mixer: AnimationMixer | null | undefined): void {
-        if (!mixer) return;
+        if (!mixer) {
+            console.warn("AnimationsRegistry.unregisterAnimationMixer called with null or undefined mixer")
+            return;
+        }
         const index = this.mixers.indexOf(mixer);
         if (index === -1) return;
         this.mixers.splice(index, 1);
@@ -87,11 +90,17 @@
      * @param file The GLTF file to assign the animations from
      */
     static assignAnimationsFromFile(file: Pick<GLTF, "animations" | "scene">, opts?: { createAnimationComponent(obj: Object3D, animation: AnimationClip): IAnimationComponent }) {
-        if (!file || !file.animations) return;
+        if (!file || !file.animations) {
+            console.debug("No animations found in file");
+            return;
+        }
         for (let i = 0; i < file.animations.length; i++) {
             const animation = file.animations[i];
-            if (!animation.tracks || animation.tracks.length <= 0) continue;
+            if (!animation.tracks || animation.tracks.length <= 0) {
+                console.warn("Animation has no tracks");
+                continue;
+            }
             for (const t in animation.tracks) {
                 const track = animation.tracks[t];
                 const parsedPath = PropertyBinding.parseTrackName(track.name);

src/engine/engine_element_attributes.ts CHANGED Viewed

@@ -47,9 +47,21 @@
 }
 type SkyboxAttributes = {
-    /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
+    /** 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,
+    /** Blurs the background image (if any) - value between 0 and 1
+     * 0: no blur
+     * 1: full blur
+     */
+    "background-blurriness"?: number,
+    /**
+     * Background color to be used if no skybox or background image is provided.
+     * For example: "skybox-color='#ff0000'" will set the background color to red.
+     */
+    "background-color"?: string,
+    /** URL to .exr, .hdr, .png, .jpg to be used for lighting */
     "environment-image"?: string,
 }

src/engine/engine_element_overlay.ts CHANGED Viewed

@@ -19,6 +19,7 @@
     private contentElement: HTMLElement | null = null;
     private originalDomOverlayParent: ParentNode | null = null;
     requestEndAR = () => {
         this.onRequestedEndAR();
     }
@@ -151,20 +152,27 @@
         var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svg.classList.add("quit-ar-button");
-        svg.setAttribute('width', "38px");
-        svg.setAttribute('height', "38px");
+        svg.setAttribute('width', "40px");
+        svg.setAttribute('height', "40px");
         svg.style.cssText = `
-            background: radial-gradient(circle, rgba(0,0,0,.05) 70%, rgba(0,0,0,0) 100%);
+            background: rgba(255, 255, 255, .4);
+            -webkit-backdrop-filter: blur(8px);
+            backdrop-filter: blur(8px);
             border-radius: 50%;
+            box-shadow: 0 0 5px rgba(0,0,0,.3);
+            outline: 1px solid rgba(255, 255, 255, .6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
         `;
         fixedButtonContainer.appendChild(svg);
         var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         path.setAttribute('d', 'M 12,12 L 28,28 M 28,12 12,28');
-        path.setAttribute('stroke', '#fff');
-        path.setAttribute('stroke-width', "3px");
+        path.setAttribute('stroke', '#000000');
+        path.setAttribute('stroke-width', "2px");
         path.style.cssText = `
-            filter: drop-shadow(0 0px 1.2px rgba(0,0,0,.7));
+            /**filter: drop-shadow(0 0px 1.2px rgba(0,0,0,.7));**/
         `
         svg.appendChild(path);
         if (debug) console.log("Created fallback close button", svg, element);

src/engine/engine_element.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping } from "three";
+import { AgXToneMapping, Color, LinearToneMapping, NeutralToneMapping, NoToneMapping } from "three";
 import { getLoader, registerLoader } from "../engine/engine_gltf.js";
 import { GameObject } from "../engine-components/Component.js";
@@ -40,6 +40,8 @@
     "ktx2DecoderPath",
     "tone-mapping",
     "tone-mapping-exposure",
+    "background-blurriness",
+    "background-color",
 ]
 // https://developers.google.com/web/fundamentals/web-components/customelements
@@ -308,12 +310,24 @@
                 setKtx2TranscoderPath(newValue);
                 break;
             case "tone-mapping": {
-                this.applyTonemapping();
+                this.applyAttributes();
                 break;
             }
             case "tone-mapping-exposure": {
-                this.applyTonemapping();
+                this.applyAttributes();
+                break;
             }
+            case "background-blurriness": {
+                const value = parseFloat(newValue);
+                if (value != undefined && this._context) {
+                    this._context.scene.backgroundBlurriness = value;
+                }
+                break;
+            }
+            case "background-color": {
+                this.applyAttributes();
+                break;
+            }
         }
     }
@@ -453,7 +467,7 @@
         this._context.alias = alias;
         this._createContextPromise = this._context.create(args);
         const success = await this._createContextPromise;
-        this.applyTonemapping();
+        this.applyAttributes();
         if (debug) console.warn("--------------\nNeedle Engine: finished loading " + loadId + "\n", filesToLoad, `Aborted? ${controller.signal.aborted}`);
         if (this._loadId !== loadId || controller.signal.aborted) {
@@ -477,36 +491,57 @@
         }));
     }
-    private applyTonemapping() {
-        if (!this._context?.renderer) return;
+    private applyAttributes() {
+        // set tonemapping if configured
+        if (this._context.renderer) {
+            const attribute = this.getAttribute("tonemapping") || this.getAttribute("tone-mapping") as TonemappingAttributeOptions | null | undefined;
+            switch (attribute?.toLowerCase()) {
+                case "none":
+                    this._context.renderer.toneMapping = NoToneMapping;
+                    break;
+                case "linear":
+                    this._context.renderer.toneMapping = LinearToneMapping;
+                    break;
+                case "neutral":
+                    this._context.renderer.toneMapping = NeutralToneMapping;
+                    break;
+                case "agx":
+                    this._context.renderer.toneMapping = AgXToneMapping;
+                    break;
+                default:
+                    if (attribute !== null && attribute !== undefined) {
+                        console.warn("Invalid tone-mapping attribute: " + attribute);
+                    }
+            }
-        // set tonemapping if configured
-        const attribute = this.getAttribute("tonemapping") || this.getAttribute("tone-mapping") as TonemappingAttributeOptions | null | undefined;
-        switch (attribute?.toLowerCase()) {
-            case "none":
-                this._context.renderer.toneMapping = NoToneMapping;
-                break;
-            case "linear":
-                this._context.renderer.toneMapping = LinearToneMapping;
-                break;
-            case "neutral":
-                this._context.renderer.toneMapping = NeutralToneMapping;
-                break;
-            case "agx":
-                this._context.renderer.toneMapping = AgXToneMapping;
-                break;
-            default:
-                if (attribute !== null && attribute !== undefined) {
-                    console.warn("Invalid tone-mapping attribute: " + attribute);
-                }
+            const exposure = this.getAttribute("tone-mapping-exposure");
+            if (exposure !== null && exposure !== undefined) {
+                const value = parseFloat(exposure);
+                if (!isNaN(value))
+                    this._context.renderer.toneMappingExposure = value;
+            }
         }
-        const exposure = this.getAttribute("tone-mapping-exposure");
-        if (exposure !== null && exposure !== undefined) {
-            const value = parseFloat(exposure);
-            if (!isNaN(value))
-                this._context.renderer.toneMappingExposure = value;
+        const backgroundBlurriness = this.getAttribute("background-blurriness");
+        if (backgroundBlurriness !== null && backgroundBlurriness !== undefined) {
+            const value = parseFloat(backgroundBlurriness);
+            if (value !== undefined && this._context) {
+                this._context.scene.backgroundBlurriness = value;
+            }
         }
+        const backgroundColor = this.getAttribute("background-color");
+        if (this._context) {
+            if (typeof backgroundColor === "string" && backgroundColor.length > 0) {
+                const currentBackground = this._context.scene.background;
+                if (currentBackground instanceof Color) {
+                    currentBackground.set(backgroundColor);
+                }
+                else {
+                    this._context.scene.background = new Color(backgroundColor);
+                }
+            }
+        }
     }
     private onXRSessionStarted = () => {
@@ -774,7 +809,7 @@
             const isIgnored = ignoredCharacters.includes(c);
             if (isIgnored) continue;
             const isFirstCharacter = displayName.length === 0;
             if (isFirstCharacter) {
                 c = c.toUpperCase();
             }
@@ -784,7 +819,7 @@
             if (lastCharacterWasSpace) {
                 c = c.toUpperCase();
             }
             lastCharacterWasSpace = false;
             displayName += c;

src/engine/engine_typestore.ts CHANGED Viewed

@@ -2,20 +2,24 @@
 const debug = getParam("debugtypes");
+declare type Type = new (...args: any[]) => any;
 class _TypeStore {
-    private _types = {};
+    private _types: Map<string, Type> = new Map();
     constructor() {
         if (debug) console.warn("TypeStore: Created", this);
     }
-    public add(key, type) {
+    /**
+     * add a type to the store
+     */
+    public add(key: string, type: Type) {
         if (debug) console.warn("ADD TYPE", key);
-        const existing = this._types[key];
-        if (existing === undefined)
-            this._types[key] = type;
+        const existing = this._types.get(key);
+        if (!existing)
+            this._types.set(key, type);
         else {
             if (debug) {
                 if (existing !== type) {
@@ -25,9 +29,23 @@
         }
     }
-    public get(key) {
-        return this._types[key];
+    /**
+     * @returns the type for the given key if registered
+     */
+    public get(key: string): Type | null {
+        return this._types.get(key) || null;
     }
+    /**
+     * @returns the key/name for the given type if registered
+     */
+    public getKey(type: Type): string | null {
+        for (const [key, value] of this._types) {
+            if (value === type)
+                return key;
+        }
+        return null;
+    }
 }
 export const $BuiltInTypeFlag = Symbol("BuiltInType");
@@ -40,7 +58,7 @@
  *
  * `export class MyType extends Behaviour { ... }`
  */
-export const registerType = function (constructor: Function) {
+export const registerType = function (constructor: Type) {
     if (!TypeStore.get(constructor.name))
         TypeStore.add(constructor.name, constructor);
 }

src/engine/engine_utils_format.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { isDevEnvironment } from "./debug/debug.js";
 import { getParam } from "./engine_utils.js";
 const debug = getParam("debugfileformat");
@@ -135,9 +136,25 @@
         console.debug("OBJ detected");
         return "obj";
     }
+    // Check if it starts with "v " (vertex) or "f " (face) indicating that it's an OBJ file
+    // If the OBJ file does lack a header altogether and no other check matched
+    else if ((bytes[0] == 118 && bytes[1] == 32) || (bytes[0] == 102 && bytes[1] == 32)) {
+        console.debug("OBJ detected (the file has no header and starts with vertex or face)");
+        return "obj";
+    }
+    // Check if the file starts with "# File exported by ZBrush"
+    else if(bytes[0] == 35 && bytes[1] == 32 && bytes[2] == 70 && bytes[3] == 105 && bytes[4] == 108 && bytes[5] == 101 && bytes[6] == 32 && bytes[7] == 101 && bytes[8] == 120 && bytes[9] == 112 && bytes[10] == 111 && bytes[11] == 114 && bytes[12] == 116 && bytes[13] == 101 && bytes[14] == 100 && bytes[15] == 32 && bytes[16] == 98 && bytes[17] == 121 && bytes[18] == 32 && bytes[19] == 90 && bytes[20] == 66 && bytes[21] == 114 && bytes[22] == 117 && bytes[23] == 115 && bytes[24] == 104) {
+        console.debug("OBJ detected (exported by ZBrush)");
+        return "obj";
+    }
     else {
-        // const text = new TextDecoder().decode(data.slice(0, 9));
-        console.debug("Could not determine file type from binary data", bytes);
+        if (isDevEnvironment() || debug) {
+            const text = new TextDecoder().decode(data.slice(0, 16));
+            console.debug("Could not determine file type from binary data: \"" + text + "...\"", bytes);
+        }
+        else {
+            console.debug("Could not determine file type from binary data", bytes);
+        }
     }
     // const text = new TextDecoder().decode(data);

src/engine/webcomponents/needle menu/needle-menu.ts CHANGED Viewed

@@ -44,6 +44,7 @@
     priority?: number;
     /** Experimental. Allows to put two buttons in one row for the compact layout */
     class?: "row2";
+    title?: string;
 }
 /**
@@ -302,6 +303,9 @@
             top: auto;
             bottom: min(30px, 10vh);
         }
+        #root.top {
+            top: calc(.7rem + env(safe-area-inset-top));
+        }
         .wrapper {
             position: relative;
@@ -367,8 +371,8 @@
             flex-direction: row;
         }
-        .options > button, ::slotted(button) {
-            height: 2.25rem;
+        .options > *, ::slotted(*) {
+            max-height: 2.25rem;
             padding: .4rem .5rem;
         }
@@ -563,6 +567,7 @@
         .compact .options > * {
             font-size: 1.2rem;
             padding: .6rem .5rem;
+            width: 100%;
         }
         .compact.has-options .logo {
             border: none;
@@ -858,6 +863,9 @@
             button.textContent = node.label;
             button.onclick = node.onClick;
             button.setAttribute("priority", node.priority?.toString() ?? "0");
+            if (node.title) {
+                button.title = node.title;
+            }
             if (node.icon) {
                 const icon = getIconElement(node.icon);
                 if (node.iconSide === "right") {
@@ -988,7 +996,7 @@
         if (!this._domElement) return;
         const width = this._domElement.clientWidth;
-        if (width < 500) {
+        if (width < 100) {
             clearTimeout(this._timeoutHandle!);
             this.root.classList.add("compact");
             this.foldout.classList.add("floating-panel-style");

src/engine-components/Skybox.ts CHANGED Viewed

@@ -39,7 +39,7 @@
 ContextRegistry.addContextCreatedCallback((args) => {
     const context = args.context;
-    const skyboxImage = context.domElement.getAttribute("skybox-image");
+    const skyboxImage = context.domElement.getAttribute("skybox-image") || context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
     const promises = new Array<Promise<any>>();
     if (skyboxImage) {
@@ -48,7 +48,7 @@
         // 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\" attribute has no effect: camera clearflags are not set to \"Skybox\"");
+        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");
         promises.push(promise);
     }

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -69,6 +69,18 @@
     y!: number;
 }
+function updateTextureIfNecessary(tex: Texture) {
+    if (!tex) return;
+    if (tex.colorSpace != SRGBColorSpace) {
+        tex.colorSpace = SRGBColorSpace;
+        tex.needsUpdate = true;
+    }
+    if (tex.minFilter == NearestFilter && tex.magFilter == NearestFilter) {
+        tex.anisotropy = 1;
+        tex.needsUpdate = true;
+    }
+}
 /**
  * A sprite is a mesh that represents a 2D image
  */
@@ -115,10 +127,7 @@
     get material() {
         if (!this._material) {
             if (this.texture) {
-                this.texture.colorSpace = SRGBColorSpace;
-                if (this.texture.minFilter == NearestFilter && this.texture.magFilter == NearestFilter)
-                    this.texture.anisotropy = 1;
-                this.texture.needsUpdate = true;
+                updateTextureIfNecessary(this.texture);
             }
             this._material = new MeshBasicMaterial({
                 map: this.texture,
@@ -204,10 +213,7 @@
         const sprite = this.spriteSheet.sprites[index];
         const tex = sprite?.texture;
         if (!tex) return;
-        tex.colorSpace = SRGBColorSpace;
-        if (tex.minFilter == NearestFilter && tex.magFilter == NearestFilter)
-            tex.anisotropy = 1;
-        tex.needsUpdate = true;
+        updateTextureIfNecessary(tex);
         if (!sprite["__hasLoadedProgressive"]) {
             sprite["__hasLoadedProgressive"] = true;
@@ -318,10 +324,12 @@
             if (!this._spriteSheet) {
                 this._spriteSheet = SpriteData.create();
             }
-            this._spriteSheet.sprite = value;
-            this.updateSprite();
+            if (this._spriteSheet.sprite != value) {
+                this._spriteSheet.sprite = value;
+                this.updateSprite();
+            }
         }
-        else {
+        else if (value != this._spriteSheet) {
             this._spriteSheet = value;
             this.updateSprite();
         }

src/engine-components/webxr/WebARSessionRoot.ts CHANGED Viewed

@@ -680,6 +680,14 @@
     private _didMultitouch: boolean = false;
     private touchStart = (evt: TouchEvent) => {
+        if (evt.defaultPrevented) return;
+        // let isValidTouch = true;
+        // isValidTouch = evt.target === this.context.domElement || evt.target === this.context.renderer.domElement;
+        // if (!isValidTouch) {
+        //     return;
+        // }
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
             // if a user starts swiping in the top area of the screen