@needle-tools/engine 3.1.0-alpha.2 → 3.2.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.1.0-alpha.2",
+    "version": "3.2.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/src/engine/codegen/register_types.js

@@ -119,6 +119,7 @@ import { RGBAColor } from "../../engine-components/js-extensions/RGBAColor";
 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("RGBAColor", RGBAColor);
 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);

package/src/engine/debug/debug_overlay.ts

@@ -24,6 +24,7 @@ export function getErrorCount() {
 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);

package/src/engine/engine_context_registry.ts

@@ -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 @@ export class ContextRegistry {
 
     static register(ctx: IContext) {
         this.Registered.push(ctx);
+        this.dispatchCallback(ContextEvent.ContextRegistered, ctx);
     }
 
     static unregister(ctx: IContext) {

package/src/engine/engine_gltf_builtin_components.ts

@@ -50,6 +50,9 @@ export async function createBuiltinComponents(context: Context, gltfId: SourceId
         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;

package/src/engine/engine_license.ts

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

package/src/engine/engine_lightdata.ts

@@ -33,7 +33,7 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     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);

package/src/engine/engine_networking_auto.ts

@@ -200,21 +200,28 @@ export declare type SyncFieldOptions = {
     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;

package/src/engine/engine_rendererdata.ts

@@ -36,7 +36,8 @@ export class RendererData {
         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 @@ export class RendererData {
 
     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 @@ export class RendererData {
     }
 
     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 @@ export class RendererData {
                     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 @@ export class RendererData {
 
     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 @@ export class RendererData {
                 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 @@ export class LightData {
             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);

package/src/engine/engine_serialization_builtin_serializer.ts

@@ -240,7 +240,16 @@ class EventListSerializer extends TypeSerializer {
                     }
                     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;

package/src/engine/extensions/NEEDLE_lighting_settings.ts

@@ -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 @@ export class NEEDLE_lighting_settings implements GLTFLoaderPlugin {
             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 @@ export class SceneLightSettings extends Behaviour {
 
     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 @@ export class SceneLightSettings extends Behaviour {
             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 @@ export class SceneLightSettings extends Behaviour {
 
     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)

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -58,6 +58,7 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                     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 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                                         // 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)

package/src/engine/extensions/NEEDLE_progressive.ts

@@ -138,10 +138,16 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
                 }
                 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);

package/src/engine/extensions/extensions.ts

@@ -51,6 +51,12 @@ class PointerResolver {
 }
 
 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));

package/src/engine-components/AudioSource.ts

@@ -143,6 +143,7 @@ export class AudioSource extends Behaviour {
     @serializable()
     rollOffMode: AudioRolloffMode = 0;
 
+    playInBackground: boolean = true;
 
     private _loop: boolean = false;
     private sound: THREE.PositionalAudio | null = null;
@@ -196,9 +197,11 @@ export class AudioSource extends Behaviour {
     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":

package/src/engine-components/Camera.ts

@@ -390,7 +390,7 @@ class CameraSkybox {
     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)

package/src/engine-components/Component.ts

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

package/src/engine-components/Renderer.ts

@@ -59,6 +59,18 @@ class SharedMaterialArray implements ISharedMaterials {
     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 @@ class SharedMaterialArray implements ISharedMaterials {
                 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 @@ class SharedMaterialArray implements ISharedMaterials {
         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 @@ class SharedMaterialArray implements ISharedMaterials {
         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 @@ export class Renderer extends Behaviour implements IRenderer {
     }
 
     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 @@ export class Renderer extends Behaviour implements IRenderer {
 
     /**@deprecated please use sharedMaterial */
     set material(mat: THREE.Material) {
-        this.sharedMaterials[0] = mat;
+        this.sharedMaterial = mat;
     }
 
     private _sharedMaterials!: SharedMaterialArray;
@@ -323,7 +351,6 @@ export class Renderer extends Behaviour implements IRenderer {
 
         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 @@ export class Renderer extends Behaviour implements IRenderer {
             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 @@ export class Renderer extends Behaviour implements IRenderer {
                 // 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 @@ export class Renderer extends Behaviour implements IRenderer {
                     }
                 }
             }
-        }
-
-
-
-        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 @@ export class Renderer extends Behaviour implements IRenderer {
         else {
             this.applySettings(this.gameObject);
         }
+        
+        if (this.sharedMaterials.changed) {
+            this.sharedMaterials.changed = false;
+            this.applyLightmapping();
+        }
 
         if (this.handles?.length) {
             // if (this.name === "Darbouka")