@needle-tools/engine 3.0.1-alpha.5 → 3.1.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.0.1-alpha.5",
+    "version": "3.1.0-alpha",
     "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.umd.cjs",
     "type": "module",

package/plugins/vite/config.js

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from 'fs';
 
+/** the codegen meta file */
 export async function loadConfig(path) {
     try {
         // First try to get the path from the config
@@ -28,6 +29,7 @@ export async function loadConfig(path) {
     }
 }
 
+/** get the needle.config.json */
 export function tryLoadProjectConfig() {
     try {
         const root = process.cwd();
@@ -45,4 +47,10 @@ export function tryLoadProjectConfig() {
     }
 
     return null;
+}
+
+
+/** "assets" -> the directory name inside the output directory to put e.g. glb files into */
+export function builtAssetsDirectory(){
+    return "assets";
 }

package/plugins/vite/copyfiles.js

@@ -1,6 +1,7 @@
 
 import { resolve, join } from 'path'
 import { existsSync, statSync, mkdirSync, readdirSync, copyFileSync, mkdir } from 'fs';
+import { builtAssetsDirectory, tryLoadProjectConfig } from './config.js';
 
 
 /** copy files on build from assets to dist */
@@ -19,7 +20,14 @@ export const needleCopyFiles = (command, config, userSettings) => {
             const baseDir = process.cwd();
             const pluginName = "needle-copy-files";
 
-            const outdirName = "dist";
+            let assetsDirName = "assets";
+            let outdirName = "dist";
+
+            const needleConfig = tryLoadProjectConfig();
+            if(needleConfig){
+                assetsDirName = needleConfig.assetsDirectory;
+            }
+
             const outDir = resolve(baseDir, outdirName);
             if (!existsSync(outDir)) {
                 mkdirSync(outDir);
@@ -36,9 +44,9 @@ export const needleCopyFiles = (command, config, userSettings) => {
             }
 
             // copy assets dir
-            const assetsDir = resolve(baseDir, 'assets');
+            const assetsDir = resolve(baseDir, assetsDirName);
             if (existsSync(assetsDir)) {
-                console.log(`[${pluginName}] - Copy assets to ${outdirName}/assets`)
+                console.log(`[${pluginName}] - Copy assets to ${outdirName}/${builtAssetsDirectory()}`)
                 const targetDir = resolve(outDir, 'assets');
                 copyRecursiveSync(assetsDir, targetDir);
             }
@@ -53,6 +61,7 @@ export const needleCopyFiles = (command, config, userSettings) => {
     }
 }
 
+
 function copyRecursiveSync(src, dest) {
     var exists = existsSync(src);
     var stats = exists && statSync(src);

package/plugins/vite/drop.js

@@ -6,6 +6,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+/** experimental, allow dropping files from Unity into the running scene */
 export const needleDrop = (command, config, userSettings) => {
     if (command === "build") return;
 

package/plugins/vite/index.js

@@ -6,6 +6,7 @@ import { needleDrop } from "./drop.js";
 import { editorConnection } from "./editor-connection.js";
 import { needleCopyFiles } from "./copyfiles.js";
 import { needleViteAlias } from "./alias.js";
+import { needleTransformCodegen } from "./transform-codegen.js";
 import { needleLicense } from "./license.js";
 
 export * from "./gzip.js";
@@ -27,6 +28,7 @@ export const needlePlugins = async (command, config, userSettings) => {
         needleReload(command, config, userSettings),
         needleBuild(command, config, userSettings),
         needleCopyFiles(command, config, userSettings),
+        needleTransformCodegen(command, config, userSettings),
         needleDrop(command, config, userSettings),
     ];
     array.push(await editorConnection(command, config, userSettings, array));

package/plugins/vite/transform-codegen.js

@@ -0,0 +1,45 @@
+import { builtAssetsDirectory, tryLoadProjectConfig } from './config.js';
+
+/** 
+ * modify the glb load path in codegen files
+ * this is necessary if the assets directory is not the default (changed by the user in needle.config.json)
+ */
+export const needleTransformCodegen = (command, config, userSettings) => {
+
+    if (config?.noCodegenTransform === true || userSettings?.noCodegenTransform === true) {
+        return;
+    }
+
+    let codegenDirectory = "src/generated";
+    const needleConfig = tryLoadProjectConfig();
+    if (needleConfig?.codegenDirectory?.length)
+        codegenDirectory = needleConfig.codegenDirectory;
+
+    let configuredAssetsDirectory = "assets";
+    if (needleConfig?.assetsDirectory?.length)
+        configuredAssetsDirectory = needleConfig.assetsDirectory;
+
+    // https://regex101.com/r/Y05z9P/1
+    // const matchCodegenFilePaths = /\"(.+)\/.+?\.(glb|gltf)/g;
+
+    return [
+        {
+            name: 'needle-transform-files',
+            apply: 'build',
+            transform(src, id) {
+                if (id.endsWith(codegenDirectory + "/gen.js")) {
+                    const assetsDir = builtAssetsDirectory();
+                    if (assetsDir !== configuredAssetsDirectory) {
+                        console.log(`[needle-transform-files] - Transform codegen paths \"${configuredAssetsDirectory}\" → \"${assetsDir}\"`)
+                        // replace codegen paths
+                        src = src.replaceAll(configuredAssetsDirectory, assetsDir);
+                        return {
+                            code: src,
+                            map: null
+                        }
+                    }
+                }
+            }
+        }
+    ];
+}

package/src/engine/api.ts

@@ -6,7 +6,7 @@ export { InstancingUtil } from "./engine_instancing";
 export * from "./engine_gameobject";
 export * from "./engine_components";
 export * from "./engine_components_internal";
-export { AssetReference } from "./engine_addressables";
+export { AssetReference, ImageReference } from "./engine_addressables";
 export { Context, FrameEvent } from "./engine_setup";
 export * from "./debug/debug";
 export { validate } from "./engine_util_decorator"

package/src/engine/codegen/register_types.js

@@ -150,6 +150,7 @@ import { TestRunner } from "../../engine-components/TestRunner";
 import { TestSimulateUserData } from "../../engine-components/TestRunner";
 import { Text } from "../../engine-components/ui/Text";
 import { TextureSheetAnimationModule } from "../../engine-components/ParticleSystemModules";
+import { TiltShiftEffect } from "../../engine-components/postprocessing/Effects/TiltShiftEffect";
 import { ToneMapping } from "../../engine-components/postprocessing/Effects/Tonemapping";
 import { TrailModule } from "../../engine-components/ParticleSystemModules";
 import { TransformData } from "../../engine-components/export/usdz/extensions/Animation";
@@ -173,7 +174,10 @@ import { WebARSessionRoot } from "../../engine-components/WebARSessionRoot";
 import { WebXR } from "../../engine-components/WebXR";
 import { WebXRAvatar } from "../../engine-components/WebXRAvatar";
 import { WebXRController } from "../../engine-components/WebXRController";
+import { WebXRImageTracking } from "../../engine-components/WebXRImageTracking";
+import { WebXRImageTrackingModel } from "../../engine-components/WebXRImageTracking";
 import { WebXRSync } from "../../engine-components/WebXRSync";
+import { WebXRTrackedImage } from "../../engine-components/WebXRImageTracking";
 import { XRFlag } from "../../engine-components/XRFlag";
 import { XRGrabModel } from "../../engine-components/WebXRGrabRendering";
 import { XRGrabRendering } from "../../engine-components/WebXRGrabRendering";
@@ -330,6 +334,7 @@ TypeStore.add("TestRunner", TestRunner);
 TypeStore.add("TestSimulateUserData", TestSimulateUserData);
 TypeStore.add("Text", Text);
 TypeStore.add("TextureSheetAnimationModule", TextureSheetAnimationModule);
+TypeStore.add("TiltShiftEffect", TiltShiftEffect);
 TypeStore.add("ToneMapping", ToneMapping);
 TypeStore.add("TrailModule", TrailModule);
 TypeStore.add("TransformData", TransformData);
@@ -353,7 +358,10 @@ TypeStore.add("WebARSessionRoot", WebARSessionRoot);
 TypeStore.add("WebXR", WebXR);
 TypeStore.add("WebXRAvatar", WebXRAvatar);
 TypeStore.add("WebXRController", WebXRController);
+TypeStore.add("WebXRImageTracking", WebXRImageTracking);
+TypeStore.add("WebXRImageTrackingModel", WebXRImageTrackingModel);
 TypeStore.add("WebXRSync", WebXRSync);
+TypeStore.add("WebXRTrackedImage", WebXRTrackedImage);
 TypeStore.add("XRFlag", XRFlag);
 TypeStore.add("XRGrabModel", XRGrabModel);
 TypeStore.add("XRGrabRendering", XRGrabRendering);

package/src/engine/engine_addressables.ts

@@ -1,8 +1,8 @@
-import { getParam, getPath } from "../engine/engine_utils";
+import { getParam, resolveUrl } from "../engine/engine_utils";
 // import { loadSync, parseSync } from "./engine_scenetools";
 import { SerializationContext, TypeSerializer } from "./engine_serialization_core";
 import { Context } from "./engine_setup";
-import { Group, Object3D, Scene } from "three";
+import { Group, Object3D, Scene, Texture } from "three";
 import { processNewScripts } from "./engine_mainloop_utils";
 import { registerPrefabProvider, syncInstantiate } from "./engine_networking_instantiate";
 import { download, hash } from "./engine_web_api";
@@ -50,7 +50,7 @@ export type ProgressCallback = (asset: AssetReference, prog: ProgressEvent) => v
 export class AssetReference {
 
     static getOrCreate(sourceId: SourceIdentifier, uri: string, context: Context): AssetReference {
-        const fullPath = getPath(sourceId, uri);
+        const fullPath = resolveUrl(sourceId, uri);
         if (debug) console.log("GetOrCreate Addressable from", sourceId, uri, "FinalPath=", fullPath);
         const addressables = context.addressables;
         const existing = addressables.findAssetReference(fullPath);
@@ -72,15 +72,16 @@ export class AssetReference {
 
     private _loading?: PromiseLike<any>;
 
+    // TODO: rename to url
     get uri(): string {
-        return this._uri;
+        return this._url;
     }
 
     get rawAsset(): any { return this._asset; }
 
     private _asset: any;
     private _glbRoot?: Object3D | null;
-    private _uri: string;
+    private _url: string;
     private _progressListeners: ProgressCallback[] = [];
 
     private _hash?: string;
@@ -90,14 +91,14 @@ export class AssetReference {
     private _rawBinary?: ArrayBuffer | null;
 
     constructor(uri: string, hash?: string) {
-        this._uri = uri;
+        this._url = uri;
         this._hash = hash;
         if (uri.includes("?v="))
             this._hashedUri = uri;
         else
             this._hashedUri = hash ? uri + "?v=" + hash : uri;
 
-        registerPrefabProvider(this._uri, this.onResolvePrefab.bind(this));
+        registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
 
     private async onResolvePrefab(uri: string): Promise<IGameObject | null> {
@@ -330,4 +331,97 @@ class AddressableSerializer extends TypeSerializer {
     }
 
 }
-new AddressableSerializer();
+new AddressableSerializer();
+
+
+
+
+
+
+export class ImageReference {
+
+    private static imageReferences = new Map<string, ImageReference>();
+
+    static getOrCreate(url: string) {
+        let ref = ImageReference.imageReferences.get(url);
+        if (!ref) {
+            ref = new ImageReference(url);
+            ImageReference.imageReferences.set(url, ref);
+        }
+        return ref;
+    }
+
+    constructor(url: string) {
+        this.url = url;
+    }
+
+    readonly url!: string;
+
+    private _bitmap?: Promise<ImageBitmap | null>;
+    private _bitmapObject?: ImageBitmap;
+
+    dispose() {
+        if (this._bitmapObject) {
+            this._bitmapObject.close();
+        }
+        this._bitmap = undefined;
+    }
+
+    createHTMLImage(): HTMLImageElement {
+        const img = new Image();
+        img.src = this.url;
+        return img;
+    }
+
+    createTexture(): Promise<Texture | null> {
+        return this.getBitmap().then((bitmap) => {
+            if (bitmap) {
+                const texture = new Texture(bitmap);
+                texture.needsUpdate = true;
+                return texture;
+            }
+            return null;
+        });
+    }
+
+    /** Loads the bitmap data of the image */
+    getBitmap(): Promise<ImageBitmap | null> {
+        if (this._bitmap) return this._bitmap;
+        this._bitmap = new Promise((res, _) => {
+            const imageElement = document.createElement("img") as HTMLImageElement;
+            imageElement.addEventListener("load", () => {
+                this._bitmap = createImageBitmap(imageElement).then((bitmap) => {
+                    this._bitmapObject = bitmap;
+                    res(bitmap);
+                    return bitmap;
+                })
+            });
+            imageElement.addEventListener("error", err => {
+                console.error("Failed to load image:" + this.url, err);
+                res(null);
+            });
+            imageElement.src = this.url;
+        });
+        return this._bitmap;
+    }
+}
+
+
+export class ImageReferenceSerializer extends TypeSerializer {
+    constructor() {
+        super([ImageReference]);
+    }
+
+    onSerialize(_data: string, _context: SerializationContext) {
+        return null;
+    }
+
+    onDeserialize(data: string, _context: SerializationContext) {
+        if (typeof data === "string") {
+            const url = resolveUrl(_context.gltfId, data)
+            return ImageReference.getOrCreate(url);
+        }
+        return undefined;
+    }
+}
+new ImageReferenceSerializer();

package/src/engine/engine_serialization.ts

@@ -1,6 +1,7 @@
 import { serializeObject, deserializeObject } from "./engine_serialization_core";
-import * as builtin from "./engine_serialization_builtin_serializer";
-// export builtin so it will be called and registered
-export { serializeObject, deserializeObject, builtin };
 
-export { serializable, serializeable } from "./engine_serialization_decorator"
+export { serializeObject, deserializeObject };
+
+export { serializable, serializeable } from "./engine_serialization_decorator"
+
+export * from "./engine_serialization_builtin_serializer";

package/src/engine/engine_serialization_builtin_serializer.ts

@@ -7,6 +7,7 @@ import { CallInfo, EventList } from "../engine-components/EventList";
 import { Color, Object3D, Texture, WebGLRenderTarget } from "three";
 import { RenderTexture } from "./engine_texture";
 import { isDevEnvironment } from "../engine/debug/debug";
+import { resolveUrl } from "./engine_utils";
 
 // export class SourcePath {
 //     src?:string
@@ -300,8 +301,8 @@ class EventListSerializer extends TypeSerializer {
         return undefined;
     }
 
-    private createEventMethod(target : object, methodName: string, args?: any) : Function | undefined {
-        
+    private createEventMethod(target: object, methodName: string, args?: any): Function | undefined {
+
         return (...forwardedArgs) => {
             const method = target[methodName];
             if (typeof method === "function") {
@@ -339,4 +340,23 @@ export class RenderTextureSerializer extends TypeSerializer {
         return undefined;
     }
 }
-new RenderTextureSerializer();
+new RenderTextureSerializer();
+
+
+export class UriSerializer extends TypeSerializer {
+    constructor() {
+        super([URL]);
+    }
+
+    onSerialize(_data: string, _context: SerializationContext) {
+        return null;
+    }
+
+    onDeserialize(data: string, _context: SerializationContext) {
+        if (typeof data === "string") {
+            return resolveUrl(_context.gltfId, data);
+        }
+        return undefined;
+    }
+}
+new UriSerializer();

package/src/engine/engine_serialization_core.ts

@@ -173,6 +173,7 @@ export class SerializationContext {
     root: THREE.Object3D;
 
     gltf?: GLTF;
+    /** the url of the glb that is currently being loaded */
     gltfId?: SourceIdentifier;
     object!: THREE.Object3D;
     target?: object;
@@ -290,16 +291,21 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
                 context.type = undefined;
                 context.path = key;
 
+                if (obj.onBeforeDeserializeMember !== undefined) {
+                    // callback to the instance, if it returns true assume it's done all the things itself
+                    if (obj.onBeforeDeserializeMember(key, data, context) === true) continue;
+                }
+
                 if (serializedEntryInfo === null) {
                     obj[key] = data;
+                    // if(typeof data === "string"){
+                    //     const serializer = helper.getSerializerForConstructor(String);
+                    //     const res = serializer?.onDeserialize(data, context);
+                    //     if(res !== undefined) obj[key] = res;
+                    // }
                 }
                 else {
 
-                    if (obj.onBeforeDeserializeMember !== undefined) {
-                        // callback to the instance, if it returns true assume it's done all the things itself
-                        if (obj.onBeforeDeserializeMember(key, data, context) === true) continue;
-                    }
-
                     if (Array.isArray(serializedEntryInfo)) {
                         for (let i = 0; i < serializedEntryInfo.length; i++) {
                             const typeInfoOrConstructor = serializedEntryInfo[i];
@@ -314,24 +320,25 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
                         obj[key] = tryResolve(serializedEntryInfo);
                     }
 
-                    function tryResolve(typeInfoOrConstructor) {
-                        const typeInformationOrConstructor = typeInfoOrConstructor as ITypeInformation;
-                        // if the entry does specify an object of type ITypeInformation and has the type field set
-                        const type = typeInformationOrConstructor.type;
-                        if (type) {
-                            return deserializeObjectWithType(data, type, context, undefined, obj[key]);
-                        }
-                        // it can also just contain a constructor
-                        else {
-                            const constructor = typeInfoOrConstructor as Constructor<any>;
-                            return deserializeObjectWithType(data, constructor, context, undefined, obj[key]);
-                        }
-                    }
 
                     buffer.length = 0;
+                }
+
+                if (obj.onAfterDeserializeMember !== undefined) {
+                    obj.onAfterDeserializeMember(key, data, context);
+                }
 
-                    if (obj.onAfterDeserializeMember !== undefined) {
-                        obj.onAfterDeserializeMember(key, data, context);
+                function tryResolve(typeInfoOrConstructor) {
+                    const typeInformationOrConstructor = typeInfoOrConstructor as ITypeInformation;
+                    // if the entry does specify an object of type ITypeInformation and has the type field set
+                    const type = typeInformationOrConstructor.type;
+                    if (type) {
+                        return deserializeObjectWithType(data, type, context, undefined, obj[key]);
+                    }
+                    // it can also just contain a constructor
+                    else {
+                        const constructor = typeInfoOrConstructor as Constructor<any>;
+                        return deserializeObjectWithType(data, constructor, context, undefined, obj[key]);
                     }
                 }
             }

package/src/engine/engine_utils.ts

@@ -203,30 +203,51 @@ export function delay(milliseconds: number): Promise<void> {
     });
 }
 
-// if a timeline is exported via menu item the audio clip path is relative to the glb (same folder)
+// 1) if a timeline is exported via menu item the audio clip path is relative to the glb (same folder)
 // we need to detect that here and build the new audio source path relative to the new glb location
 // the same is/might be true for any file that is/will be exported via menu item
-const debugGetPath = getParam("debugsourcepath");
-export function getPath(source: SourceIdentifier | undefined, uri: string): string {
-    if (source === undefined) {
-        if (debugGetPath) console.warn("getPath: source is undefined, returning uri", uri);
+// 2) if the needle.config assetDirectory is modified (from e.g. /assets to /needle/assets) when building a distributable our vite transform and copy plugin will move the files to dist/assets hence we cannot use project-relative paths (because the path changes). What we do instead if make all paths serialized in a glb relative to the glb. The rel: prefix is used to detect urls that need to be resolved.
+const debugGetPath = getParam("debugresolveurl");
+
+export const relativePathPrefix = "rel:";
+
+/** @deprecated use resolveUrl instead */
+export function getPath(source:SourceIdentifier|undefined, uri:string) : string {
+    return resolveUrl(source, uri);
+}
+/**
+ * Use to resolve a url serialized in a glTF file
+ * @param source The uri of the loading file
+ * @param uri The uri of the file to resolve, can be absolute or relative
+ * @returns The resolved uri
+ */
+export function resolveUrl(source: SourceIdentifier | undefined, uri: string): string {
+    if (uri === undefined) {
+        if (debugGetPath) console.warn("getPath: uri is undefined, returning uri", uri);
+        return uri;
+    }
+    if(uri.startsWith("./")) {
         return uri;
     }
     if (uri.startsWith("http")) {
         if (debugGetPath) console.warn("getPath: uri is absolute, returning uri", uri);
         return uri;
     }
+    if (source === undefined) {
+        if (debugGetPath) console.warn("getPath: source is undefined, returning uri", uri);
+        return uri;
+    }
+    if(uri.startsWith(relativePathPrefix)){
+        uri = uri.substring(4);
+    }
     const pathIndex = source.lastIndexOf("/");
     if (pathIndex >= 0) {
-        let newUri = source.substring(0, pathIndex + 1);
-
-        const uriDirectoryIndex = uri.lastIndexOf("/");
-        if (uriDirectoryIndex >= 0) {
-            newUri += uri.substring(uriDirectoryIndex + 1);
-        } else {
-            newUri += uri;
-        }
-        if (debugGetPath) console.log("getPath:", source, " - changed uri from\n", uri, "\n→ ", newUri);
+        // Take the source uri as the base path
+        const basePath = source.substring(0, pathIndex + 1);
+        // Append the relative uri
+        let newUri = basePath + uri;
+        // newUri = new URL(newUri, globalThis.location.href).href;
+        if (debugGetPath) console.log("source:", source, "- changed uri \nfrom", uri, "\n→ ", newUri, "\n" + basePath);
         return newUri;
     }
     return uri;

package/src/engine/extensions/NEEDLE_animator_controller_model.ts

@@ -32,6 +32,7 @@ export declare type StateMachine = {
 export declare type State = {
     name: string,
     hash: number;
+    speed?: number;
     motion: Motion,
     transitions: Transition[],
     behaviours: StateMachineBehaviourModel[],

package/src/engine/extensions/NEEDLE_progressive.ts

@@ -3,7 +3,7 @@ import { GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/j
 import { SourceIdentifier } from "../engine_types";
 import { Context } from "../engine_setup";
 import { addDracoAndKTX2Loaders } from "../engine_loaders";
-import { delay, getParam, getPath } from "../engine_utils";
+import { delay, getParam, resolveUrl } from "../engine_utils";
 
 export const EXTENSION_NAME = "NEEDLE_progressive";
 
@@ -130,7 +130,7 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
         if (progressiveInfo) {
             if (debug)
                 console.log(key, progressiveInfo.uri, progressiveInfo.guid);
-            const uri = getPath(source, progressiveInfo.uri);
+            const uri = resolveUrl(source, progressiveInfo.uri);
             if (uri.endsWith(".glb") || uri.endsWith(".gltf")) {
                 if (!progressiveInfo.guid) {
                     console.warn("missing pointer for glb/gltf texture", progressiveInfo);

package/src/engine-components/AnimatorController.ts

@@ -249,9 +249,16 @@ export class AnimatorController {
 
             if (action) {
                 const dur = state.motion.clip!.duration;
-                const normalizedTime = dur <= 0 ? 1 : action.time / dur;
-                const makeTransition = transition.hasExitTime ? normalizedTime >= transition.exitTime : true;
-                // console.log(state.name, makeTransition, transition.hasExitTime, normalizedTime, transition.exitTime)
+                const normalizedTime = dur <= 0 ? 1 : Math.abs(action.time / dur);
+                let makeTransition = false;
+                if (transition.hasExitTime) {
+                    if (action.timeScale > 0) makeTransition = normalizedTime >= transition.exitTime;
+                    // When the animation is playing backwards we need to check exit time inverted
+                    else if(action.timeScale < 0) makeTransition = 1 - normalizedTime >= transition.exitTime;
+                }
+                else {
+                    makeTransition = true;
+                }
                 if (makeTransition) {
                     // if (transition.hasExitTime && transition.exitTime >= .9999) 
                     action.clampWhenFinished = true;
@@ -283,6 +290,12 @@ export class AnimatorController {
                 action.time = 0;
                 action.play();
             }
+            else if (action.time <= 0 && action.timeScale < 0) {
+                didTriggerLooping = true;
+                action.reset();
+                action.time = action.getClip().duration;
+                action.play();
+            }
         }
 
         // call update state behaviours:
@@ -367,9 +380,11 @@ export class AnimatorController {
                 action.stop();
             action.reset();
             action.timeScale = this._speed;
+            if (state.speed !== undefined) action.timeScale *= state.speed;
             action.enabled = true;
             const duration = state.motion.clip!.duration;
             action.time = offsetNormalized * duration;
+            if(action.timeScale < 0) action.time = duration - action.time;
             action.clampWhenFinished = true;
             action.setLoop(LoopOnce, 0);
             if (durationInSec > 0)

package/src/engine-components/AudioSource.ts

@@ -82,7 +82,7 @@ export class AudioSource extends Behaviour {
         document.addEventListener('touchstart', fn);
     }
 
-    @serializable()
+    @serializable(URL)
     clip: string = "";
 
     @serializable()
@@ -202,7 +202,7 @@ export class AudioSource extends Behaviour {
                 }
                 break;
             case "visible":
-                console.log("visible", this.enabled, this.playOnAwake, !this.isPlaying, AudioSource._userInteractionRegistered, this.wasPlaying);
+                if (debug) console.log("visible", this.enabled, this.playOnAwake, !this.isPlaying, AudioSource._userInteractionRegistered, this.wasPlaying);
                 if (this.enabled && this.playOnAwake && !this.isPlaying && AudioSource._userInteractionRegistered && this.wasPlaying) {
                     this.play();
                 }

package/src/engine-components/Component.ts

@@ -9,6 +9,7 @@ import { syncDestroy, syncInstantiate } from "../engine/engine_networking_instan
 import { ConstructorConcrete, SourceIdentifier, IComponent, IGameObject, Constructor, GuidsMap, UIDProvider, Collision, ICollider } from "../engine/engine_types";
 import { addNewComponent, destroyComponentInstance, findObjectOfType, findObjectsOfType, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, moveComponentInstance, removeComponent } from "../engine/engine_components";
 import { findByGuid, destroy, InstantiateOptions, instantiate, HideFlags, foreachComponent, markAsInstancedRendered, isActiveInHierarchy, isActiveSelf, isUsingInstancing, setActive, isDestroyed } from "../engine/engine_gameobject";
+import { resolveUrl } from "../engine/engine_utils";
 
 
 // export interface ISerializationCallbackReceiver {
@@ -641,7 +642,6 @@ class Component implements IComponent, EventTarget {
 
         return false;
     }
-
 }
 
 class Behaviour extends Component {