@needle-tools/engine 4.13.1 → 4.14.0-beta

package/src/engine-components/Renderer.ts

@@ -638,12 +638,16 @@ export class Renderer extends Behaviour implements IRenderer {
 
         this.updateReflectionProbe();
 
-        // this.testIfLODLevelsAreAvailable();
+        ReflectionProbe.onEnabled.addEventListener(this.onReflectionProbeEnabled);
+        ReflectionProbe.onDisabled.addEventListener(this.onReflectionProbeDisabled);
     }
 
     onDisable() {
         this.setVisibility(false);
 
+        ReflectionProbe.onEnabled.removeEventListener(this.onReflectionProbeEnabled);
+        ReflectionProbe.onDisabled.removeEventListener(this.onReflectionProbeDisabled);
+
         if (this._handles && this._handles.length > 0) {
             this.setInstancingEnabled(false);
         }
@@ -662,14 +666,24 @@ export class Renderer extends Behaviour implements IRenderer {
         }
     }
 
+    private readonly onReflectionProbeEnabled = () => {
+        this.updateReflectionProbe();
+    }
+    private onReflectionProbeDisabled = (probe: ReflectionProbe) => {
+        if (this._reflectionProbe === probe) {
+            this._reflectionProbe.unapply(this.gameObject);
+            this._reflectionProbe = null;
+        }
+    }
+
 
     onBeforeRender() {
         if (!this.gameObject) {
             return;
         }
 
-        if (this._probeAnchorLastFrame !== this.probeAnchor) {
-            this._reflectionProbe?.onUnset(this);
+        if (this._probeAnchorLastFrame !== this.probeAnchor || this._reflectionProbe?.activeAndEnabled === false) {
+            this._reflectionProbe?.unapply(this.gameObject);
             this.updateReflectionProbe();
         }
 
@@ -726,8 +740,21 @@ export class Renderer extends Behaviour implements IRenderer {
         }
 
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-                this._reflectionProbe.onSet(this);
+            // @TODO: when reflection probes are applied via bounding box we currently NEVER update it again
+            // if(this.probeAnchor === this._reflectionProbe.gameObject)
+            this._reflectionProbe.apply(this.gameObject);
+            // else {
+            //     const probe = this._reflectionProbe;
+            //     this._updateReflectionProbe();
+            //     console.log(this.name, "Reflection probe updated on before render. Probe anchor changed:", this.probeAnchor !== this._probeAnchorLastFrame, "Probe active:", probe.activeAndEnabled, "New probe anchor:", this._reflectionProbe?.gameObject.name);
+            //     if(!this._reflectionProbe) probe?.unapply(this.gameObject);
+            //     else this._reflectionProbe?.apply(this.gameObject);
+            // }
+        }
+        else if (this.reflectionProbeUsage === ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.unapply(this.gameObject);
         }
+
         // since three 163 we need to set the envMap to the scene envMap if it is not set
         // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
         // internal issue: https://linear.app/needle/issue/NE-6363
@@ -766,8 +793,8 @@ export class Renderer extends Behaviour implements IRenderer {
             }
         }
 
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onUnset(this);
+        if (this._reflectionProbe?.activeAndEnabled === false) {
+            this._reflectionProbe.unapply(this.gameObject);
         }
 
         if (this.static && this.gameObject.matrixAutoUpdate) {
@@ -798,6 +825,7 @@ export class Renderer extends Behaviour implements IRenderer {
     private updateReflectionProbe() {
         // handle reflection probe
         this._reflectionProbe = null;
+
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
             // update the reflection probe right before rendering
             // if we do it immediately the reflection probe might not be enabled yet 

package/src/engine-components/RendererLightmap.ts

@@ -1,22 +1,19 @@
 import { NEEDLE_progressive } from "@needle-tools/gltf-progressive";
-import { Group, Material, Mesh, MeshPhysicalMaterial, Object3D, ShaderMaterial, Texture, Vector4, WebGLProgramParametersWithUniforms } from "three";
+import { Group, Mesh, Object3D, ShaderMaterial, Texture, Vector2, Vector4 } from "three";
 
 import type { Context } from "../engine/engine_setup.js";
 import { getParam } from "../engine/engine_utils.js";
+import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 import { type Renderer } from "./Renderer.js";
 
 const debug = getParam("debuglightmaps");
 
-declare type MaterialWithLightmap = Material & { lightMap?: Texture | null };
-
-let cloningCounter = 0;
-
-const $lightmapVersion = Symbol("lightmap-material-version");
+const $lightmapKey = Symbol("lightmapKey");
 
 
 /**
  * This component is automatically added by the {@link Renderer} component if the object has lightmap uvs AND we have a lightmap.
- * 
+ *
  * @category Rendering
  * @group Components
  */
@@ -29,9 +26,13 @@ export class RendererLightmap {
         if (tex !== this.lightmapTexture) {
             this.lightmapTexture = tex;
             this.applyLightmap();
+            this.updatePropertyBlockTexture();
             if (this.lightmapTexture) {
                 NEEDLE_progressive.assignTextureLOD(this.lightmapTexture, 0).then(res => {
-                    if ((res as Texture)?.isTexture) this.lightmapTexture = res as Texture;
+                    if ((res as Texture)?.isTexture) {
+                        this.lightmapTexture = res as Texture;
+                        this.updatePropertyBlockTexture();
+                    }
                 })
             }
         }
@@ -41,13 +42,12 @@ export class RendererLightmap {
     private lightmapScaleOffset: Vector4 = new Vector4(1, 1, 0, 0);
 
     private readonly renderer: Renderer;
-    private readonly clonedMaterials = new Array<Material>();
+    private _isApplied: boolean = false;
 
     private get context(): Context { return this.renderer.context; }
     private get gameObject() { return this.renderer.gameObject; }
+
     private lightmapTexture: Texture | null = null;
-    private lightmapScaleOffsetUniform = { value: new Vector4(1, 1, 0, 0) };
-    private lightmapUniform: { value: Texture | null } = { value: null };
 
     constructor(renderer: Renderer) {
         this.renderer = renderer;
@@ -60,7 +60,10 @@ export class RendererLightmap {
         this.lightmapScaleOffset = lightmapScaleOffset;
         this.lightmapTexture = lightmapTexture;
         NEEDLE_progressive.assignTextureLOD(lightmapTexture, 0).then(res => {
-            if ((res as Texture)?.isTexture) this.lightmapTexture = res as Texture;
+            if ((res as Texture)?.isTexture) {
+                this.lightmapTexture = res as Texture;
+                this.updatePropertyBlockTexture();
+            }
         })
         if (debug == "show") {
             console.log("Lightmap:", this.gameObject.name, lightmapIndex, "\nScaleOffset:", lightmapScaleOffset, "\nTexture:", lightmapTexture)
@@ -70,18 +73,18 @@ export class RendererLightmap {
         this.applyLightmap();
     }
 
-    updateLightmapUniforms(material: Material) {
-        const uniforms = material["uniforms"];
-        if (uniforms && uniforms.lightmap) {
-            this.lightmapScaleOffsetUniform.value = this.lightmapScaleOffset;
-            uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
-        }
+    updateLightmapUniforms(_material: any) {
     }
 
     /**
-     * Apply the lightmap to the object. This will clone the material and set the lightmap texture and scale/offset
+     * Apply the lightmap to the object using MaterialPropertyBlock instead of cloning materials.
+     * The lightmap texture and its per-object UV transform are set as overrides via PropertyBlock.
+     * Three.js reads material.lightMap to determine shader defines and upload uniforms,
+     * and uses texture.offset/repeat to compute lightMapTransform in the vertex shader.
      */
     applyLightmap() {
+        if (this._isApplied) return;
+
         if (this.gameObject.type === "Object3D") {
             if (debug)
                 console.warn("Can not add lightmap. Is this object missing a renderer?", this.gameObject.name);
@@ -91,23 +94,60 @@ export class RendererLightmap {
         const mesh = this.gameObject as unknown as (Mesh | Group);
         this.ensureLightmapUvs(mesh);
 
-        for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
-
-            const mat = this.renderer.sharedMaterials[i];
-            if (!mat) continue;
-            const newMat = this.ensureLightmapMaterial(mat, i);
-            if (mat !== newMat) {
-                this.renderer.sharedMaterials[i] = newMat;
+        if (this.lightmapIndex >= 0 && this.lightmapTexture) {
+            this.lightmapTexture.channel = 1;
+            const so = this.lightmapScaleOffset;
+            for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+                const mat = this.renderer.sharedMaterials[i];
+                if (!mat) continue;
+
+                // If the material doesn't support lightmaps, skip it
+                if (mat["lightMap"] === undefined) continue;
+
+                if (debug) console.log("Setting lightmap on material", mat.name, "for renderer", this.renderer.name);
+
+                // Use property block to set lightMap with per-object UV transform.
+                // The texture transform differentiates cache keys per object and
+                // PropertyBlock handles save/restore of the shared texture's offset/repeat.
+                const propertyBlock = MaterialPropertyBlock.get(this.gameObject);
+                propertyBlock.setOverride("lightMap", this.lightmapTexture, {
+                    offset: new Vector2(so.z, 1 - so.y - so.w),
+                    repeat: new Vector2(so.x, so.y)
+                });
+
+                (mat as any)[$lightmapKey] = true;
             }
+
+            this._isApplied = true;
         }
+    }
 
-        if (this.lightmapIndex >= 0 && this.lightmapTexture) {
-            // always on channel 1 for now. We could optimize this by passing the correct lightmap index along
-            this.lightmapTexture.channel = 1;
-            for (const mat of this.renderer.sharedMaterials) {
-                if (mat) this.assignLightmapTexture(mat);
+    /** Update the lightMap override on all property blocks (e.g. after LOD swap) */
+    private updatePropertyBlockTexture() {
+        if (!this._isApplied || !this.lightmapTexture) return;
+        this.lightmapTexture.channel = 1;
+        const so = this.lightmapScaleOffset;
+        const propertyBlock = MaterialPropertyBlock.get(this.gameObject);
+        propertyBlock.setOverride("lightMap", this.lightmapTexture, {
+            offset: new Vector2(so.z, 1 - so.y - so.w),
+            repeat: new Vector2(so.x, so.y)
+        });
+    }
+
+    /**
+     * Remove the lightmap from the object
+     */
+    onUnset() {
+        for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+            const mat = this.renderer.sharedMaterials[i];
+            if (mat) {
+                delete (mat as any)[$lightmapKey];
             }
         }
+        const block = MaterialPropertyBlock.get(this.gameObject);
+        if (block) {
+            block.removeOveride("lightMap");
+        }
     }
 
     private ensureLightmapUvs(object: Object3D | Group | Mesh) {
@@ -123,59 +163,8 @@ export class RendererLightmap {
         }
     }
 
-    private ensureLightmapMaterial(material: Material, index: number) {
-        if (!material.userData) material.userData = {};
-        // if (material instanceof MeshPhysicalMaterial) {
-        //     return material;
-        // }
-        // check if the material version has changed and only then clone the material
-        if (this.clonedMaterials[index] !== material) {
-            if (debug) {
-                ++cloningCounter;
-                if (cloningCounter++ < 1000) {
-                    console.warn(`Cloning material for lightmap ${this.renderer.name}: '${material.name}'`);
-                }
-                else if (cloningCounter === 1000) {
-                    console.warn(`Further material cloning for lightmaps suppressed to avoid flooding the console.`);
-                }
-            }
-            const mat: Material = material.clone();
-            if (!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
-            material = mat;
-            material.onBeforeCompile = this.onBeforeCompile;
-            this.clonedMaterials[index] = material;
-
-        }
-        return material;
-    }
-
-    private assignLightmapTexture(material: MaterialWithLightmap) {
-        if (!material) return;
-        if (material instanceof MeshPhysicalMaterial && material.transmission > 0) {
-            return;
-        }
-        const hasChanged = material.lightMap !== this.lightmapTexture || material[$lightmapVersion] !== material.version;
-        if (!hasChanged) {
-            return;
-        }
-
-        if (debug) console.log(`Assigning lightmap texture ${this.renderer.name}: '${material.name}' (${material.version} ${material[$lightmapVersion]})`);
-
-        // assign the lightmap
-        material.lightMap = this.lightmapTexture;
-        material.needsUpdate = true;
-        // store the version of the material
-        material[$lightmapVersion] = material.version;
-    }
-
-    private onBeforeCompile = (shader: WebGLProgramParametersWithUniforms, _) => {
-        if (debug === "verbose") console.log("Lightmaps, before compile\n", shader)
-        this.lightmapScaleOffsetUniform.value = this.lightmapScaleOffset;
-        this.lightmapUniform.value = this.lightmapTexture;
-        shader.uniforms.lightmapScaleOffset = this.lightmapScaleOffsetUniform;
-    }
-
     private setLightmapDebugMaterial() {
+        const so = this.lightmapScaleOffset;
 
         // debug lightmaps
         this.gameObject["material"] = new ShaderMaterial({
@@ -190,7 +179,6 @@ export class RendererLightmap {
             fragmentShader: `
                 uniform sampler2D lightMap;
                 uniform float lightMapIntensity;
-                uniform vec4 lightmapScaleOffset;
                 varying vec2 vUv1;
 
                 // took from threejs 05fc79cd52b79e8c3e8dec1e7dca72c5c39983a4
@@ -199,8 +187,8 @@ export class RendererLightmap {
                 }
 
                 void main() {
-                    vec2 lUv = vUv1.xy * lightmapScaleOffset.xy + vec2(lightmapScaleOffset.z, (1. - (lightmapScaleOffset.y + lightmapScaleOffset.w)));
-                    
+                    vec2 lUv = vUv1.xy * vec2(${so.x.toFixed(6)}, ${so.y.toFixed(6)}) + vec2(${so.z.toFixed(6)}, ${(1 - so.y - so.w).toFixed(6)});
+
                     vec4 lightMapTexel = texture2D( lightMap, lUv);
                     gl_FragColor = lightMapTexel;
                     gl_FragColor.a = 1.;
@@ -209,4 +197,4 @@ export class RendererLightmap {
             defines: { USE_LIGHTMAP: '' }
         });
     }
-}
+}

package/src/engine-components/SeeThrough.ts

@@ -5,30 +5,30 @@ import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../engine/engine_three_utils.js";
 import { getParam } from "../engine/engine_utils.js";
-import { USDObject, USDZExporterContext } from "./api.js";
+import type { Camera } from "./Camera.js";
 import { Behaviour } from "./Component.js";
 import { IUSDExporterExtension } from "./export/usdz/Extension.js";
 import { USDZExporter } from "./export/usdz/USDZExporter.js";
-import { Renderer } from "./Renderer.js";
-import type { Camera } from "./Camera.js";
 import type { OrbitControls } from "./OrbitControls.js";
+import { Renderer } from "./Renderer.js";
+import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 
 const debugSeeThrough = getParam("debugseethrough");
 
-type MaterialState = {
-    opacity: number,
-    transparent: boolean,
-    alphaHash: boolean
-}
-
-type MaterialWithState = Material & {
-    /** Original values */
-    userData: {
-        seeThrough: {
-            initial: MaterialState,
-        }
-    }
-};
+// type MaterialState = {
+//     opacity: number,
+//     transparent: boolean,
+//     alphaHash: boolean
+// }
+
+// type MaterialWithState = Material & {
+//     /** Original values */
+//     userData: {
+//         seeThrough: {
+//             initial: MaterialState,
+//         }
+//     }
+// };
 
 let i = 0;
 
@@ -176,26 +176,26 @@ export class SeeThrough extends Behaviour {
     onEnable() {
         this._needsUpdate = true;
         this._renderer = null;
-        SeeThroughUsdzExporterPlugin.components.push(this);
+        // SeeThroughUsdzExporterPlugin.components.push(this);
     }
 
     /**  @internal */
     onDisable() {
-        this._renderer?.forEach(r => {
-            const original = this.rendererMaterialsOriginal.get(r);
-            for (let i = 0; i < r.sharedMaterials.length; i++) {
-                const mat = r.sharedMaterials[i];
-                if (!mat) continue;
-                if (original && original[i]) {
-                    r.sharedMaterials[i] = original[i];
-                }
-            }
-            this.rendererMaterials.delete(r);
-            this.rendererMaterialsOriginal.delete(r);
-        });
-
-        const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
-        if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
+        // this._renderer?.forEach(r => {
+        //     const original = this.rendererMaterialsOriginal.get(r);
+        //     for (let i = 0; i < r.sharedMaterials.length; i++) {
+        //         const mat = r.sharedMaterials[i];
+        //         if (!mat) continue;
+        //         if (original && original[i]) {
+        //             r.sharedMaterials[i] = original[i];
+        //         }
+        //     }
+        //     this.rendererMaterials.delete(r);
+        //     this.rendererMaterialsOriginal.delete(r);
+        // });
+
+        // const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
+        // if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
     }
 
     /**
@@ -239,8 +239,8 @@ export class SeeThrough extends Behaviour {
         }
     }
 
-    private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
-    private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
+    // private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
+    // private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
 
     private updateDirection() {
         this.referencePoint ??= this.context.scene;
@@ -272,66 +272,81 @@ export class SeeThrough extends Behaviour {
                 renderer.gameObject.raycastAllowed = true;
             }
 
-            if (!this.rendererMaterials.has(renderer)) {
-                const originalMaterials = new Array<Material>();
-                const clonedMaterials = new Array<MaterialWithState>();
-
-                // We clone the materials once and store them, so we can modify the opacity without affecting other objects using the same material. This could potentially be optimized further to re-use materials between renderers if multiple renderers use the same material.
-                for (let i = 0; i < renderer.sharedMaterials.length; i++) {
-                    const mat = renderer.sharedMaterials[i];
-                    if (!mat) continue;
-                    originalMaterials.push(mat);
-                    const matClone = mat.clone() as MaterialWithState;
-                    // @ts-ignore
-                    matClone.userData = mat.userData || {};
-                    matClone.userData.seeThrough = {
-                        initial: {
-                            opacity: matClone.opacity,
-                            transparent: matClone.transparent,
-                            alphaHash: matClone.alphaHash
-                        }
-                    }
-                    clonedMaterials.push(matClone);
-                    renderer.sharedMaterials[i] = matClone;
-                }
-
-                this.rendererMaterials.set(renderer, clonedMaterials);
-                this.rendererMaterialsOriginal.set(renderer, originalMaterials);
-            }
-
-            const materials = renderer.hasLightmap ? renderer.sharedMaterials : this.rendererMaterials.get(renderer);
+            // if (!this.rendererMaterials.has(renderer)) {
+            //     const originalMaterials = new Array<Material>();
+            //     const clonedMaterials = new Array<MaterialWithState>();
+
+            //     // We clone the materials once and store them, so we can modify the opacity without affecting other objects using the same material. This could potentially be optimized further to re-use materials between renderers if multiple renderers use the same material.
+            //     for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+            //         const mat = renderer.sharedMaterials[i];
+            //         if (!mat) continue;
+            //         originalMaterials.push(mat);
+            //         const matClone = mat.clone() as MaterialWithState;
+            //         // @ts-ignore
+            //         matClone.userData = mat.userData || {};
+            //         matClone.userData.seeThrough = {
+            //             initial: {
+            //                 opacity: matClone.opacity,
+            //                 transparent: matClone.transparent,
+            //                 alphaHash: matClone.alphaHash
+            //             }
+            //         }
+            //         clonedMaterials.push(matClone);
+            //         // renderer.sharedMaterials[i] = matClone;
+            //     }
+
+            //     this.rendererMaterials.set(renderer, clonedMaterials);
+            //     this.rendererMaterialsOriginal.set(renderer, originalMaterials);
+            // }
+
+            const materials = renderer.sharedMaterials;// : this.rendererMaterials.get(renderer);
             if (!materials) return;
 
-            for (const mat of materials) {
-                if (!mat) continue;
+            const block = MaterialPropertyBlock.get(renderer.gameObject);
 
-                let newAlpha = Mathf.lerp(mat.opacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
-                if (newAlpha >= 0.99) newAlpha = 1;
-                else if (newAlpha <= 0.01) newAlpha = 0;
+            const currentOpacity = (block.getOverride("opacity")?.value ?? materials[0].opacity ?? 1);
 
+            let newAlpha = Mathf.lerp(currentOpacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
+            if (newAlpha >= 0.99) newAlpha = 1;
+            else if (newAlpha <= 0.01) newAlpha = 0;
 
-                const wasTransparent = mat.transparent;
-                const wasAlphaHash = mat.alphaHash;
-                const previousOpacity = mat.opacity;
+            // const currentTransparent = (block.getOverride("transparent")?.value ?? materials[0].transparent ?? false) as boolean;
 
-                mat.alphaHash = this.useAlphaHash;
+            block.setOverride("alphaHash", this.useAlphaHash);
+            block.setOverride("opacity", newAlpha);
+            block.setOverride("transparent", newAlpha >= 0.99999 ? false : !this.useAlphaHash);
 
-                if (mat.userData && "seeThrough" in mat.userData) {
-                    const initial = mat.userData.seeThrough.initial as MaterialState;
-                    mat.opacity = initial.opacity * newAlpha;
-                    mat.transparent = mat.opacity >= 1 ? initial.transparent : !this.useAlphaHash;
-                }
-                else {
-                    mat.transparent = mat.opacity >= 1 ? false : !this.useAlphaHash;
-                }
 
-                if (wasTransparent !== mat.transparent 
-                    || wasAlphaHash !== mat.alphaHash 
-                    || mat.opacity !== previousOpacity // MeshPhysicsMaterial needs that and maybe other materials too...
-                ) {
-                    mat.needsUpdate = true;
-                }
-            }
+            // for (const mat of materials) {
+            //     if (!mat) continue;
+
+            //     let newAlpha = Mathf.lerp(mat.opacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
+            //     if (newAlpha >= 0.99) newAlpha = 1;
+            //     else if (newAlpha <= 0.01) newAlpha = 0;
+
+
+            //     const wasTransparent = mat.transparent;
+            //     const wasAlphaHash = mat.alphaHash;
+            //     const previousOpacity = mat.opacity;
+
+            //     mat.alphaHash = this.useAlphaHash;
+
+            //     if (mat.userData && "seeThrough" in mat.userData) {
+            //         const initial = mat.userData.seeThrough.initial as MaterialState;
+            //         mat.opacity = initial.opacity * newAlpha;
+            //         mat.transparent = mat.opacity >= 1 ? initial.transparent : !this.useAlphaHash;
+            //     }
+            //     else {
+            //         mat.transparent = mat.opacity >= 1 ? false : !this.useAlphaHash;
+            //     }
+
+            //     if (wasTransparent !== mat.transparent 
+            //         || wasAlphaHash !== mat.alphaHash 
+            //         || mat.opacity !== previousOpacity // MeshPhysicsMaterial needs that and maybe other materials too...
+            //     ) {
+            //         mat.needsUpdate = true;
+            //     }
+            // }
         });
     }
 
@@ -339,33 +354,33 @@ export class SeeThrough extends Behaviour {
 
 
 ;
-class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
+// class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
 
-    static readonly components: SeeThrough[] = [];
+//     static readonly components: SeeThrough[] = [];
 
-    get extensionName() {
-        return "SeeThrough";
-    }
+//     get extensionName() {
+//         return "SeeThrough";
+//     }
 
-    // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
-    //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
-    //     if(!component) return;
-    //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
+//     // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
+//     //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
+//     //     if(!component) return;
+//     //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
 
-    //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
+//     //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
 
-    //     model.addEventListener("serialize", (writer, context) => {
-    //         writer.appendLine(`# SeeThrough component on ${object.name}`);
-    //     });
-    // }
+//     //     model.addEventListener("serialize", (writer, context) => {
+//     //         writer.appendLine(`# SeeThrough component on ${object.name}`);
+//     //     });
+//     // }
 
-}
+// }
 
-const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
+// const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
 
-USDZExporter.beforeExport.addEventListener(args => {
-    if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
-    if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
-        args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
-    }
-});
+// USDZExporter.beforeExport.addEventListener(args => {
+//     if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
+//     if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
+//         args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
+//     }
+// });

package/src/engine-components/SmoothFollow.ts

@@ -73,7 +73,7 @@ export class SmoothFollow extends Behaviour {
      * @default 0.1
      */
     @serializable()
-    followFactor = .1;
+    followFactor: number = .1;
 
     /**
      * Speed factor for rotation following.
@@ -83,7 +83,7 @@ export class SmoothFollow extends Behaviour {
      * @default 0.1
      */
     @serializable()
-    rotateFactor = .1;
+    rotateFactor: number = .1;
 
     /**
      * Which position axes to follow. Use bitwise OR to combine: