Needle Engine 3.2.0-alpha

Files changed (25) hide show

src/engine/codegen/register_types.js +2 -0
src/engine-components/AudioSource.ts +6 -3
src/engine-components/Camera.ts +1 -1
src/engine-components/Component.ts +0 -1
src/engine-components/codegen/components.ts +1 -0
src/engine/debug/debug_overlay.ts +1 -0
src/engine/engine_context_registry.ts +3 -0
src/engine/engine_gltf_builtin_components.ts +3 -0
src/engine/engine_license.ts +1 -1
src/engine/engine_lightdata.ts +1 -1
src/engine/engine_networking_auto.ts +13 -6
src/engine/engine_rendererdata.ts +35 -16
src/engine/engine_serialization_builtin_serializer.ts +10 -1
src/engine/extensions/extensions.ts +6 -0
src/engine/extensions/NEEDLE_lighting_settings.ts +15 -13
src/engine/extensions/NEEDLE_lightmaps.ts +3 -2
src/engine/extensions/NEEDLE_progressive.ts +9 -3
src/engine-components/timeline/PlayableDirector.ts +0 -1
src/engine-components/Renderer.ts +69 -20
src/engine-components/RendererLightmap.ts +7 -11
src/engine-components/ScreenCapture.ts +1 -0
src/engine-components/timeline/TimelineTracks.ts +9 -3
src/engine-components/VideoPlayer.ts +16 -11
src/engine-components/XRFlag.ts +3 -0
src/engine-components/SceneSwitcher.ts +224 -0

src/engine/codegen/register_types.js CHANGED Viewed

@@ -119,6 +119,7 @@
 import { Rigidbody } from "../../engine-components/RigidBody";
 import { RotationBySpeedModule } from "../../engine-components/ParticleSystemModules";
 import { RotationOverLifetimeModule } from "../../engine-components/ParticleSystemModules";
+import { SceneSwitcher } from "../../engine-components/SceneSwitcher";
 import { ScreenCapture } from "../../engine-components/ScreenCapture";
 import { ScreenSpaceAmbientOcclusion } from "../../engine-components/postprocessing/Effects/ScreenspaceAmbientOcclusion";
 import { ShadowCatcher } from "../../engine-components/ShadowCatcher";
@@ -303,6 +304,7 @@
 TypeStore.add("Rigidbody", Rigidbody);
 TypeStore.add("RotationBySpeedModule", RotationBySpeedModule);
 TypeStore.add("RotationOverLifetimeModule", RotationOverLifetimeModule);
+TypeStore.add("SceneSwitcher", SceneSwitcher);
 TypeStore.add("ScreenCapture", ScreenCapture);
 TypeStore.add("ScreenSpaceAmbientOcclusion", ScreenSpaceAmbientOcclusion);
 TypeStore.add("ShadowCatcher", ShadowCatcher);

src/engine-components/AudioSource.ts CHANGED Viewed

@@ -143,6 +143,7 @@
     @serializable()
     rollOffMode: AudioRolloffMode = 0;
+    playInBackground: boolean = true;
     private _loop: boolean = false;
     private sound: THREE.PositionalAudio | null = null;
