@needle-tools/engine 2.65.2-pre → 2.67.0-pre

package/src/engine/engine_physics.ts

@@ -15,10 +15,11 @@ import {
 import { InstancingUtil } from './engine_instancing';
 import { foreachComponent } from './engine_gameobject';
 
-import RAPIER, { ActiveEvents, CoefficientCombineRule, Collider, ColliderDesc, EventQueue, JointData, RigidBody, RigidBodyType, World } from '@dimforge/rapier3d-compat';
+import RAPIER, { ActiveEvents, CoefficientCombineRule, Collider, ColliderDesc, EventQueue, JointData, QueryFilterFlags, RigidBody, RigidBodyType, ShapeColliderTOI, World } from '@dimforge/rapier3d-compat';
 import { CollisionDetectionMode, PhysicsMaterialCombine } from '../engine/engine_physics.types';
 import { Gizmos } from './engine_gizmos';
 import { Mathf } from './engine_math';
+import { Layer } from './extensions/NEEDLE_animator_controller_model';
 export type Rapier = typeof RAPIER;
 
 
@@ -41,6 +42,8 @@ const $bodyKey = Symbol("physics body");
 const $colliderRigidbody = Symbol("rigidbody");
 // const $removed = Symbol("removed");
 
+const layerMaskHelper: Layers = new Layers();
+
 export class RaycastOptions {
     ray: Ray | undefined = undefined;
     cam: Camera | undefined | null = undefined;
@@ -52,6 +55,7 @@ export class RaycastOptions {
     minDistance: number | undefined = undefined;
     maxDistance: number | undefined = undefined;
     lineThreshold: number | undefined = undefined;
+    /** raw layer mask, use setLayer to set an individual layer active */
     layerMask: Layers | number | undefined = undefined;
     ignore: Object3D[] | undefined = undefined;
 
@@ -61,6 +65,13 @@ export class RaycastOptions {
         this.screenPoint.y = -(oy / window.innerHeight) * 2 + 1;
     }
 
+    /** sets one layer for raycasting (e.g. layer 4, only objects on layer 4 will then be hit) */
+    setLayer(layer: number) {
+        layerMaskHelper.set(layer);
+        this.layerMask = layerMaskHelper;
+    }
+
+    /** sets the layer.mask value directly, use setLayer if you want to set e.g. an individual layer only active. See https://threejs.org/docs/#api/en/core/Layers for more information about layers */
     setMask(mask: number) {
         if (!this.layerMask) this.layerMask = new Layers();
         const lm = this.layerMask as Layers;
@@ -69,7 +80,7 @@ export class RaycastOptions {
         else this.layerMask = mask;
     }
 
-    public static AllLayers = 0xFFFFFFFF;
+    public static readonly AllLayers = 0xFFFFFFFF;
 }
 
 export class SphereIntersection implements Intersection {
@@ -83,12 +94,22 @@ export class SphereIntersection implements Intersection {
     }
 }
 
+export class SphereOverlapResult {
+    object: Object3D;
+    collider: ICollider;
+    constructor(object: Object3D, collider: ICollider) {
+        this.object = object;
+        this.collider = collider;
+    }
+}
+
 declare type PhysicsRaycastResult = {
     point: Vector3,
     normal?: Vector3,
     collider?: ICollider
 }
 
+
 export class Physics {
 
     // raycasting
@@ -107,6 +128,12 @@ export class Physics {
 
     private sphereResults: Array<Intersection> = new Array<Intersection>();
     private sphereMask: Layers = new Layers();
+    /** Test overlapping of a sphere with the threejs geometry. This does not use colliders. This does not return an exact intersection point (intersections returned contain the object and the world position of the object that is being hit)
+     * For a more accurate test use the physics engine's collider overlap test (see sphereOverlapPhysics)
+     * @param spherePos the center of the sphere in world space
+     * @param radius the radius of the sphere
+     * @param traverseChildsAfterHit if false it will stop after the first hit. If true it will continue to traverse and add all hits to the result array
+     */
     public sphereOverlap(spherePos: Vector3, radius: number, traverseChildsAfterHit: boolean = true): Array<Intersection> {
         this.sphereResults.length = 0;
         if (!this.context.scene) return this.sphereResults;
@@ -130,10 +157,9 @@ export class Physics {
                 if (mesh.matrixWorldNeedsUpdate) mesh.updateMatrixWorld();
                 const test = this.tempBoundingBox.copy(geo.boundingBox).applyMatrix4(mesh.matrixWorld);
                 if (sp.intersectsBox(test)) {
-                    // console.log(obj, obj.layers.test(mask), obj.layers.mask, mask.mask);
                     const wp = getWorldPosition(obj);
                     const dist = wp.distanceTo(sp.center);
-                    const int = new SphereIntersection(obj, dist, sp.center.clone());
+                    const int = new SphereIntersection(obj, dist, wp);
                     results.push(int);
                     if (!traverseChildsAfterHit) return;
                 }
@@ -157,6 +183,8 @@ export class Physics {
     /** raycast against rendered three objects. This might be very slow depending on your scene complexity.
      * We recommend setting objects to IgnoreRaycast layer (2) when you don't need them to be raycasted.
      * Raycasting SkinnedMeshes is specially expensive.
+     * Use raycastPhysics for raycasting against physic colliders only. Depending on your scenario this might be faster.
+     * @param options raycast options. If null, default options will be used.
      */
     public raycast(options: RaycastOptions | null = null): Array<Intersection> {
         if (!options) options = this.defaultRaycastOptions;
@@ -174,7 +202,8 @@ export class Physics {
         else {
             const cam = options.cam ?? this.context.mainCamera;
             if (!cam) {
-                console.error("Can not perform raycast - no main camera found");
+                if (debugPhysics)
+                    console.error("Can not perform raycast - no main camera found");
                 if (this.defaultRaycastOptions.results) this.defaultRaycastOptions.results.length = 0;
                 return this.defaultRaycastOptions.results ?? [];
             }
@@ -199,6 +228,7 @@ export class Physics {
                 rc.layers.mask = options.layerMask.mask;
             else
                 rc.layers.mask = options.layerMask;
+            console.log(rc.layers.mask, options.layerMask);
         }
         else {
             rc.layers.enableAll();
@@ -222,8 +252,12 @@ export class Physics {
 
     private rapierRay = new RAPIER.Ray({ x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 1 });
     private raycastVectorsBuffer = new CircularBuffer(() => new Vector3(), 10);
-
-    /** raycast against colliders */
+    /** Fast raycast against physics colliders
+     * @param origin ray origin in screen or worldspace
+     * @param direction ray direction in worldspace
+     * @param maxDistance max distance to raycast
+     * @param solid if true it will also hit the collider if origin is already inside it
+     */
     public raycastPhysicsFast(origin: Vec2 | Vec3, direction: Vec3 | undefined = undefined, maxDistance: number = Infinity, solid: boolean = true)
         : null | { point: Vector3, collider: ICollider } {
 
@@ -285,6 +319,72 @@ export class Physics {
         return ray;
     }
 
+
+    private rapierSphere: RAPIER.Ball | null = null;
+    private rapierColliderArray: Array<SphereOverlapResult> = [];
+    private readonly rapierIdentityRotation = { x: 0, y: 0, z: 0, w: 1 };
+    private readonly rapierForwardVector = { x: 0, y: 0, z: 1 };
+    /** Precice sphere overlap detection using rapier against colliders
+     * @param point center of the sphere in worldspace
+     * @param radius radius of the sphere
+     * @returns array of colliders that overlap with the sphere. Note: they currently only contain the collider and the gameobject
+     */
+    public sphereOverlapPhysics(point: Vector3, radius: number): Array<SphereOverlapResult> {
+        this.rapierColliderArray.length = 0;
+        if (!this.world) return this.rapierColliderArray;
+        if (!this.rapierSphere)
+            this.rapierSphere = new RAPIER.Ball(radius);
+        this.rapierSphere.radius = radius;
+
+        this.world.intersectionsWithShape(point, this.rapierIdentityRotation, this.rapierSphere, col => {
+            const collider = col[$componentKey] as ICollider
+            // if (collider.gameObject.layers.isEnabled(2)) return true;
+            const intersection = new SphereOverlapResult(collider.gameObject, collider);
+            this.rapierColliderArray.push(intersection);
+            return true; // Return `false` instead if we want to stop searching for other colliders that contain this point.
+        }, QueryFilterFlags.EXCLUDE_SENSORS, undefined, undefined, undefined,
+            col => {
+                const collider = col[$componentKey] as ICollider
+                return collider.gameObject.layers.isEnabled(2) == false
+            }
+        );
+        return this.rapierColliderArray;
+
+
+        // TODO: this only returns one hit
+        // let filterGroups = 0xffffffff;
+        // filterGroups &= ~(1 << 2);
+        // const hit: ShapeColliderTOI | null = this.world.castShape(point,
+        //     this.rapierIdentityRotation,
+        //     this.rapierForwardVector,
+        //     this.rapierSphere,
+        //     0,
+        //     QueryFilterFlags.EXCLUDE_SENSORS,
+        //     // filterGroups,
+        // );
+        // // console.log(hit);
+        // if (hit) {
+        //     const collider = hit.collider[$componentKey] as ICollider
+        //     const intersection = new SphereOverlapResult(collider.gameObject);
+        //     this.rapierColliderArray.push(intersection);
+        //     // const localpt = hit.witness2;
+        //     // // const normal = hit.normal2;
+        //     // const hitPoint = new Vector3(localpt.x, localpt.y, localpt.z);
+        //     // // collider.gameObject.localToWorld(hitPoint);
+        //     // // const normalPt = new Vector3(normal.x, normal.y, normal.z);
+        //     // // const mat = new Matrix4().setPosition(point).scale(new Vector3(radius, radius, radius));
+        //     // // hitPoint.applyMatrix4(mat);
+        //     // console.log(hit.witness2)
+        //     // // hitPoint.add(point);
+        //     // const dist = hitPoint.distanceTo(point);
+        // }
+
+        // return this.rapierColliderArray;
+    }
+
+
+
+
     // physics simulation
 
     enabled: boolean = true;
@@ -352,42 +452,58 @@ export class Physics {
 
     addBoxCollider(collider: ICollider, center: Vector3, size: Vector3) {
         if (!this.enabled) {
-            if(debugPhysics) console.warn("Physics is disabled");
+            if (debugPhysics) console.warn("Physics are disabled");
             return;
         }
         const obj = collider.gameObject;
         const scale = getWorldScale(obj, this._tempPosition).multiply(size);
         scale.multiplyScalar(0.5);
+
+        // prevent negative scale
+        if (scale.x < 0)
+            scale.x = Math.abs(scale.x);
+        if (scale.y < 0)
+            scale.y = Math.abs(scale.y);
+        if (scale.z < 0)
+            scale.z = Math.abs(scale.z);
+
         const desc = ColliderDesc.cuboid(scale.x, scale.y, scale.z);
+        // const objectLayerMask = collider.gameObject.layers.mask;
+        // const mask = objectLayerMask & ~2;
+        // desc.setCollisionGroups(objectLayerMask);
         this.createCollider(collider, desc, center);
     }
 
     addSphereCollider(collider: ICollider, center: Vector3, radius: number) {
         if (!this.enabled) {
-            if(debugPhysics) console.warn("Physics is disabled");
+            if (debugPhysics) console.warn("Physics are disabled");
             return;
         }
         const obj = collider.gameObject;
         const scale = getWorldScale(obj, this._tempPosition).multiplyScalar(radius);
+        // Prevent negative scales
+        scale.x = Math.abs(scale.x);
         const desc = ColliderDesc.ball(scale.x);
         this.createCollider(collider, desc, center);
     }
 
     addCapsuleCollider(collider: ICollider, center: Vector3, height: number, radius: number) {
         if (!this.enabled) {
-            if(debugPhysics) console.warn("Physics is disabled");
+            if (debugPhysics) console.warn("Physics are disabled");
             return;
         }
         const obj = collider.gameObject;
         const scale = getWorldScale(obj, this._tempPosition);
-        if (debugPhysics) console.log("capsule scale", scale, height, radius);
+        // Prevent negative scales
+        scale.x = Math.abs(scale.x);
+        scale.y = Math.abs(scale.y);
         const desc = ColliderDesc.capsule(height * .5 * scale.y - radius, radius * scale.x);
         this.createCollider(collider, desc, center);
     }
 
     addMeshCollider(collider: ICollider, mesh: Mesh, convex: boolean, scale: Vector3) {
         if (!this.enabled) {
-            if(debugPhysics) console.warn("Physics is disabled");
+            if (debugPhysics) console.warn("Physics are disabled");
             return;
         }
         const geo = mesh.geometry;

package/src/engine/engine_scenetools.ts

@@ -88,7 +88,6 @@ function invokeEvents(type: GltfLoadEventType, event: GltfLoadEvent) {
 async function handleLoadedGltf(context: Context, gltfId: string, gltf, seed: number | null | UIDProvider, componentsExtension) {
     if (printGltf)
         console.log(gltf);
-    await context.assets.registerGltf(gltf);
     await getLoader().createBuiltinComponents(context, gltfId, gltf, seed, componentsExtension);
 
     // load and assign animation

package/src/engine/engine_serialization_core.ts

@@ -614,7 +614,13 @@ export function assign(target: any, source: any, info?: ImplementationInformatio
 
     for (const key of Object.keys(source)) {
         const desc = getPropertyDescriptor(target, key);
+
         if (onlyDeclared && desc === undefined) continue;
+
+        if (typeof desc?.value == "function") {
+            // arrow functions are defined as properties on the object
+            continue;
+        }
         if (!desc || desc.writable === true) {
             target[key] = source[key];
         }

package/src/engine/engine_setup.ts

@@ -8,8 +8,7 @@ import { NetworkConnection } from './engine_networking';
 import * as looputils from './engine_mainloop_utils';
 import * as utils from "./engine_utils";
 
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
+import { EffectComposer, RenderPass } from "postprocessing";
 
 import { AssetDatabase } from './engine_assetdatabase';
 
@@ -323,7 +322,8 @@ export class Context implements IContext {
 			this.renderer.domElement.style.height = "100%";
 			if (this.composer) {
 				this.composer.setSize?.call(this.composer, width, height);
-				this.composer.setPixelRatio?.call(this.composer, window.devicePixelRatio);
+				if("setPixelRatio" in this.composer && typeof this.composer.setPixelRatio === "function")
+					this.composer.setPixelRatio?.call(this.composer, window.devicePixelRatio);
 			}
 		}
 	}
@@ -571,7 +571,7 @@ export class Context implements IContext {
 			}
 			else {
 				ContextRegistry.dispatchCallback(ContextEvent.MissingCamera, this);
-				if (!this.mainCamera)
+				if (!this.mainCamera && !this.isManagedExternally)
 					console.error("MISSING camera", this);
 			}
 		}
@@ -608,6 +608,7 @@ export class Context implements IContext {
 
 	private render(_, frame) {
 
+
 		this._currentFrameEvent = -1;
 
 		if (this.onHandlePaused()) return;
@@ -744,6 +745,10 @@ export class Context implements IContext {
 		this.connection.sendBufferedMessagesNow();
 
 		this._stats?.end();
+
+		if (this.time.frame === 1) {
+			this.domElement.dispatchEvent(new CustomEvent("ready"));
+		}
 	}
 
 	renderNow(camera?: Camera) {
@@ -753,10 +758,15 @@ export class Context implements IContext {
 		}
 		this._isRendering = true;
 		this.renderRequiredTextures();
+		// if (camera === this.mainCameraComponent?.cam) {
+		// 	if (this.mainCameraComponent.activeTexture) {
+				
+		// 	}
+		// }
 		if (this.composer && !this.isInXR) {
 			this.composer.render();
 		}
-		else if (this.mainCamera) {
+		else if (camera) {
 			this.renderer.render(this.scene, camera);
 		}
 		this._isRendering = false;

package/src/engine/engine_texture.ts

@@ -1,6 +1,55 @@
-import { WebGLRenderTarget } from "three"
+import { Camera, Mesh, Object3D, Texture, WebGLRenderer, WebGLRenderTarget } from "three";
+import { EffectComposer } from "postprocessing";
+import { findUsers } from "./engine_assetdatabase";
+
+
+const _prevVisible = Symbol("previous-visibility");
+
+export class RenderTexture extends WebGLRenderTarget {
+
+
+    render(scene: Object3D, camera: Camera, renderer: WebGLRenderer | EffectComposer) {
+        if (renderer instanceof EffectComposer) {
+            if (!this["_unsupported_effectcomposer_warning"]) {
+                console.warn("RenderTexture.render() does not yet support EffectComposer");
+                this["_unsupported_effectcomposer_warning"] = true;
+            }
+        }
+        else {
+            this.onBeforeRender();
+            const prev = renderer.getRenderTarget();
+            renderer.setRenderTarget(this);
+            renderer.render(scene, camera);
+            renderer.setRenderTarget(prev);
+            this.onAfterRender();
+        }
+    }
+
+
+    private static _userSet: Set<object> = new Set();
+
+    private onBeforeRender() {
+        RenderTexture._userSet.clear();
+        const users = findUsers(this.texture, true, null, RenderTexture._userSet);
+        for (const user of users) {
+            if (user instanceof Mesh) {
+                user[_prevVisible] = user.visible;
+                user.visible = false;
+            }
+        }
+    }
+
+    private onAfterRender() {
+        for (const user of RenderTexture._userSet) {
+            if (user instanceof Mesh) {
+                user.visible = user[_prevVisible];
+            }
+        }
+        RenderTexture._userSet.clear();
+    }
+}
+
+
+
+
 
-export class RenderTexture extends WebGLRenderTarget
-{
-    
-}

package/src/engine/engine_types.ts

@@ -1,3 +1,4 @@
+import { RenderTexture } from "./engine_texture";
 import { Camera, Color, Material, Object3D, Vector3, Quaternion, Ray, Scene, Renderer, WebGLRenderer } from "three";
 import { RGBAColor } from "../engine-components/js-extensions/RGBAColor";
 import { CollisionDetectionMode, PhysicsMaterial, RigidbodyConstraints } from "./engine_physics.types";
@@ -72,12 +73,14 @@ export declare interface IGameObject extends Object3D {
 
     activeSelf: boolean;
 
+    destroy(): void;
+
     /** NOTE: this is just a wrapper for devs coming from Unity. Please use this.gameObject instead. In Needle Engine this.gameObject is the same as this.gameObject.transform. See the tutorial link below for more information
      * @augments Object3D
      * @tutorial https://fwd.needle.tools/needle-engine/docs/transform
      * */
     get transform(): Object3D;
-    
+
     addNewComponent<T>(type: Constructor<T>): T | null;
     removeComponent(comp: IComponent): IComponent;
     getOrAddComponent<T>(typeName: Constructor<T> | null): T;
@@ -161,6 +164,7 @@ export interface IComponent {
 export declare interface ICamera extends IComponent {
     get isCamera(): boolean;
     applyClearFlagsIfIsActiveCamera(): unknown;
+    applyClearFlags();
     buildCamera();
     get cam(): Camera;
     nearClipPlane: number;
@@ -171,6 +175,7 @@ export declare interface ICamera extends IComponent {
     aspect: number;
     fieldOfView?: number;
     screenPointToRay(x: number, y: number, ray?: Ray): Ray;
+    targetTexture: RenderTexture | null;
 }
 
 export declare interface ICameraController {

package/src/engine/engine_utils.ts

@@ -44,8 +44,9 @@ export class CircularBuffer<T> {
 let saveParams: boolean = false;
 const requestedParams: Array<string> = [];
 setTimeout(() => {
-    if (saveParams)
-        console.log(requestedParams);
+    if (saveParams) {
+        console.log(requestedParams.sort());
+    }
 }, 100);
 
 export function getUrlParams() {
@@ -61,7 +62,7 @@ export function getParam(paramName: string): string | boolean | number {
         const val = urlParams.get(paramName);
         if (val) {
             const num = Number(val);
-            if (!isNaN(num)) return num; 
+            if (!isNaN(num)) return num;
             return val;
         }
         else return true;
@@ -83,10 +84,10 @@ export function setParam(paramName: string, paramValue: string): void {
 export function setParamWithoutReload(paramName: string, paramValue: string | null, appendHistory = true): void {
     const urlParams = getUrlParams();
     if (urlParams.has(paramName)) {
-        if(paramValue === null) urlParams.delete(paramName);
+        if (paramValue === null) urlParams.delete(paramName);
         else urlParams.set(paramName, paramValue);
     }
-    else if(paramValue !== null)
+    else if (paramValue !== null)
         urlParams.append(paramName, paramValue);
     if (appendHistory) pushState(paramName, urlParams);
     else setState(paramName, urlParams);

package/src/engine/extensions/NEEDLE_progressive.ts

@@ -13,6 +13,7 @@ declare type ProgressiveTextureSchema = {
     uri: string;
     guid: string;
 }
+const $progressiveTextureExtension = Symbol("needle-progressive-texture");
 
 
 const debug_toggle_maps: Map<Material, { [key: string]: { original: Texture, lod0: Texture } }> = new Map();
@@ -35,6 +36,7 @@ if (debug) {
     });
 }
 
+
 export class NEEDLE_progressive implements GLTFLoaderPlugin {
 
     static assignTextureLOD(context: Context, source: SourceIdentifier | undefined, material: Material, level: number = 0) {
@@ -86,21 +88,6 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
         this.context = context;
     }
 
-    private _loading: number[] = [];
-
-    // beforeRoot(): null {
-    //     console.log("BEFORE ROOT", this.parser);
-    //     return null;
-    // }
-
-    // loadTexture(index: number): Promise<Texture> | null {
-    //     console.log(index, this._loading);
-    //     if (this._loading.includes(index)) return null;
-    //     const textureInfo = this.parser.json.textures[index];
-    //     if (debug)
-    //         console.log(index, textureInfo);
-    //     return null;
-    // }
 
     afterRoot(gltf: GLTF): null {
         if (debug)
@@ -110,10 +97,12 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
                 const ext: ProgressiveTextureSchema = textureInfo?.extensions[EXTENSION_NAME];
                 if (ext) {
                     const prom = this.parser.getDependency("texture", index);
-                    this._loading.splice(this._loading.indexOf(index), 1);
                     prom.then(t => {
-                        if (debug) console.log("register texture", t.name, t.uuid, ext);
-                        t.userData.deferred = ext;
+                        if (debug) console.log("> Progressive: register", t.name, t.uuid, ext);
+                        // Put the extension info into the source (seems like tiled textures are cloned and the userdata etc is not properly copied BUT the source of course is not cloned)
+                        // see https://github.com/needle-tools/needle-engine-support/issues/133
+                        if (t.source)
+                            t.source[$progressiveTextureExtension] = ext;
                         NEEDLE_progressive.cache.set(t.uuid, ext);
                     });
                 }
@@ -130,17 +119,24 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
     private static async getOrLoadTexture(context: Context, source: SourceIdentifier | undefined, material: Material, slot: string, current: Texture, _level: number): Promise<Texture | null> {
 
         const key = current.uuid;
-        const ext: ProgressiveTextureSchema | undefined = NEEDLE_progressive.cache.get(key);// || current.userData.deferred;
-        if (ext) {
+
+        let progressiveInfo: ProgressiveTextureSchema | undefined;
+
+        // See https://github.com/needle-tools/needle-engine-support/issues/133
+        if(current.source && current.source[$progressiveTextureExtension])
+            progressiveInfo = current.source[$progressiveTextureExtension];
+        if(!progressiveInfo) progressiveInfo = NEEDLE_progressive.cache.get(key);
+
+        if (progressiveInfo) {
             if (debug)
-                console.log(key, ext.uri, ext.guid);
-            const uri = getPath(source, ext.uri);
+                console.log(key, progressiveInfo.uri, progressiveInfo.guid);
+            const uri = getPath(source, progressiveInfo.uri);
             if (uri.endsWith(".glb") || uri.endsWith(".gltf")) {
-                if (!ext.guid) {
-                    console.warn("missing pointer for glb/gltf texture", ext);
+                if (!progressiveInfo.guid) {
+                    console.warn("missing pointer for glb/gltf texture", progressiveInfo);
                     return null;
                 }
-                const resolveKey = uri + "_" + ext.guid;
+                const resolveKey = uri + "_" + progressiveInfo.guid;
                 if (this.resolved[resolveKey]) {
                     if (debug) console.log("Texture has already been loaded: " + resolveKey, material.name, slot, current.name);
                     return this.resolved[resolveKey];
@@ -148,16 +144,18 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
 
                 const info = this.onProgressiveLoadStart(context, source, uri, material, slot);
                 try {
-                    if(this.currentlyLoading[resolveKey] !== undefined) {
-                        if(debug)
+                    if (this.currentlyLoading[resolveKey] !== undefined) {
+                        if (debug)
                             console.log("Already loading:", material.name + "." + slot, resolveKey);
                         const tex = await this.currentlyLoading[resolveKey];
                         return tex;
                     }
+                    const ext = progressiveInfo;
                     const request = new Promise<Texture | null>(async (resolve, _) => {
                         const loader = new GLTFLoader();
                         addDracoAndKTX2Loaders(loader, context);
 
+
                         if (debug) console.log("Load " + uri, material.name, slot, ext.guid);
                         if (debug) {
                             await delay(Math.random() * 1000);
@@ -183,10 +181,12 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
                         if (!found)
                             return resolve(null);
 
-                        const tex = await parser.getDependency("texture", index);
-                        tex.encoding = current.encoding;
+                        const tex = await parser.getDependency("texture", index) as Texture;
+                        const source = tex.source;
+                        tex.copy(current);
+                        tex.source = source;
                         if (tex) {
-                            tex.guid = ext.guid;
+                            (tex as any).guid = ext.guid;
                         }
                         this.resolved[resolveKey] = tex as Texture;
                         if (debug)
@@ -209,12 +209,12 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
                     const loader = new TextureLoader();
                     const tex = await loader.loadAsync(uri);
                     if (tex) {
-                        (tex as any).guid = ext.guid;
+                        (tex as any).guid = progressiveInfo.guid;
                         tex.flipY = false;
                         tex.needsUpdate = true;
                         tex.encoding = current.encoding;
                         if (debug)
-                            console.log(ext, tex);
+                            console.log(progressiveInfo, tex);
                     }
                     else if (debug) console.warn("failed loading", uri);
                     return tex;

package/src/engine/extensions/NEEDLE_render_objects.ts

@@ -23,7 +23,10 @@ import {
     DecrementWrapStencilOp,
     InvertStencilOp,
 } from "three";
-import { getParam } from "../engine_utils";
+import { getParam, isDebugMode } from "../engine_utils";
+import { showBalloonWarning } from "../debug";
+import { isUsingInstancing } from "../engine_gameobject";
+import { isLocalNetwork } from "../engine_networking_utils";
 
 const debug = getParam("debugstencil");
 
@@ -62,6 +65,12 @@ export class NEEDLE_render_objects implements GLTFLoaderPlugin {
             const stencil: StencilSettingsModel = settings[i];
             if (matchesLayer(stencil.layer, obj)) {
                 if (debug) console.log(stencil);
+                setTimeout(() => {
+                    if (isLocalNetwork() && isUsingInstancing(obj.gameObject)) {
+                        showBalloonWarning("Stencil not supported on instanced objects");
+                        console.warn("Stencil not supported on instanced objects", obj);
+                    }
+                }, 500)
                 for (let i = 0; i < obj.sharedMaterials.length; i++) {
                     let mat = obj.sharedMaterials[i];
                     if (mat) {