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

package/src/engine/engine_types.ts

@@ -1,5 +1,5 @@
 import type { QueryFilterFlags, World } from "@dimforge/rapier3d-compat";
-import { AnimationClip, Color, Material, Mesh, Object3D, Quaternion } from "three";
+import { AnimationClip, Color, Loader, Material, Mesh, Object3D, Quaternion } from "three";
 import { Vector3 } from "three";
 import { type GLTF as THREE_GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 
@@ -21,8 +21,10 @@ type NoInternals<T> = FilterStartingWith<T, "_">;
 type NoInternalNeedleEngineState<T> = Omit<T, "destroyed" | "gameObject" | "activeAndEnabled" | "context" | "isComponent" | "scene" | "up" | "forward" | "right" | "worldRotation" | "worldEuler" | "worldPosition" | "worldQuaternion">;
 export type ComponentInit<T> = Partial<NoInternalNeedleEngineState<NoInternals<NoUndefinedNoFunctions<T>>>>
 
+
 /** GLTF, GLB or VRM */
 export type GLTF = THREE_GLTF;
+
 /** FBX type */
 export type FBX = {
     animations: AnimationClip[];
@@ -35,8 +37,22 @@ export type OBJ = {
     scene: Object3D;
     scenes: Object3D[];
 }
+export type CustomModel = {
+    animations: AnimationClip[];
+    scene: Object3D;
+    scenes: Object3D[];
+}
+
 /** All possible model types that Needle Engine can load */
-export type Model = (GLTF | FBX | OBJ);
+export type Model = (GLTF | FBX | OBJ | CustomModel);
+
+export function isGLTFModel(model: Model): model is GLTF {
+    const gltf = model as GLTF;
+    if (gltf.parser && gltf.parser.json) {
+        return true;
+    }
+    return false;
+}
 
 /** A loaded model */
 export type LoadedModel = {
@@ -218,7 +234,7 @@ export interface IComponent extends IHasGuid {
     get worldQuaternion(): Quaternion;
 }
 
-export function isComponent(obj:any) : obj is IComponent {
+export function isComponent(obj: any): obj is IComponent {
     return obj && obj.isComponent;
 }
 
@@ -547,14 +563,14 @@ export interface IPhysicsEngine {
      * @param collider The collider component to add
      */
     addSphereCollider(collider: ICollider);
-    
+
     /**
      * Adds a box collider to the physics world
      * @param collider The collider component to add
      * @param size The size of the box
      */
     addBoxCollider(collider: ICollider, size: Vector3);
-    
+
     /**
      * Adds a capsule collider to the physics world
      * @param collider The collider component to add
@@ -562,7 +578,7 @@ export interface IPhysicsEngine {
      * @param height The height of the capsule
      */
     addCapsuleCollider(collider: ICollider, radius: number, height: number);
-    
+
     /**
      * Adds a mesh collider to the physics world
      * @param collider The collider component to add
@@ -584,34 +600,34 @@ export interface IPhysicsEngine {
      * @param rb The rigidbody to wake up
      */
     wakeup(rb: IRigidbody);
-    
+
     /**
      * Checks if a rigidbody is currently sleeping
      * @param rb The rigidbody to check
      * @returns Whether the rigidbody is sleeping or undefined if cannot be determined
      */
     isSleeping(rb: IRigidbody): boolean | undefined;
-    
+
     /**
      * Updates the physical properties of a rigidbody or collider
      * @param rb The rigidbody or collider to update
      */
     updateProperties(rb: IRigidbody | ICollider);
-    
+
     /**
      * Resets all forces acting on a rigidbody
      * @param rb The rigidbody to reset forces on
      * @param wakeup Whether to wake up the rigidbody
      */
     resetForces(rb: IRigidbody, wakeup: boolean);
-    
+
     /**
      * Resets all torques acting on a rigidbody
      * @param rb The rigidbody to reset torques on
      * @param wakeup Whether to wake up the rigidbody
      */
     resetTorques(rb: IRigidbody, wakeup: boolean);
-    
+
     /**
      * Adds a continuous force to a rigidbody
      * @param rb The rigidbody to add force to
@@ -619,7 +635,7 @@ export interface IPhysicsEngine {
      * @param wakeup Whether to wake up the rigidbody
      */
     addForce(rb: IRigidbody, vec: Vec3, wakeup: boolean);
-    
+
     /**
      * Applies an instantaneous impulse to a rigidbody
      * @param rb The rigidbody to apply impulse to
@@ -627,21 +643,21 @@ export interface IPhysicsEngine {
      * @param wakeup Whether to wake up the rigidbody
      */
     applyImpulse(rb: IRigidbody, vec: Vec3, wakeup: boolean);
-    
+
     /**
      * Gets the linear velocity of a rigidbody or the rigidbody attached to a collider
      * @param rb The rigidbody or collider to get velocity from
      * @returns The linear velocity vector or null if not available
      */
     getLinearVelocity(rb: IRigidbody | ICollider): Vec3 | null;
-    
+
     /**
      * Gets the angular velocity of a rigidbody
      * @param rb The rigidbody to get angular velocity from
      * @returns The angular velocity vector or null if not available
      */
     getAngularVelocity(rb: IRigidbody): Vec3 | null;
-    
+
     /**
      * Sets the angular velocity of a rigidbody
      * @param rb The rigidbody to set angular velocity for
@@ -649,7 +665,7 @@ export interface IPhysicsEngine {
      * @param wakeup Whether to wake up the rigidbody
      */
     setAngularVelocity(rb: IRigidbody, vec: Vec3, wakeup: boolean);
-    
+
     /**
      * Sets the linear velocity of a rigidbody
      * @param rb The rigidbody to set linear velocity for
@@ -665,13 +681,13 @@ export interface IPhysicsEngine {
      * @param rotation Whether to update the rotation
      */
     updateBody(comp: ICollider | IRigidbody, translation: boolean, rotation: boolean);
-    
+
     /**
      * Removes a physics body from the simulation
      * @param body The component whose physics body should be removed
      */
     removeBody(body: IComponent);
-    
+
     /**
      * Gets the physics body for a component
      * @param obj The collider or rigidbody component

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/webxr/controllers/XRControllerModel.ts

@@ -9,7 +9,7 @@ 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 +306,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 +314,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 => {