@@ -196,9 +197,11 @@
     private onVisibilityChanged = () => {
         switch (document.visibilityState) {
             case "hidden":
-                this.wasPlaying = this.isPlaying;
-                if (this.isPlaying) {
-                    this.pause();
+                if (this.playInBackground === false) {
+                    this.wasPlaying = this.isPlaying;
+                    if (this.isPlaying) {
+                        this.pause();
+                    }
                 }
                 break;
             case "visible":

src/engine-components/Camera.ts CHANGED Viewed

@@ -390,7 +390,7 @@
     enable() {
         this._skybox = this.context.lightmaps.tryGetSkybox(this._camera.sourceId) as THREE.Texture;
         if (!this._skybox) {
-            console.warn("Failed to load/find skybox texture", this);
+            console.warn("Failed to load/find skybox texture", this._camera.sourceId, this.context.lightmaps);
         }
         else if (this.context.scene.background !== this._skybox) {
             if (debug)

src/engine-components/Component.ts CHANGED Viewed

@@ -9,7 +9,6 @@
 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 {

src/engine-components/codegen/components.ts CHANGED Viewed

@@ -114,6 +114,7 @@
 export { Rigidbody } from "../RigidBody";
 export { RotationBySpeedModule } from "../ParticleSystemModules";
 export { RotationOverLifetimeModule } from "../ParticleSystemModules";
+export { SceneSwitcher } from "../SceneSwitcher";
 export { ScreenCapture } from "../ScreenCapture";
 export { ScreenSpaceAmbientOcclusion } from "../postprocessing/Effects/ScreenspaceAmbientOcclusion";
 export { ShadowCatcher } from "../ShadowCatcher";

src/engine/debug/debug_overlay.ts CHANGED Viewed

@@ -24,6 +24,7 @@
 export function makeErrorsVisibleForDevelopment() {
     if (hide) return;
     const isLocal = isLocalNetwork();
+    if(debug) console.log("Is this a local network?", isLocal);
     if (isLocal) {
         if (debug)
             console.log(window.location.hostname);

src/engine/engine_context_registry.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { IContext } from "./engine_types";
 export enum ContextEvent {
+    /** called when the context is registered to the registry, the context is not fully initialized at this point */
+    ContextRegistered = "ContextRegistered",
     ContextCreated = "ContextCreated",
     ContextDestroyed = "ContextDestroyed",
     MissingCamera = "MissingCamera",
@@ -26,6 +28,7 @@
     static register(ctx: IContext) {
         this.Registered.push(ctx);
+        this.dispatchCallback(ContextEvent.ContextRegistered, ctx);
     }
     static unregister(ctx: IContext) {

src/engine/engine_gltf_builtin_components.ts CHANGED Viewed

@@ -50,6 +50,9 @@
         idProvider = new InstantiateIdProvider(seed as number);
     }
+    const idEnd = gltfId.indexOf("?");
+    gltfId = idEnd === -1 ? gltfId : gltfId.substring(0, idEnd);
     const serializationContext = new SerializationContext(gltf.scene);
     serializationContext.gltfId = gltfId;
     serializationContext.context = context;

src/engine/engine_license.ts CHANGED Viewed

@@ -14,7 +14,7 @@
 }
-ContextRegistry.registerCallback(ContextEvent.ContextCreated, evt => {
+ContextRegistry.registerCallback(ContextEvent.ContextRegistered, evt => {
     showLicenseInfo(evt.context);
 });

src/engine/engine_lightdata.ts CHANGED Viewed

@@ -33,7 +33,7 @@
     }
     registerTexture(sourceId: SourceIdentifier, type: LightmapType, tex: Texture, index: number) {
-        if (debugLightmap) console.log("Registering ", LightmapType[type], tex, sourceId);
+        if (debugLightmap) console.log("Registering ", LightmapType[type] + " \"" + sourceId + "\"", tex);
         if (!this._lightmaps.has(sourceId))
             this._lightmaps.set(sourceId, new Map());
         const map = this._lightmaps.get(sourceId);

src/engine/engine_networking_auto.ts CHANGED Viewed

@@ -200,22 +200,29 @@
     onPropertyChanged: Function,
 };
+export declare type FieldChangedCallbackFn = (newValue: any, previousValue: any) => void | boolean;
 /**
  * Decorate a field to be automatically networked synced
- * @param onFieldChanged name of a callback function that will be called when the field is changed.
- * This function may return false to prevent notifyChanged from being called
+ * @param onFieldChanged name of a callback function that will be called when the field is changed.
+ * You can also pass in a function like so: syncField(myClass.prototype.myFunctionToBeCalled)
+ * This function may return false to prevent notifyChanged from being called
  * (for example a networked color is sent as a number and may be converted to a color in the receiver again)
- *
  * Parameters: (newValue, previousValue)
- * @returns
  */
-export const syncField = function (onFieldChanged?: string) {
+export const syncField = function(onFieldChanged: string | FieldChangedCallbackFn) {
     return function (target: any, propertyKey: string) {
         let syncer: ComponentPropertiesSyncer | null = null;
-        const fn = onFieldChanged ? target[onFieldChanged] : undefined;
+        let fn: Function | undefined = undefined;
+        if (typeof onFieldChanged === "string")
+            fn = target[onFieldChanged];
+        else if (typeof onFieldChanged === "function") {
+            fn = onFieldChanged;
+        }
         const t = target;
         const internalAwake = t.__internalAwake;
         if (debug)

src/engine/engine_rendererdata.ts CHANGED Viewed

@@ -36,7 +36,8 @@
         this.context.pre_update_callbacks.push(this.preUpdate.bind(this))
     }
-    private sceneLightSettings?: SceneLightSettings;
+    private _currentReflectionId?: SourceIdentifier;
+    private sceneLightSettings?: Map<SourceIdentifier, SceneLightSettings>;
     private preUpdate() {
         const time = this.context.time;
@@ -53,14 +54,26 @@
     get environmentIntensity(): number {
         if (!this.sceneLightSettings) return 1;
-        return this.sceneLightSettings.ambientIntensity;// * Math.PI * .5;
+        if (!this._currentReflectionId) return 1;
+        const settings = this.sceneLightSettings.get(this._currentReflectionId);
+        if(settings)
+            return settings.ambientIntensity;// * Math.PI * .5;
+        return 1;
     }
     registerSceneLightSettings(sceneLightSettings: SceneLightSettings) {
-        this.sceneLightSettings = sceneLightSettings;
+        const sourceId = sceneLightSettings.sourceId;
+        if(!sourceId){
+            console.error("Missing source id for scene light settings, can not register:", sceneLightSettings);
+            return;
+        }
+        if (debug) console.log("Register lighting settings", sceneLightSettings?.sourceId, sceneLightSettings);
+        if (!this.sceneLightSettings) this.sceneLightSettings = new Map();
+        this.sceneLightSettings.set(sourceId, sceneLightSettings);
     }
     registerReflection(sourceId: SourceIdentifier, reflectionTexture: Texture) {
+        if (debug) console.log("Register reflection", sourceId, reflectionTexture);
         const h = new LightData(this.context, reflectionTexture, 1);
         this._lighting[sourceId] = h;
     }
@@ -70,16 +83,21 @@
     }
     enableReflection(sourceId: SourceIdentifier) {
+        const previousId = this._currentReflectionId;
+        this._currentReflectionId = sourceId;
+        const settings = this.sceneLightSettings?.get(sourceId);
         if (debug) {
-            console.log(this.sceneLightSettings ? AmbientMode[this.sceneLightSettings.ambientMode] : "Unknown ambient mode");
+            console.log("Enable reflection", sourceId, settings ? AmbientMode[settings.ambientMode] : "Unknown ambient mode");
         }
-        switch (this.sceneLightSettings?.ambientMode) {
+        switch (settings?.ambientMode) {
             case AmbientMode.Skybox:
             case AmbientMode.Custom:
                 // only set environment reflection when ambient mode is skybox or custom
                 const existing = this.getReflection(sourceId);
                 if (existing && existing.Source) {
+                    if (debug) console.log("Setting environment reflection", existing.Source);
                     const scene = this.context.scene;
                     const tex = existing.Source;
                     tex.encoding = sRGBEncoding;
@@ -87,29 +105,30 @@
                     scene.environment = tex;
                     return;
                 }
+                else if (debug) console.warn("Could not find reflection for source", sourceId);
                 break;
         }
-        if (this.sceneLightSettings?.environmentReflectionSource === DefaultReflectionMode.Custom) {
-            switch (this.sceneLightSettings?.ambientMode) {
+        if (settings?.environmentReflectionSource === DefaultReflectionMode.Custom) {
+            switch (settings?.ambientMode) {
                 case AmbientMode.Trilight:
-                    if (this.sceneLightSettings.ambientTrilight) {
-                        const colors = this.sceneLightSettings.ambientTrilight;
+                    if (settings.ambientTrilight) {
+                        const colors = settings.ambientTrilight;
                         const tex = createTrilightTexture(colors[0], colors[1], colors[2], 64, 64);
                         tex.encoding = sRGBEncoding;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
                     }
-                    else console.error("Missing ambient trilight", this.sceneLightSettings.sourceId);
+                    else console.error("Missing ambient trilight", settings.sourceId);
                     return;
                 case AmbientMode.Flat:
-                    if (this.sceneLightSettings.ambientLight) {
-                        const tex = createFlatTexture(this.sceneLightSettings.ambientLight, 64);
+                    if (settings.ambientLight) {
+                        const tex = createFlatTexture(settings.ambientLight, 64);
                         tex.encoding = sRGBEncoding;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
                     }
-                    else console.error("Missing ambientlight", this.sceneLightSettings.sourceId);
+                    else console.error("Missing ambientlight", settings.sourceId);
                     return;
                 default:
                     return;
@@ -124,7 +143,7 @@
     async getSceneLightingData(sourceId: SourceIdentifier): Promise<SphericalHarmonicsData> {
         if (debug)
-            console.log("GET SCENE LIGHT DATA");
+            console.log("GET SCENE LIGHT DATA", sourceId);
         // const existing = this.getReflection(sourceId);
         // const sh = existing?.getSphericalHarmonicsArray(this.sceneLightSettings?.ambientIntensity ?? 1);
@@ -140,7 +159,7 @@
                 const ex = this.getReflection(sourceId);
                 if (ex) {
                     clearInterval(interval);
-                    res(ex.getSphericalHarmonicsArray(this.sceneLightSettings?.ambientIntensity ?? 1)!);
+                    res(ex.getSphericalHarmonicsArray(this.environmentIntensity ?? 1)!);
                 }
             }, 10);
         });
@@ -181,7 +200,7 @@
             const reflection = this._source;
             let rt: THREE.WebGLCubeRenderTarget | null = null;
             if (reflection) {
-                if (debug) console.log("GENERATING LIGHT PROBE", reflection);
+                if (debug) console.log("GENERATING LIGHT PROBE", reflection, this.Source);
                 const size = Math.min(reflection.image.width, 512);
                 const target = new WebGLCubeRenderTarget(size);
                 rt = target.fromEquirectangularTexture(this._context.renderer, reflection);

src/engine/engine_serialization_builtin_serializer.ts CHANGED Viewed

@@ -240,7 +240,16 @@
                     }
                     const hasMethod = call.method?.length > 0;
                     if (target && hasMethod) {
-                        const printWarningMethodNotFound = () => console.warn(`Could not find method ${call.method} on object ${target.name}`, target, typeof target[call.method]);
+                        const printWarningMethodNotFound = () => {
+                            const uppercaseMethodName = call.method[0].toLowerCase() + call.method.slice(1);
+                            if (typeof target[uppercaseMethodName] === "function") {
+                                console.warn(`Could not find method ${call.method} on object ${target.name}. Please rename ${call.method} to ${uppercaseMethodName}?`, target, typeof target[call.method]);
+                                return;
+                            }
+                            else {
+                                console.warn(`Could not find method ${call.method} on object ${target.name}`, target, typeof target[call.method]);
+                            }
+                        }
                         const method = target[call.method];
                         if (typeof method !== "function") {
                             let foundMethod = false;

src/engine/extensions/extensions.ts CHANGED Viewed

@@ -51,6 +51,12 @@
 }
 export function registerExtensions(loader: GLTFLoader, context: Context, sourceId: SourceIdentifier) {
+    // Make sure to remove any url parameters from the sourceId (because the source id in the renderer does not have a ?v=xxx so it will not be able to register the resolved lightmap otherwise)
+    const idEnd = sourceId.lastIndexOf("?");
+    if (idEnd >= 0) sourceId = sourceId.substring(0, idEnd);
     loader.register(p => new NEEDLE_gameobject_data(p));
     loader.register(p => new NEEDLE_persistent_assets(p));
     loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, sourceId));

src/engine/extensions/NEEDLE_lighting_settings.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AmbientLight, Color, HemisphereLight } from "three";
+import { AmbientLight, Color, HemisphereLight, Object3D } from "three";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
 import { SourceIdentifier } from "../engine_types";
 import { Behaviour, GameObject } from "../../engine-components/Component";
@@ -42,9 +42,12 @@
             const ext: LightingSettings = extensions[EXTENSION_NAME];
             if (ext) {
                 if (debug)
-                    console.log(ext);
+                    console.log("Apply \"" + this.name + "\", src: \"" + this.sourceId + "\"", ext);
                 // add a component to the root of the scene
-                const settings = GameObject.addNewComponent(_result.scene, SceneLightSettings, false);
+                const lightSettings = new Object3D();
+                lightSettings.name = "Needle LightSettings";
+                _result.scene.add(lightSettings);
+                const settings = GameObject.addNewComponent(lightSettings, SceneLightSettings, false);
                 settings.sourceId = this.sourceId;
                 settings.ambientIntensity = ext.ambientIntensity;
                 settings.ambientLight = new Color().fromArray(ext.ambientLight);
@@ -98,12 +101,11 @@
     onEnable() {
         const isActive = this.context.mainCameraComponent?.sourceId === this.sourceId;
-        if (debug)
-            console.log("Enable scene lighting", this.sourceId, isActive, this, this.context.mainCameraComponent?.sourceId);
+        if (debug) console.log("Enable scene lighting", this.sourceId, isActive, this, this.context.mainCameraComponent?.sourceId);
         if (!isActive) {
-            if(debug) console.warn("This is no active?!", this.context.mainCameraComponent?.sourceId)
-            // this.enabled = false;
-            // return;
+            if(debug) console.warn("This environment light is not active??!", this.context.mainCameraComponent?.sourceId)
+            this.enabled = false;
+            return;
         }
         if (this.ambientMode == AmbientMode.Flat) {
             if (this.ambientLight && !this._ambientLightObj) {
@@ -130,19 +132,19 @@
             if (!this._lightProbeObj) {
                 if (this.sourceId) {
                     this.context.rendererData.getSceneLightingData(this.sourceId).then(data => {
-                        if (debug)
-                            console.log(data);
                         if (!data) return;
                         this._lightProbeObj = data.lightProbe;
                         if (this.enabled && !this.destroyed && this._lightProbeObj) {
-                            this.scene.add(this._lightProbeObj);
+                            if (debug)
+                                console.log("Add", this.sourceId, data);
+                            this.gameObject.add(this._lightProbeObj);
                         }
                     });
                 }
             }
             else {
                 if (this.enabled && this.destroyed && this._lightProbeObj) {
-                    this.scene.add(this._lightProbeObj);
+                    this.gameObject.add(this._lightProbeObj);
                 }
             }
         }
@@ -154,7 +156,7 @@
     onDisable() {
         if (debug)
-            console.log("disable", this.sourceId, this);
+            console.log("Disable envlight:", this.sourceId, this);
         if (this._lightProbeObj) this._lightProbeObj.removeFromParent();
         if(this._ambientLightObj) this._ambientLightObj.removeFromParent();
         if (this.sourceId)

src/engine/extensions/NEEDLE_lightmaps.ts CHANGED Viewed

@@ -58,6 +58,7 @@
                     console.log(ext);
                 return new Promise(async (res, _rej) => {
                     const dependencies: Array<Promise<any>> = [];
                     for (const entry of arr) {
                         if (entry.pointer) {
@@ -70,10 +71,10 @@
                                         // TODO this is most likely wrong for floating point textures
                                         if (entry.type !== LightmapType.Lightmap)
                                             tex.encoding = sRGBEncoding;
-                                        else
+                                        else
                                             tex.encoding = LinearEncoding;
                                         // Dont flip skybox textures anymore - previously we exported them flipped when baking in Unity but now we allow to pass through export without re-baking exisitng skybox textures if they use default values. So we expect textures to be NOT flipped anymore
                                         // if (entry.type === LightmapType.Skybox) {
                                         //     if (tex.type == FloatType || tex.type == HalfFloatType)

src/engine/extensions/NEEDLE_progressive.ts CHANGED Viewed

@@ -138,10 +138,16 @@
                 }
                 const resolveKey = uri + "_" + progressiveInfo.guid;
                 if (this.resolved[resolveKey]) {
-                    if (debug) console.log("Texture has already been loaded: " + resolveKey, material.name, slot, current.name);
                     let res = this.resolved[resolveKey];
-                    res = this.copySettings(current, res);
-                    return res;
+                    // check if the texture has been disposed or not
+                    if (res.image && res.image.data) {
+                        if (debug) console.log("Texture has already been loaded: " + resolveKey, material.name, slot, current.name, res);
+                        res = this.copySettings(current, res);
+                        return res;
+                    }
+                    else if (res) {
+                        if(debug) console.log("Texture has been disposed, will load again: " + resolveKey, material.name, slot, current.name, res);
+                    }
                 }
                 const info = this.onProgressiveLoadStart(context, source, uri, material, slot);

src/engine-components/timeline/PlayableDirector.ts CHANGED Viewed

@@ -452,7 +452,6 @@
                         const anim = GameObject.getOrAddComponent(binding, Animator);
                         if(anim) binding = anim;
                     }
-                    if (typeof binding.enabled === "boolean") binding.enabled = false;
                     const animationClips = binding?.gameObject?.animations;
                     if (animationClips) {
                         const handler = new Tracks.AnimationTrackHandler();

src/engine-components/Renderer.ts CHANGED Viewed

@@ -59,6 +59,18 @@
     private _indexMapMaxIndex?: number;
     private _indexMap?: Map<number, number>;
+    private _changed: boolean = false;
+    get changed(): boolean {
+        return this._changed;
+    }
+    set changed(value: boolean) {
+        if (value === true) {
+            if (debugRenderer)
+                console.warn("SharedMaterials have changed: " + this._renderer.name, this);
+        }
+        this._changed = value;
+    }
     is(renderer: Renderer) {
         return this._renderer === renderer;
     }
@@ -131,7 +143,12 @@
                 if (typeof key === "string")
                     setMaterial(value, Number.parseInt(key));
                 // console.log(target, key, value);
-                return Reflect.set(target, key, value);
+                if (Reflect.set(target, key, value)) {
+                    if (value instanceof Material)
+                        target.changed = true;
+                    return true;
+                }
+                return false;
             }
         });
     }
@@ -141,6 +158,13 @@
         return this._targets.length;
     }
+    // iterator to support: for(const mat of sharedMaterials)
+    *[Symbol.iterator]() {
+        for (let i = 0; i < this.length; i++) {
+            yield this.getMaterial(i);
+        }
+    }
     private resolveIndex(index: number): number {
         const map = this._indexMap;
         // if we have a index map it means that some materials were missing
@@ -157,6 +181,7 @@
         const target = this._targets[index];
         if (!target || target["material"] === undefined) return;
         target["material"] = mat;
+        this.changed = true;
     }
     private getMaterial(index: number) {
@@ -231,7 +256,10 @@
     }
     set sharedMaterial(mat: THREE.Material) {
+        const cur = this.sharedMaterials[0];
+        if (cur === mat) return;
         this.sharedMaterials[0] = mat;
+        this.applyLightmapping();
     }
     /**@deprecated please use sharedMaterial */
@@ -241,7 +269,7 @@
     /**@deprecated please use sharedMaterial */
     set material(mat: THREE.Material) {
-        this.sharedMaterials[0] = mat;
+        this.sharedMaterial = mat;
     }
     private _sharedMaterials!: SharedMaterialArray;
@@ -323,7 +351,6 @@
         this._reflectionProbe = null;
-        const type = this.gameObject.type;
         if (this.isMultiMaterialObject(this.gameObject)) {
             for (const child of this.gameObject.children) {
                 this.context.addBeforeRenderListener(child, this.onBeforeRenderThree.bind(this));
@@ -359,20 +386,39 @@
             this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree.bind(this));
         }
+        this.applyLightmapping();
+        if (showWireframe) {
+            for (let i = 0; i < this.sharedMaterials.length; i++) {
+                const mat: any = this.sharedMaterials[i];
+                if (mat) {
+                    mat.wireframe = true;
+                }
+            }
+        }
+    }
+    private applyLightmapping() {
         if (this.lightmapIndex >= 0) {
+            const type = this.gameObject.type;
             // use the override lightmap if its not undefined
             const tex = this._lightmapTextureOverride !== undefined
                 ? this._lightmapTextureOverride
                 : this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
             if (tex) {
-                // tex.encoding = THREE.LinearEncoding;
-                this._lightmaps = [];
+                if (!this._lightmaps)
+                    this._lightmaps = [];
                 if (type === "Mesh") {
                     const mat = this.gameObject["material"];
                     if (!mat?.isMeshBasicMaterial) {
-                        const rm = new RendererLightmap(this.gameObject, this.context);// GameObject.addNewComponent(this.gameObject, RendererLightmap);
-                        this._lightmaps.push(rm);
+                        if (this._lightmaps.length <= 0) {
+                            const rm = new RendererLightmap(this.gameObject, this.context);
+                            this._lightmaps.push(rm);
+                        }
+                        const rm = this._lightmaps[0];
                         rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex, debugLightmap);
                     }
                     else {
@@ -383,10 +429,16 @@
                 // for multi materials we need to loop through children
                 // and then we add a lightmap renderer component to each of them
                 else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
-                    for (const child of this.gameObject.children) {
+                    for (let i = 0; i < this.gameObject.children.length; i++) {
+                        const child = this.gameObject.children[i];
                         if (!child["material"]?.isMeshBasicMaterial) {
-                            const rm = new RendererLightmap(child as GameObject, this.context);
-                            this._lightmaps.push(rm);
+                            let rm: RendererLightmap | undefined = undefined;
+                            if (i >= this._lightmaps.length) {
+                                rm = new RendererLightmap(child as GameObject, this.context);
+                                this._lightmaps.push(rm);
+                            }
+                            else
+                                rm = this._lightmaps[i];
                             rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex, debugLightmap);
                             // onBeforeRender is not called when the renderer is on a group
                             // this is an issue we probably also need to handle for custom shaders
@@ -396,16 +448,8 @@
                     }
                 }
             }
-        }
-        if (showWireframe) {
-            for (let i = 0; i < this.sharedMaterials.length; i++) {
-                const mat: any = this.sharedMaterials[i];
-                if (mat) {
-                    mat.wireframe = true;
-                }
+            else {
+                if (debug) console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
             }
         }
@@ -518,6 +562,11 @@
         else {
             this.applySettings(this.gameObject);
         }
+        if (this.sharedMaterials.changed) {
+            this.sharedMaterials.changed = false;
+            this.applyLightmapping();
+        }
         if (this.handles?.length) {
             // if (this.name === "Darbouka")

src/engine-components/RendererLightmap.ts CHANGED Viewed

@@ -14,7 +14,7 @@
     set lightmap(tex: Texture | null) {
         if (tex !== this.lightmapTexture) {
             this.lightmapTexture = tex;
-            this.setupLightmap();
+            this.applyLightmap();
         }
     }
@@ -27,8 +27,6 @@
     private lightmapScaleOffsetUniform = { value: new THREE.Vector4(1, 1, 0, 0) };
     private lightmapUniform: { value: THREE.Texture | null } = { value: null };
-    private beforeRenderCallback?: OnBeforeRenderCallback;
     constructor(gameObject: GameObject, context: Context) {
         this.gameObject = gameObject;
         this.context = context;
@@ -44,20 +42,19 @@
         const debugLightmaps = debug;
         if (debugLightmaps) this.setLightmapDebugMaterial();
-        this.setupLightmap();
+        this.applyLightmap();
     }
     bindOnBeforeRender() {
-        this.beforeRenderCallback = this.onBeforeRenderThreeComplete.bind(this);
-        this.context.addBeforeRenderListener(this.gameObject, this.beforeRenderCallback);
-        // this.gameObject.onBeforeRender = this.onBeforeRenderThreeComplete.bind(this);
+        this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThreeComplete);
+        this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThreeComplete);
     }
-    private onBeforeRenderThreeComplete(_renderer, _scene, _camera, _geometry, material, _group) {
+    private onBeforeRenderThreeComplete = (_renderer, _scene, _camera, _geometry, material, _group) => {
         this.onBeforeRenderThree(material);
     }
-    private setupLightmap() {
+    private applyLightmap() {
         if (this.gameObject.type === "Object3D") {
             // console.warn("Can not add lightmap. Is this object missing a renderer?");
@@ -65,13 +62,12 @@
         }
         if (this.gameObject.type === "Group") {
-            console.warn("Lightmap on multimaterial object is not supported yet... please ask kindly for implementation.");
+            console.warn("Lightmap on multimaterial object is not supported yet... please open a feature request on https://github.com/needle-tools/needle-engine-support if your project requires it");
             return;
         }
         console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
         const mesh = this.gameObject as unknown as THREE.Mesh;
         // TODO: ensure uv2 exists
         if (!mesh.geometry.getAttribute("uv2"))

src/engine-components/ScreenCapture.ts CHANGED Viewed

@@ -96,6 +96,7 @@
             console.log("Screensharing", this.name, this);
         AudioSource.registerWaitForAllowAudio(() => {
             if (this.videoPlayer && this._currentStream && this._currentMode === ScreenCaptureMode.Receiving) {
+                this.videoPlayer.playInBackground = true;
                 this.videoPlayer.setVideo(this._currentStream);
             }
         });

src/engine-components/timeline/TimelineTracks.ts CHANGED Viewed

@@ -145,7 +145,7 @@
     onPauseChanged() {
         // When the timeline is paused the original animator will be enabled again if it was before
         if (this._animator && this._animatorWasEnabled !== undefined) {
-            this._animator.enabled = this.director.isPaused ? this._animatorWasEnabled : false;
+            this._animator.enabled = this.director.isPlaying === false ? this._animatorWasEnabled : false;
         }
     }
@@ -225,7 +225,12 @@
             // We need to disable the animator component in case it also animates
             // which overrides the timeline
             this._animator = GameObject.getComponent(this.target, Animator) ?? null;
-            this._animatorWasEnabled = this._animator?.enabled;
+            if (this._animator)
+            {
+                this._animatorWasEnabled = this._animator.enabled;
+                this._animator.enabled = false;
+            }
+            else this._animatorWasEnabled = false;
         }
         // Clip Offsets
@@ -323,6 +328,7 @@
                 // const clip = this.clips[i];
                 let weight = 1;
                 weight *= this.evaluateWeight(time, i, this.models, isActive);
+                weight *= this.director.weight;
                 let handleLoop = isInTimeRange;
                 if(doPreExtrapolate){
@@ -370,7 +376,7 @@
                 else action.time = t;
                 action.timeScale = 0;
-                const effectiveWeight = weight * this.director.weight;
+                const effectiveWeight = weight;
                 action.weight = effectiveWeight;
                 action.clampWhenFinished = true;
                 if (!action.isRunning())

src/engine-components/VideoPlayer.ts CHANGED Viewed

@@ -52,7 +52,7 @@
     @serializable()
     aspectMode: AspectMode = AspectMode.None;
     @serializable(URL)
     private clip?: string | MediaStream | null = null;
@@ -106,12 +106,12 @@
     get isPlaying(): boolean {
         const video = this._videoElement;
         if (video) {
-            if(video.currentTime > 0 && !video.paused && !video.ended
+            if (video.currentTime > 0 && !video.paused && !video.ended
                 && video.readyState > video.HAVE_CURRENT_DATA)
                 return true;
-            else if(video.srcObject){
+            else if (video.srcObject) {
                 const stream = video.srcObject as MediaStream;
-                if(stream.active) return true;
+                if (stream.active) return true;
             }
         }
         return false;
@@ -149,6 +149,9 @@
     }
     private _muted: boolean = false;
+    /** Set this to false to pause video playback while the tab is not active */
+    playInBackground: boolean = true;
     private _crossOrigin: string | null = "anonymous";
     private audioOutputMode: VideoAudioOutputMode = VideoAudioOutputMode.AudioSource;
@@ -198,11 +201,13 @@
         window.addEventListener('visibilitychange', _evt => {
             switch (document.visibilityState) {
                 case "hidden":
-                    this.wasPlaying = this._isPlaying;
-                    this.pause();
+                    if(!this.playInBackground){
+                        this.wasPlaying = this._isPlaying;
+                        this.pause();
+                    }
                     break;
                 case "visible":
-                    if (this.wasPlaying) this.play();
+                    if (this.wasPlaying && !this._isPlaying) this.play();
                     break;
             }
         });
@@ -260,7 +265,7 @@
         this.updateVideoElementSettings();
         this._videoElement?.play().catch(err => {
             // https://developer.chrome.com/blog/play-request-was-interrupted/
-            if(debug)
+            if (debug)
                 console.error("Error playing video", err, "CODE=" + err.code, this.videoElement?.src, this);
             setTimeout(() => {
                 if (this._isPlaying && !this.destroyed && this.activeAndEnabled)
@@ -318,7 +323,7 @@
         this._videoTexture.flipY = false;
         this._videoTexture.encoding = THREE.sRGBEncoding;
         this.handleBeginPlaying(playAutomatically);
-        if(debug)
+        if (debug)
             console.log(this);
     }
@@ -420,7 +425,7 @@
         // dont open in fullscreen on ios
         this._videoElement.playsInline = true;
         let muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
-        if(!muted && this._muted) muted = true;
+        if (!muted && this._muted) muted = true;
         this._videoElement.muted = muted;
         if (this.playOnAwake)
             this._videoElement.autoplay = true;
@@ -540,7 +545,7 @@
             if (!this._screenspaceModeQuad) return;
             this._screenspaceModeQuad.geometry.scale(2, 2, 2);
         }
         const quad = this._screenspaceModeQuad;
         this.context.scene.add(quad);
         this.updateScreenspaceMaterialUniforms();

src/engine-components/XRFlag.ts CHANGED Viewed

@@ -79,6 +79,9 @@
             XRFlag.firstApply = true;
             XRFlag.Apply();
         }
+        else {
+            this.UpdateVisible(XRState.Global);
+        }
     }
     onDestroy(): void {

src/engine-components/SceneSwitcher.ts ADDED Viewed

@@ -0,0 +1,224 @@
+import { AssetReference } from "../engine/engine_addressables";
+import { NeedleEngineHTMLElement } from "../engine/engine_element";
+import { InputEvents } from "../engine/engine_input";
+import { isLocalNetwork } from "../engine/engine_networking_utils";
+import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry";
+import { getParam, isMobileDevice, setParamWithoutReload } from "../engine/engine_utils";
+import { serializable } from "../engine/engine_serialization";
+import { Behaviour, GameObject } from "./Component";
+const ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME = "scene";
+ContextRegistry.registerCallback(ContextEvent.ContextRegistered, _ => {
+    if (!NeedleEngineHTMLElement.observedAttributes.includes(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME))
+        NeedleEngineHTMLElement.observedAttributes.push(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
+});
+const couldNotLoadScenePromise = Promise.resolve(false);
+export class SceneSwitcher extends Behaviour {
+    @serializable(AssetReference)
+    scenes!: AssetReference[];
+    /** the url parameter that is set/used to store the currently loaded scene in, set to "" to disable */
+    @serializable()
+    queryParameterName: string = "scene";
+    /** when enabled the new scene is pushed to the browser navigation history, only works with a valid query parameter set */
+    @serializable()
+    useHistory: boolean = true;
+    /** when enabled you can switch between scenes using keyboard left, right, A and D or number keys */
+    @serializable()
+    useKeyboard: boolean = true;
+    /** when enabled you can switch between scenes using swipe (mobile only) */
+    @serializable()
+    useSwipe: boolean = true;
+    private _currentIndex: number = -1;
+    private _currentScene: AssetReference | undefined = undefined;
+    private _engineElementOverserver: MutationObserver | undefined = undefined;
+    start() {
+        if (!this.tryLoadFromQueryParam()) {
+            const value = this.context.domElement.getAttribute(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
+            // let locked = this.lock;
+            try {
+                // this.lock = false;
+                if (value === null || !this.trySelectSceneFromValue(value))
+                    this.select(0);
+            }
+            finally {
+                // this.lock = locked;
+            }
+        }
+    }
+    onEnable(): void {
+        globalThis.addEventListener("popstate", this.onPopState);
+        this.context.input.addEventListener(InputEvents.KeyDown, this.onKeyDown);
+        this.context.input.addEventListener(InputEvents.PointerMove, this.onPointerMove);
+        this.context.input.addEventListener(InputEvents.PointerUp, this.onPointerUp);
+        if (!this._engineElementOverserver) {
+            this._engineElementOverserver = new MutationObserver((mutations) => {
+                for (const mut of mutations) {
+                    if (mut.type === "attributes" && mut.attributeName === ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME) {
+                        const value = this.context.domElement.getAttribute(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
+                        if (value !== null) {
+                            this.trySelectSceneFromValue(value);
+                        }
+                    }
+                }
+            });
+        }
+        this._engineElementOverserver.observe(this.context.domElement, {
+            attributes: true
+        });
+    }
+    onDisable(): void {
+        globalThis.removeEventListener("popstate", this.onPopState);
+        this.context.input.removeEventListener(InputEvents.KeyDown, this.onKeyDown);
+        this.context.input.removeEventListener(InputEvents.PointerMove, this.onPointerMove);
+        this.context.input.removeEventListener(InputEvents.PointerUp, this.onPointerUp);
+    }
+    private onPopState = async (_state: PopStateEvent) => {
+        if (!this.useHistory) return;
+        let wasUsingHistory = this.useHistory;
+        try {
+            this.useHistory = false;
+            await this.tryLoadFromQueryParam();
+        }
+        finally {
+            this.useHistory = wasUsingHistory;
+        }
+    }
+    private normalizedSwipeThresholdX = 0.1;
+    private _didSwipe: boolean = false;
+    private onPointerMove = (e: any) => {
+        if (!this._didSwipe && e.button === 0 && e.pointerType === "touch" && this.context.input.getPointerPressedCount() === 1) {
+            const delta = this.context.input.getPointerPositionDelta(e.button);
+            if (delta) {
+                const normalizedX = delta.x / this.context.domWidth;
+                if (normalizedX >= this.normalizedSwipeThresholdX) {
+                    this._didSwipe = true;
+                    this.selectPrev();
+                }
+                else if (normalizedX <= -this.normalizedSwipeThresholdX) {
+                    this._didSwipe = true;
+                    this.selectNext();
+                }
+            }
+        }
+    }
+    private onPointerUp = (e: any) => {
+        if (e.button === 0) {
+            this._didSwipe = false;
+        }
+    };
+    private onKeyDown = (e: any) => {
+        if (!this.useKeyboard) return;
+        if (!this.scenes) return;
+        const key = e.key.toLowerCase();
+        if (!key) return;
+        const index = parseInt(key) - 1;
+        if (index >= 0) {
+            this.trySelectSceneFromValue(index);
+            return;
+        }
+        switch (key) {
+            case "arrowright":
+            case "d":
+                this.selectNext();
+                break;
+            case "arrowleft":
+            case "a":
+                this.selectPrev();
+                break;
+        }
+    }
+    selectNext() {
+        return this.select(this._currentIndex + 1);
+    }
+    selectPrev() {
+        return this.select(this._currentIndex - 1);
+    }
+    select(index: number) {
+        if (!this.scenes?.length) return couldNotLoadScenePromise;
+        if (index < 0) index = this.scenes.length - 1;
+        if (index >= this.scenes.length) index = 0;
+        const scene = this.scenes[index];
+        return this.switchScene(scene);
+    }
+    async switchScene(scene: AssetReference): Promise<boolean> {
+        if (scene === this._currentScene) return true;
+        if (this._currentScene)
+            GameObject.remove(this._currentScene.asset);
+        const index = this._currentIndex = this.scenes?.indexOf(scene) ?? -1;
+        this._currentScene = scene;
+        try {
+            await scene.loadAssetAsync();
+            if (!scene.asset) return false;
+            if (this._currentIndex === index) {
+                GameObject.add(scene.asset, this.gameObject);
+                // save the loaded scene as an url parameter
+                if (this.queryParameterName?.length)
+                    setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);
+                return true;
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        return false;
+    }
+    private tryLoadFromQueryParam() {
+        if (!this.queryParameterName?.length) return false;
+        // try restore the scene from the url
+        const value = getParam(this.queryParameterName);
+        if (typeof value === "boolean") return false;
+        return this.trySelectSceneFromValue(value);
+    }
+    /** try to select a scene from a string or index */
+    private trySelectSceneFromValue(value: string | number) {
+        if (typeof value === "string") {
+            const index = parseInt(value as string);
+            if (index >= 0 && index < this.scenes.length) {
+                return this.select(index);;
+            }
+            else {
+                // Try to find a scene with a matching name
+                for (let i = 0; i < this.scenes.length; i++) {
+                    const scene = this.scenes[i];
+                    if (scene.uri.toLowerCase().includes(value)) {
+                        return this.select(i);;
+                    }
+                }
+            }
+        }
+        else if (typeof value === "number") {
+            if (value >= 0 && value < this.scenes.length) {
+                return this.select(value);;
+            }
+        }
+        if (isLocalNetwork()) console.warn("Unknown scene value or index: \"" + value + "\"", this)
+        return couldNotLoadScenePromise;
+    }
+}