@needle-tools/engine 4.10.5-next.a5d5bf4 → 4.11.0-beta.1

package/plugins/vite/needle-app.js

@@ -0,0 +1,194 @@
+import { writeFile } from 'fs';
+import { tryParseNeedleEngineSrcAttributeFromHtml } from '../common/needle-engine.js';
+
+
+
+/**
+ * @param {'serve' | 'build'} command
+ * @param {{} | undefined | null} config
+ * @param {import('../types').userSettings} userSettings
+ * @returns {import('vite').Plugin[] | null}
+ */
+export const needleApp = (command, config, userSettings) => {
+
+    if (command !== "build") {
+        return null;
+    }
+
+    /** @type {Array<import("rollup").OutputChunk>} */
+    const entryFiles = new Array();
+
+    let outputDir = "dist";
+
+    /**
+     * @type {import('vite').Plugin}
+     */
+    return [
+        {
+            name: 'needle:app',
+            enforce: "post",
+            configResolved(config) {
+                outputDir = config.build.outDir || "dist";
+            },
+            transformIndexHtml: {
+                handler: async function (html, context) {
+                    const name = context.filename;
+                    if (name.includes("index.html")) {
+                        if (context.chunk?.isEntry) {
+                            try {
+                                entryFiles.push(context.chunk);
+                                const path = context.chunk.fileName;
+                                // console.log("[needle-dependencies] entry chunk imports", {
+                                //     name: context.chunk.fileName,
+                                //     imports: context.chunk.imports,
+                                //     dynamicImports: context.chunk.dynamicImports,
+                                //     refs: context.chunk.referencedFiles,
+                                // });
+
+                                // TODO: here we try to find the main asset (entrypoint) for this web app. It's a bit hacky right now but we have to assign this url directly to make it work with `gen.js` where multiple needle-apps are on different (or the same) pages.
+                                const attribute_src = tryParseNeedleEngineSrcAttributeFromHtml(html);
+                                const imported_glbs = Array.from(context.chunk.viteMetadata?.importedAssets?.values() || [])?.filter(f => f.endsWith(".glb") || f.endsWith(".gltf"));
+
+                                const main_asset = attribute_src?.[0] || imported_glbs?.[0];
+
+                                const webComponent = generateNeedleEmbedWebComponent(path, main_asset);
+                                await writeFile(`${outputDir}/needle-app.js`, webComponent, (err) => {
+                                    if (err) {
+                                        console.error("[needle-app] could not create needle-app.js", err);
+                                    }
+                                    else {
+                                        console.log("[needle-app] created needle-app.js");
+                                    }
+                                });
+                            }
+                            catch (e) {
+                                console.warn("WARN: could not create needle-app.js\n", e);
+                            }
+                        }
+                    }
+                }
+            },
+
+        }
+    ]
+}
+
+
+/**
+ * @param {string} filepath
+ * @param {string | null} src
+ * @returns {string}
+ */
+function generateNeedleEmbedWebComponent(filepath, src) {
+
+
+    // filepath is e.g. `assets/index-XXXXXXXX.js`
+    // we want to make sure the path is correct relative to where the component will be used
+    // this script will be emitted in the output directory root (e.g. needle-embed.js)
+
+    const componentDefaultName = 'needle-app';
+
+    return `
+
+// Needle Engine attributes we want to allow to be overriden
+const knownAttributes = [
+    "src",
+    "background-color", 
+    "background-image", 
+    "environment-image", 
+    "focus-rect",
+];
+
+const scriptUrl = new URL(import.meta.url);
+const componentName = scriptUrl.searchParams.get("component-name") || '${componentDefaultName}';
+
+
+if (!customElements.get(componentName)) {
+    console.debug(\`Defining needle-app as <\${componentName}>\`);
+    customElements.define(componentName, class extends HTMLElement {
+
+        static get observedAttributes() {
+            return knownAttributes;
+        }
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+            const template = document.createElement('template');
+            template.innerHTML = \`
+                <style>
+                    :host {
+                        position: relative;
+                        display: block;
+                        width: max(360px 100%);
+                        height: max(240px, 100%);
+                        margin: 0;
+                        padding: 0;
+                    }
+                    needle-engine {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                </style>
+            \`;
+            this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+            const script = document.createElement('script');
+            script.type = 'module';
+            const url = new URL('.', import.meta.url);
+            this.basePath = this.getAttribute('base-path') || \`\${url.protocol}//\${url.host}\${url.pathname}\`;
+            while(this.basePath.endsWith('/')) {
+                this.basePath = this.basePath.slice(0, -1);
+            }
+            script.src = this.getAttribute('script-src') || \`\${this.basePath}/${filepath}\`;
+            this.shadowRoot.appendChild(script);
+
+            this.needleEngine = document.createElement('needle-engine');
+            this.updateAttributes();
+            this.shadowRoot.appendChild(this.needleEngine);
+
+            console.debug(this.basePath, script.src, this.needleEngine.getAttribute("src"));
+        }
+
+        onConnectedCallback() {
+            console.debug('NeedleEmbed connected to the DOM');
+        }
+
+        disconnectedCallback() {
+            console.debug('NeedleEmbed disconnected from the DOM');
+        }
+        
+        attributeChangedCallback(name, oldValue, newValue) {
+            console.debug(\`NeedleApp attribute changed: \${name} from \${oldValue} to \${newValue}\`);
+            this.updateAttributes();
+        }
+
+        updateAttributes() {
+            console.debug("NeedleApp updating attributes");
+            
+            const src = this.getAttribute('src') || ${src?.length ? `\`\${this.basePath}/${src}\`` : null};
+            if(src) this.needleEngine.setAttribute("src", src);
+            else this.needleEngine.removeAttribute("src");
+
+            for(const attr of knownAttributes) {
+                
+                if(attr === "src") continue; // already handled above
+
+                if(this.hasAttribute(attr)) {
+                    this.needleEngine.setAttribute(attr, this.getAttribute(attr));
+                }
+                else {
+                    this.needleEngine.removeAttribute(attr);    
+                }
+            }
+        }
+    });
+}
+else {
+    console.warn(\`needle-app <\${componentName}> already defined.\`);
+}
+`
+}

package/src/engine/codegen/register_types.ts

@@ -90,6 +90,7 @@ import { SkinnedMeshRenderer } from "../../engine-components/Renderer.js";
 import { Rigidbody } from "../../engine-components/RigidBody.js";
 import { SceneSwitcher } from "../../engine-components/SceneSwitcher.js";
 import { ScreenCapture } from "../../engine-components/ScreenCapture.js";
+import { SeeThrough } from "../../engine-components/SeeThrough.js";
 import { ShadowCatcher } from "../../engine-components/ShadowCatcher.js";
 import { RemoteSkybox } from "../../engine-components/Skybox.js";
 import { SmoothFollow } from "../../engine-components/SmoothFollow.js";
@@ -249,6 +250,7 @@ TypeStore.add("SkinnedMeshRenderer", SkinnedMeshRenderer);
 TypeStore.add("Rigidbody", Rigidbody);
 TypeStore.add("SceneSwitcher", SceneSwitcher);
 TypeStore.add("ScreenCapture", ScreenCapture);
+TypeStore.add("SeeThrough", SeeThrough);
 TypeStore.add("ShadowCatcher", ShadowCatcher);
 TypeStore.add("RemoteSkybox", RemoteSkybox);
 TypeStore.add("SmoothFollow", SmoothFollow);

package/src/engine/engine_gizmos.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material,Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
@@ -289,11 +289,11 @@ export class Gizmos {
         const mesh = Internal.getMesh(options.duration ?? 0);
         if ("mesh" in options) {
             mesh.geometry = options.mesh.geometry;
-            mesh.matrix.copy(options.mesh.matrixWorld);
+            mesh.matrixWorld.copy(options.mesh.matrixWorld);
         }
         else {
             mesh.geometry = options.geometry;
-            mesh.matrix.copy(options.matrix);
+            mesh.matrixWorld.copy(options.matrix);
         }
         mesh.matrixAutoUpdate = false;
         mesh.matrixWorldAutoUpdate = false;

package/src/engine/engine_physics.ts

@@ -325,8 +325,12 @@ export class Physics {
             const mesh = obj as Mesh | SkinnedMesh;
             const geo = mesh.geometry;
 
+            if (obj.raycastAllowed === false) {
+                shouldIntersectObject = false;
+            }
+
             // We need to run this first because of "EventSystem.testObject" implementation
-            if (options.testObject) {
+            if (shouldIntersectObject && options.testObject) {
                 const testResult = options.testObject?.(obj);
                 if (testResult === false) {
                     continue;
@@ -335,8 +339,7 @@ export class Physics {
                     shouldIntersectObject = false;
                 }
             }
-
-            if (shouldIntersectObject) {
+            else if (shouldIntersectObject) {
                 if (!geo) {
                     shouldIntersectObject = false;
                 }
@@ -348,18 +351,24 @@ export class Physics {
 
 
             if (shouldIntersectObject) {
-                const raycastMesh = getRaycastMesh(obj);
-                if (raycastMesh) mesh.geometry = raycastMesh as any;
                 const lastResultsCount = results.length;
+                const preference = obj.raycastPreference || "lod";
 
-                let usePrecise = true;
+                let usePrecise = preference !== "bounds";
                 if (options.precise === false) usePrecise = false;
                 usePrecise ||= geo.getAttribute("position")?.array?.length < 64;
                 if (mesh instanceof GroundedSkybox) {
                     usePrecise = false;
                 }
 
-                if (!usePrecise && customRaycast(mesh, raycaster, results)) {
+
+                if (preference === "lod") {
+                    const raycastMesh = getRaycastMesh(obj);
+                    if (raycastMesh) mesh.geometry = raycastMesh as any;
+                }
+
+
+                if (!usePrecise && boundsRaycast(mesh, raycaster, results)) {
                     // did handle raycast
                 }
                 else if (options.useAcceleratedRaycast !== false) {
@@ -369,13 +378,16 @@ export class Physics {
                     raycaster.intersectObject(mesh, false, results);
                 }
 
+                // Restore
+                mesh.geometry = geo;
+
+                // Debug
                 if (debugPhysics && results.length != lastResultsCount) {
                     const latestResult = results[results.length - 1];
-                    const col = raycastMesh ? 0x88dd55 : 0x770000;
-                    Gizmos.DrawWireSphere(latestResult.point, .1, col, 1, false);
-                    Gizmos.DrawWireMesh({ mesh: obj as Mesh, depthTest: false, duration: .2, color: col });
+                    Gizmos.DrawWireSphere(latestResult.point, .1, 0x770000, 1, false);
+                    Gizmos.DrawWireMesh({ mesh: obj as Mesh, depthTest: false, duration: .2, color: 0x770000 });
                 }
-                mesh.geometry = geo;
+
             }
 
             if (options.recursive !== false) {
@@ -481,7 +493,7 @@ const normalUpMatrix = new Matrix3();
 /**
  * @returns false if custom raycasting can not run, otherwise true
  */
-function customRaycast(mesh: Mesh, raycaster: Raycaster, results: Intersection[]): boolean {
+function boundsRaycast(mesh: Mesh, raycaster: Raycaster, results: Intersection[]): boolean {
     const originalComputeIntersectionsFn = mesh["_computeIntersections"];
     if (!originalComputeIntersectionsFn) {
         return false;
@@ -560,6 +572,9 @@ declare module 'three' {
 
 
 namespace NEMeshBVH {
+
+    let failedToCreateMeshBVHWorker = 0;
+
     export function runMeshBVHRaycast(method: Raycaster | Sphere, mesh: Mesh, results: Intersection[], context: Pick<Context, "xr">, options: { allowSlowRaycastFallback?: boolean }): boolean {
         if (!mesh.geometry) {
             return false;
@@ -618,6 +633,10 @@ namespace NEMeshBVH {
                 || geom.index && geom.index?.["isInterleavedBufferAttribute"]) {
                 canUseWorker = false;
             }
+            else if (failedToCreateMeshBVHWorker > 10) {
+                // if we failed to create a worker multiple times, don't try again
+                canUseWorker = false;
+            }
 
             // if we have a worker use that
             if (canUseWorker && _GenerateMeshBVHWorker) {
@@ -634,8 +653,23 @@ namespace NEMeshBVH {
                     }
                     // if there are no workers available, create a new one
                     if (!workerInstance && workerInstances.length < 3) {
-                        workerInstance = new _GenerateMeshBVHWorker();
-                        workerInstances.push(workerInstance);
+                        try {
+                            workerInstance = new _GenerateMeshBVHWorker();
+                            workerInstances.push(workerInstance);
+                        }
+                        catch (err) {
+                            const isSecurityError = err instanceof DOMException && err.name === "SecurityError";
+                            if (isSecurityError) {
+                                console.warn("Failed to create MeshBVH worker, falling back to main thread generation. This can happen when running from file://, if the browser does not support workers or if the browser is blocking workers for other reasons.");
+                                console.debug(err);
+                                failedToCreateMeshBVHWorker += 10;
+                            }
+                            else {
+                                console.error("Failed to create MeshBVH worker");
+                                console.debug(err);
+                            }
+                            failedToCreateMeshBVHWorker++;
+                        }
                     }
 
                     if (workerInstance != null && !workerInstance.running) {
@@ -794,6 +828,9 @@ namespace NEMeshBVH {
                 if (debugPhysics || isDevEnvironment()) {
                     console.warn("Failed to setup mesh bvh worker");
                 }
+                else {
+                    console.debug("Failed to setup mesh bvh worker", _err);
+                }
             })
             .finally(() => {
                 isRequestingWorker = false;

package/src/engine/js-extensions/Object3D.ts

@@ -34,6 +34,23 @@ declare module 'three' {
          */
         hideFlags: HideFlags;
 
+        /**
+         * If false the object will be ignored for raycasting (e.g. pointer events). Default is true.
+         * @default true
+         */
+        raycastAllowed: boolean;
+
+        /**
+         * Set a raycast preference for the object: 
+         * - `lod` will use the raycast mesh lod if available (default). This is usually a simplified mesh for raycasting.  
+         * - `bounds` will use the bounding box of the object for raycasting. This is very fast but not very accurate.  
+         * - `full` will use the full mesh for raycasting. This is the most accurate but also the slowest option.
+         * 
+         * **NOTE:** Needle Engine's Raycast system will use Mesh BVH by default - so event 'full' is usually faster than default three.js raycasting.
+         */
+        raycastPreference?: 'lod' | 'bounds' | 'full';
+
+
         /**
          * Add a Needle Engine component to the {@link Object3D}.
          * @param comp The component instance or constructor to add.
@@ -242,6 +259,21 @@ if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "activeSelf")) {
     });
 }
 
+
+if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "raycastAllowed")) {
+    Object.defineProperty(Object3D.prototype, "raycastAllowed", {
+        get: function () {
+            return this.userData && this.userData.raycastAllowed !== false;
+        },
+        set: function (val: boolean) {
+            const self = this as Object3D;
+            if (!self.userData) self.userData = {};
+            self.userData.raycastAllowed = val;
+        }
+    });
+}
+
+
 if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "worldPosition")) {
     Object.defineProperty(Object3D.prototype, "worldPosition", {
         get: function () {

package/src/engine/physics/workers/mesh-bvh/GenerateMeshBVHWorker.js

@@ -4,14 +4,16 @@ import { MeshBVH } from 'three-mesh-bvh';
 // Modified according to https://github.com/gkjohnson/three-mesh-bvh/issues/636#issuecomment-2209571751
 import { WorkerBase } from "three-mesh-bvh/src/workers/utils/WorkerBase.js";
 
+
 export class GenerateMeshBVHWorker extends WorkerBase {
 
 	constructor() {
 		// TODO: make mesh bvh worker "work" for prebundled CDN loading
 		// https://linear.app/needle/issue/NE-6572
 		// Also we don't use toplevel imports to not completely fail to load needle-engine where loading the worker fails
-		// const url = new URL('three-mesh-bvh/src/workers/generateMeshBVH.worker.js', import.meta.url)
+		// const meta_url = import.meta.url;
 		// const getWorker = () => new Worker(url, { type: 'module' })
+		// console.log(meta_url, url, getWorker());
 		super(new Worker(new URL('three-mesh-bvh/src/workers/generateMeshBVH.worker.js', import.meta.url), { type: 'module' }));
 		this.name = 'GenerateMeshBVHWorker';
 

package/src/engine-components/Renderer.ts

@@ -359,7 +359,7 @@ export class Renderer extends Behaviour implements IRenderer {
     get sharedMaterials(): SharedMaterialArray {
 
         // @ts-ignore (original materials will be set during deserialization)
-        if(this._originalMaterials === undefined) return null;
+        if (this._originalMaterials === undefined) return null;
 
         // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
         if (this.__isDeserializing === true) return null;
@@ -476,41 +476,43 @@ export class Renderer extends Behaviour implements IRenderer {
                 ? this._lightmapTextureOverride
                 : this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
             if (tex) {
-                if (!this._lightmaps)
-                    this._lightmaps = [];
-
-                if (type === "Mesh") {
-                    const mat = this.gameObject["material"];
-                    if (!mat?.isMeshBasicMaterial) {
-                        if (this._lightmaps.length <= 0) {
-                            const rm = new RendererLightmap(this.gameObject as any as Mesh, this.context);
-                            this._lightmaps.push(rm);
-                        }
-                        const rm = this._lightmaps[0];
-                        rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                    }
-                    else {
-                        if (mat)
-                            console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name)
-                    }
-                }
-                // 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 (let i = 0; i < this.gameObject.children.length; i++) {
-                        const child = this.gameObject.children[i];
-                        if (!child["material"]?.isMeshBasicMaterial) {
-                            let rm: RendererLightmap | undefined = undefined;
-                            if (i >= this._lightmaps.length) {
-                                rm = new RendererLightmap(child as Mesh, this.context);
-                                this._lightmaps.push(rm);
-                            }
-                            else
-                                rm = this._lightmaps[i];
-                            rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                        }
-                    }
-                }
+                if (!this._lightmaps) this._lightmaps = [];
+
+
+                const rm = new RendererLightmap(this);
+                rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                this._lightmaps.push(rm);
+
+                // if (type === "Mesh") {
+                //     const mat = this.gameObject["material"];
+                //     if (!mat?.isMeshBasicMaterial) {
+                //         if (this._lightmaps.length <= 0) {
+                //         }
+                //         const rm = this._lightmaps[0];
+                //         rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                //     }
+                //     else {
+                //         if (mat)
+                //             console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name)
+                //     }
+                // }
+                // // 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 (let i = 0; i < this.gameObject.children.length; i++) {
+                //         const child = this.gameObject.children[i];
+                //         if (!child["material"]?.isMeshBasicMaterial) {
+                //             let rm: RendererLightmap | undefined = undefined;
+                //             if (i >= this._lightmaps.length) {
+                //                 rm = new RendererLightmap(child as Mesh, this.context);
+                //                 this._lightmaps.push(rm);
+                //             }
+                //             else
+                //                 rm = this._lightmaps[i];
+                //             rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                //         }
+                //     }
+                // }
             }
             else {
                 if (debugRenderer) console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
@@ -742,7 +744,6 @@ export class Renderer extends Behaviour implements IRenderer {
             const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
         }
-
         if (this._lightmaps) {
             for (const lm of this._lightmaps) {
                 lm.updateLightmapUniforms(material);

package/src/engine-components/RendererLightmap.ts

@@ -1,8 +1,9 @@
 import { NEEDLE_progressive } from "@needle-tools/gltf-progressive";
-import { Material, Mesh, MeshPhysicalMaterial, ShaderMaterial, Texture, Vector4, WebGLProgramParametersWithUniforms } from "three";
+import { Group, Material, Mesh, MeshPhysicalMaterial, Object3D, ShaderMaterial, Texture, Vector4, WebGLProgramParametersWithUniforms } from "three";
 
 import type { Context } from "../engine/engine_setup.js";
 import { getParam } from "../engine/engine_utils.js";
+import { type Renderer } from "./Renderer.js";
 
 const debug = getParam("debuglightmaps");
 
@@ -31,15 +32,15 @@ export class RendererLightmap {
     private lightmapIndex: number = -1;
     private lightmapScaleOffset: Vector4 = new Vector4(1, 1, 0, 0);
 
-    private context: Context;
-    private gameObject: Mesh;
+    private readonly renderer: Renderer;
+    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(gameObject: Mesh, context: Context) {
-        this.gameObject = gameObject;
-        this.context = context;
+    constructor(renderer: Renderer) {
+        this.renderer = renderer;
     }
 
     init(lightmapIndex: number, lightmapScaleOffset: Vector4, lightmapTexture: Texture) {
@@ -55,7 +56,7 @@ export class RendererLightmap {
             console.log("Lightmap:", this.gameObject.name, lightmapIndex, "\nScaleOffset:", lightmapScaleOffset, "\nTexture:", lightmapTexture)
             this.setLightmapDebugMaterial();
         }
-        else if(debug) console.log("Use debuglightmaps=show to render lightmaps only in the scene.")
+        else if (debug) console.log("Use debuglightmaps=show to render lightmaps only in the scene.")
         this.applyLightmap();
     }
 
@@ -77,42 +78,38 @@ export class RendererLightmap {
             return;
         }
 
-        if (this.gameObject.type === "Group") {
-            if (this.gameObject["Needle:Multimaterial-LightmapWarning"] === undefined) {
-                this.gameObject["Needle:Multimaterial-LightmapWarning"] = true;
-                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;
-        }
+        const mesh = this.gameObject as unknown as (Mesh | Group);
+        this.ensureLightmapUvs(mesh);
 
-        console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
+        for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
 
-        const mesh = this.gameObject as unknown as Mesh;
-        if (!mesh.geometry.getAttribute("uv1"))
-            mesh.geometry.setAttribute("uv1", mesh.geometry.getAttribute("uv"));
+            const mat = this.renderer.sharedMaterials[i];
+            if (!mat) continue;
 
-        if (Array.isArray(this.gameObject.material)) {
-            const mats: Material[] = this.gameObject.material;
-            for (let i = 0; i < mats.length; i++) {
-                mats[i] = this.ensureLightmapMaterial(mats[i]);
+            const newMat = this.ensureLightmapMaterial(mat);
+            if (mat !== newMat) {
+                this.renderer.sharedMaterials[i] = newMat;
             }
         }
-        else {
-            this.gameObject.material = this.ensureLightmapMaterial(this.gameObject.material);
-        }
 
         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;
-            const mat = this.gameObject.material;
-            if (Array.isArray(mat)) {
-                for (const entry of mat) {
-                    this.assignLightmapTexture(entry as any);
+            for (const mat of this.renderer.sharedMaterials) {
+                if (mat) this.assignLightmapTexture(mat);
+            }
+        }
+    }
 
-                }
+    private ensureLightmapUvs(object: Object3D | Group | Mesh) {
+        if (object instanceof Mesh) {
+            if (!object.geometry.getAttribute("uv1")) {
+                object.geometry.setAttribute("uv1", object.geometry.getAttribute("uv"));
             }
-            else if (mat) {
-                this.assignLightmapTexture(mat);
+        }
+        else if (object instanceof Group) {
+            for (const child of object.children) {
+                this.ensureLightmapUvs(child);
             }
         }
     }
@@ -127,7 +124,7 @@ export class RendererLightmap {
             if (material["NEEDLE:lightmap-material-version"] == undefined) {
                 if (debug) console.warn("Cloning material for lightmap " + material.name);
                 const mat: Material = material.clone();
-                if(!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
+                if (!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
                 material = mat;
                 material.onBeforeCompile = this.onBeforeCompile;
             }
@@ -152,6 +149,7 @@ export class RendererLightmap {
 
         // assign the lightmap
         material.lightMap = this.lightmapTexture;
+        material.needsUpdate = true;
         // store the version of the material
         material["NEEDLE:lightmap-material-version"] = material.version;
     }