@needle-tools/engine 4.5.0-alpha.1 → 4.5.0-alpha.3

package/src/engine/engine_utils_format.ts

@@ -1,4 +1,5 @@
 import { isDevEnvironment } from "./debug/index.js";
+import { NeedleEngineModelLoader, registeredFileTypeCallbacks } from "./engine_loaders.callbacks.js";
 import { getParam } from "./engine_utils.js";
 
 const debug = getParam("debugfileformat");
@@ -6,7 +7,7 @@ const debug = getParam("debugfileformat");
 /**
  * The supported file types that can be determined by the engine. Used in {@link tryDetermineFileTypeFromURL} and {@link tryDetermineFileTypeFromBinary}
  */
-export declare type FileType = "gltf" | "glb" | "vrm" | "fbx" | "obj" | "usdz" | "usd" | "usda" | "unknown";
+export declare type FileType = "gltf" | "glb" | "vrm" | "fbx" | "obj" | "usdz" | "usd" | "usda" | "unknown" | ({} & string);
 
 /**
  * Tries to determine the file type of a file from its URL  
@@ -20,7 +21,9 @@ export declare type FileType = "gltf" | "glb" | "vrm" | "fbx" | "obj" | "usdz" |
  * const fileType = await tryDetermineFileTypeFromURL(url);
  * console.log(fileType); // "glb"
  */
-export async function tryDetermineFileTypeFromURL(url: string, useExtension: boolean = true): Promise<FileType> {
+export async function tryDetermineFileTypeFromURL(url: string, opts: { useExtension: boolean }): Promise<FileType> {
+
+    const { useExtension = true } = opts;
 
     if (useExtension) {
         // We want to save on requests so we first check the file extension if there's any
@@ -59,11 +62,12 @@ export async function tryDetermineFileTypeFromURL(url: string, useExtension: boo
         }
     }
 
-    
+
     // If the URL doesnt contain a filetype we need to check the header
     // This is the case for example if we load a file from a data url
+    const originalUrl = url;
 
-    if(url.startsWith("blob:")) {
+    if (url.startsWith("blob:")) {
         // We can't modify the blob URL
     }
     else {
@@ -84,7 +88,7 @@ export async function tryDetermineFileTypeFromURL(url: string, useExtension: boo
 
     if (header?.ok) {
         const data = await header.arrayBuffer();
-        const res = tryDetermineFileTypeFromBinary(data, header);
+        const res = tryDetermineFileTypeFromBinary(originalUrl, data, header);
         if (debug) console.log("Determined file type from header: " + res);
         return res;
     }
@@ -96,7 +100,7 @@ export async function tryDetermineFileTypeFromURL(url: string, useExtension: boo
 /** Attempts to determine the file type of a binary file by looking at the first few bytes of the file. 
  * @hidden 
  */
-export function tryDetermineFileTypeFromBinary(data: ArrayBuffer, response: Response): FileType {
+export function tryDetermineFileTypeFromBinary(url: string, data: ArrayBuffer, response: Response): FileType {
 
     if (data.byteLength < 4) {
         return "unknown";
@@ -193,14 +197,6 @@ export function tryDetermineFileTypeFromBinary(data: ArrayBuffer, response: Resp
         console.debug("OBJ detected (mtllib)");
         return "obj";
     }
-
-    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);
     // if (text.startsWith("Kaydara FBX")) {
     //     return "fbx";
@@ -209,5 +205,27 @@ export function tryDetermineFileTypeFromBinary(data: ArrayBuffer, response: Resp
     //     return "gltf";
     // }
 
+    for (const callback of registeredFileTypeCallbacks) {
+        const mimetype = callback({
+            url: url,
+            response: response,
+            contentType: response.headers.get("content-type"),
+            bytes: bytes
+        })
+        if (mimetype) {
+            if (debug) console.debug(`Mimetype callback returned: ${mimetype}`);
+            return mimetype;
+        }
+    }
+
+
+    if (isDevEnvironment() || debug) {
+        const text = new TextDecoder().decode(data.slice(0, Math.min(data.byteLength, 32)));
+        console.warn(`Could not determine file type.\n\nConsider registering a custom loader via the 'onCreateCustomModelLoader' callback: 'NeedleEngineModelLoader.onCreateCustomModelLoader(args => { })'\n\nContent-Type: \"${response.headers.get("content-type")}\n\"Text: \"${text}\"\nBinary:`, bytes);
+    }
+    else {
+        console.debug(`Could not determine file type from binary data`);
+    }
+
     return "unknown";
 }

package/src/engine/extensions/extensions.ts

@@ -1,3 +1,4 @@
+import { Loader } from "three";
 import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
@@ -66,13 +67,17 @@ export function removeCustomImportExtensionType(ext: INeedleGLTFExtensionPlugin)
 
 
 /** Registers the Needle Engine components extension */
-export function registerComponentExtension(loader: GLTFLoader): NEEDLE_components {
-    const ext = new NEEDLE_components();
-    loader.register(p => {
-        ext.parser = p;
+export function registerComponentExtension(loader: GLTFLoader | Loader | object): NEEDLE_components | null {
+    if (loader instanceof GLTFLoader) {
+        const ext = new NEEDLE_components();
+        loader.register(p => {
+            ext.parser = p;
+            return ext;
+        });
         return ext;
-    });
-    return ext;
+    }
+
+    return null;
 }
 
 
@@ -130,7 +135,7 @@ export function registerExportExtensions(exp: GLTFExporter, context: Context) {
 }
 
 /** @internal */
-export function invokeAfterImportPluginHooks(url: string, gltf: GLTF, context: Context) {
+export function invokeLoadedImportPluginHooks(url: string, gltf: GLTF, context: Context) {
     for (const ext of _plugins)
         if (ext.onLoaded) ext.onLoaded(url, gltf, context);
 }

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

@@ -31,19 +31,16 @@ type MainAttributes = {
 }
 
 type LoadingAttributes = {
-    "loading-style"?: "light" | "dark",
-    /** Pro feature */
+    /** Set a custom loading background color (e.g. "red" or "#dd00ff" or "rgba(18, 224, 224, 0.5)") */
+    "loading-background"?: string,
+    /** Pro features */
     "hide-loading-overlay"?: boolean,
     /** Pro feature */
-    "loading-background-color"?: string,
-    /** Pro feature */
     "loading-logo-src"?: string,
     /** Pro feature */
     "primary-color"?: string,
     /** Pro feature */
     "secondary-color"?: string,
-    /** Pro feature */
-    "loading-text-color"?: string,
 }
 
 type SkyboxAttributes = {

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

@@ -197,10 +197,12 @@ export class EngineLoadingView implements ILoadingViewHandler {
             this._loadingElement.style.height = "100%";
             this._loadingElement.style.left = "0";
             this._loadingElement.style.top = "0";
-            if (loadingStyle === "light")
-                this._loadingElement.style.backgroundColor = "#ddd";
+            const loadingBackgroundColor = this._element.getAttribute("loading-background");
+            if (loadingBackgroundColor) {
+                this._loadingElement.style.background = loadingBackgroundColor;
+            }
             else
-                this._loadingElement.style.backgroundColor = "#222";
+                this._loadingElement.style.backgroundColor = "transparent";
             this._loadingElement.style.display = "flex";
             this._loadingElement.style.alignItems = "center";
             this._loadingElement.style.justifyContent = "center";
@@ -214,16 +216,6 @@ export class EngineLoadingView implements ILoadingViewHandler {
                 this._loadingElement.style.color = "rgba(0,0,0,.6)";
             else
                 this._loadingElement.style.color = "rgba(255,255,255,.3)";
-            if (hasLicense && this._element) {
-                const loadingBackgroundColor = this._element.getAttribute("loading-background-color");
-                if (loadingBackgroundColor) {
-                    this._loadingElement.style.backgroundColor = loadingBackgroundColor;
-                }
-                const textColor = this._element.getAttribute("loading-text-color");
-                if (textColor) {
-                    this._loadingElement.style.color = textColor;
-                }
-            }
         }
 
         const className = this._loadingElementOptions?.className ?? EngineLoadingView.LoadingContainerClassName;
@@ -302,8 +294,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const getGradientPos = function (t: number): string {
             return Mathf.lerp(0, maxWidth, t) + "%";
         }
-        this._loadingBar.style.background =
-            `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
+        this._loadingBar.style.background = "#66A22F";
+            // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
         this._loadingBar.style.backgroundAttachment = "fixed";
         this._loadingBar.style.width = "0%";
         this._loadingBar.style.height = "100%";
@@ -321,27 +313,27 @@ export class EngineLoadingView implements ILoadingViewHandler {
             }
         }
 
-        this._loadingTextContainer = document.createElement("div");
-        this._loadingTextContainer.style.display = "flex";
-        this._loadingTextContainer.style.justifyContent = "center";
-        this._loadingTextContainer.style.marginTop = ".2rem";
-        details.appendChild(this._loadingTextContainer);
-
-        const messageContainer = document.createElement("div");
-        this._messageContainer = messageContainer;
-        messageContainer.style.display = "flex";
-        messageContainer.style.fontSize = ".8rem";
-        messageContainer.style.paddingTop = ".1rem";
-        // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
-        messageContainer.style.justifyContent = "center";
-        details.appendChild(messageContainer);
-
-        if (hasLicense && this._element) {
-            const loadingTextColor = this._element.getAttribute("loading-text-color");
-            if (loadingTextColor) {
-                messageContainer.style.color = loadingTextColor;
-            }
-        }
+        // this._loadingTextContainer = document.createElement("div");
+        // this._loadingTextContainer.style.display = "flex";
+        // this._loadingTextContainer.style.justifyContent = "center";
+        // this._loadingTextContainer.style.marginTop = ".2rem";
+        // details.appendChild(this._loadingTextContainer);
+
+        // const messageContainer = document.createElement("div");
+        // this._messageContainer = messageContainer;
+        // messageContainer.style.display = "flex";
+        // messageContainer.style.fontSize = ".8rem";
+        // messageContainer.style.paddingTop = ".1rem";
+        // // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
+        // messageContainer.style.justifyContent = "center";
+        // details.appendChild(messageContainer);
+
+        // if (hasLicense && this._element) {
+        //     const loadingTextColor = this._element.getAttribute("loading-text-color");
+        //     if (loadingTextColor) {
+        //         messageContainer.style.color = loadingTextColor;
+        //     }
+        // }
 
         this.handleRuntimeLicense(this._loadingElement);
 

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

@@ -4,8 +4,8 @@ import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
 import { PUBLIC_KEY, VERSION } from "../engine_constants.js";
 import { registerLoader } from "../engine_gltf.js";
 import { hasCommercialLicense } from "../engine_license.js";
-import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "../engine_loaders.js";
-import { NeedleLoader } from "../engine_scenetools.js";
+import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "../engine_loaders.gltf.js";
+import { NeedleLoader } from "../engine_loaders.js";
 import { Context, ContextCreateArgs } from "../engine_setup.js";
 import { type INeedleEngineComponent, type LoadedModel } from "../engine_types.js";
 import { getParam } from "../engine_utils.js";

package/src/engine-components/AvatarLoader.ts

@@ -3,7 +3,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { InstantiateOptions } from "../engine/engine_gameobject.js";
 import { getLoader } from "../engine/engine_gltf.js";
-import * as loaders from "../engine/engine_loaders.js"
+import * as loaders from "../engine/engine_loaders.gltf.js"
 import { Context } from "../engine/engine_setup.js";
 import * as utils from "../engine/engine_utils.js"
 import { GameObject } from "./Component.js";

package/src/engine-components/ContactShadows.ts

@@ -110,6 +110,21 @@ export class ContactShadows extends Behaviour {
      */
     minSize?: Partial<Vec3>;
 
+    /**
+     * When enabled the shadows will not be updated automatically. Use `needsUpdate()` to update the shadows manually.
+     * This is useful when you want to update the shadows only when the scene changes.
+     */
+    manualUpdate: boolean = false;
+    /**
+     * Call this method to update the shadows manually. The update will be done in the next frame.
+     */
+    set needsUpdate(val: boolean) {
+        this._needsUpdate = val;
+    }
+    get needsUpdate(): boolean {
+        return this._needsUpdate;
+    }
+    private _needsUpdate: boolean = false;
 
     /** All shadow objects are parented to this object. 
      * The gameObject itself should not be transformed because we want the ContactShadows object e.g. also have a GroundProjectedEnv component
@@ -288,6 +303,10 @@ export class ContactShadows extends Behaviour {
         else this.applyMinSize();
     }
 
+    onEnable(): void {
+        this._needsUpdate = true;
+    }
+
     /** @internal */
     onDestroy(): void {
         const instance = ContactShadows._instances.get(this.context);
@@ -313,6 +332,11 @@ export class ContactShadows extends Behaviour {
     /** @internal */
     onBeforeRender(_frame: XRFrame | null): void {
 
+        if (this.manualUpdate) {
+            if (!this._needsUpdate) return;
+        }
+        this._needsUpdate = false;
+
         if (!this.renderTarget || !this.renderTargetBlur ||
             !this.depthMaterial || !this.shadowCamera ||
             !this.blurPlane || !this.shadowGroup || !this.plane ||

package/src/engine-components/webxr/controllers/XRControllerModel.ts

@@ -3,13 +3,11 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory.js";
 import { XRHandMeshModel } from "three/examples/jsm/webxr/XRHandMeshModel.js";
 
-import { showBalloonWarning } from "../../../engine/debug/index.js";
 import { AssetReference } from "../../../engine/engine_addressables.js";
 import { setDontDestroy } from "../../../engine/engine_gameobject.js";
 import { Gizmos } from "../../../engine/engine_gizmos.js";
 import { getLoader } from "../../../engine/engine_gltf.js";
-import { createBuiltinComponents } from "../../../engine/engine_gltf_builtin_components.js";
-import { addDracoAndKTX2Loaders } from "../../../engine/engine_loaders.js";
+import { addDracoAndKTX2Loaders } from "../../../engine/engine_loaders.gltf.js";
 import { serializable } from "../../../engine/engine_serialization_decorator.js";
 import type { IGameObject, SourceIdentifier } from "../../../engine/engine_types.js";
 import { getParam } from "../../../engine/engine_utils.js";
@@ -306,7 +304,7 @@ export class XRControllerModel extends Behaviour {
         // @ts-ignore
         const handmesh = new XRHandMeshModel(handObject, hand, loader.path, filename, loader, (object: Object3D) => {
 
-            const gltf = componentsExtension.gltf;
+            const gltf = componentsExtension?.gltf;
             // The XRHandMeshController removes the hand from the gltf before calling this callback
             // we need this in the GLTF scene however for creating the builtin components 
             if (gltf?.scene.children?.length === 0) {
@@ -314,7 +312,8 @@ export class XRControllerModel extends Behaviour {
             }
 
             // console.log(controller.side, componentsExtension.gltf, object, componentsExtension.gltf.scene?.children)
-            getLoader().createBuiltinComponents(comp.context, comp.sourceId || filename, componentsExtension.gltf, null, componentsExtension);
+            if (componentsExtension?.gltf)
+                getLoader().createBuiltinComponents(comp.context, comp.sourceId || filename, componentsExtension.gltf, null, componentsExtension);
 
             // The hand mesh should not receive raycasts
             object.traverse(child => {