@needle-tools/engine 2.53.0-pre → 2.55.0-pre

package/src/engine/extensions/NEEDLE_progressive.ts

@@ -3,7 +3,7 @@ import { GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/j
 import { SourceIdentifier } from "../engine_types";
 import { Context } from "../engine_setup";
 import { addDracoAndKTX2Loaders } from "../engine_loaders";
-import { getParam, getPath } from "../engine_utils";
+import { delay, getParam, getPath } from "../engine_utils";
 
 export const EXTENSION_NAME = "NEEDLE_progressive";
 
@@ -14,6 +14,7 @@ declare type ProgressiveTextureSchema = {
     guid: string;
 }
 
+
 const debug_toggle_maps: Map<Material, { [key: string]: { original: Texture, lod0: Texture } }> = new Map();
 let show_lod0 = false;
 if (debug) {
@@ -71,7 +72,6 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
         }
     }
 
-
     get name(): string {
         return EXTENSION_NAME;
     }
@@ -125,6 +125,7 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
 
     private static cache = new Map<string, ProgressiveTextureSchema>();
     private static resolved: { [key: string]: Texture } = {};
+    private static currentlyLoading: { [key: string]: Promise<Texture | null> } = {};
 
     private static async getOrLoadTexture(context: Context, source: SourceIdentifier | undefined, material: Material, slot: string, current: Texture, _level: number): Promise<Texture | null> {
 
@@ -145,53 +146,82 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
                     return this.resolved[resolveKey];
                 }
 
-                const loader = new GLTFLoader();
-                addDracoAndKTX2Loaders(loader, context);
-                if (debug) console.log("Load " + uri, material.name, slot, ext.guid);
-                const gltf = await loader.loadAsync(uri);
-                const parser = gltf.parser;
-                if (debug) console.log("Loading finished " + uri, material.name, slot, ext.guid);
-                let index = -1;
-                let found = false;
-                for (const tex of gltf.parser.json.textures) {
-                    index++;
-                    if (tex?.extensions) {
-                        const other: ProgressiveTextureSchema = tex?.extensions[EXTENSION_NAME];
-                        if (other?.guid) {
-                            if (other.guid === ext.guid) {
-                                found = true;
-                                break;
-                                // if (debug)
-                                //     console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material);
-                                // this.resolved[resolveKey] = tex as Texture;
-                                // return tex;
+                const info = this.onProgressiveLoadStart(context, source, uri, material, slot);
+                try {
+                    if(this.currentlyLoading[resolveKey] !== undefined) {
+                        if(debug)
+                            console.log("Already loading:", material.name + "." + slot, resolveKey);
+                        const tex = await this.currentlyLoading[resolveKey];
+                        return tex;
+                    }
+                    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);
+                        }
+
+                        const gltf = await loader.loadAsync(uri);
+                        const parser = gltf.parser;
+                        if (debug) console.log("Loading finished " + uri, material.name, slot, ext.guid);
+                        let index = -1;
+                        let found = false;
+                        for (const tex of gltf.parser.json.textures) {
+                            index++;
+                            if (tex?.extensions) {
+                                const other: ProgressiveTextureSchema = tex?.extensions[EXTENSION_NAME];
+                                if (other?.guid) {
+                                    if (other.guid === ext.guid) {
+                                        found = true;
+                                        break;
+                                    }
+                                }
                             }
                         }
-                    }
-                }
-                if (!found)
-                    return null;
+                        if (!found)
+                            return resolve(null);
 
-                // const index = Number.parseInt(ext.pointer.substring("textures/".length));
-                const tex = await parser.getDependency("texture", index);
-                tex.encoding = current.encoding;
-                if (tex) {
-                    tex.guid = ext.guid;
+                        const tex = await parser.getDependency("texture", index);
+                        tex.encoding = current.encoding;
+                        if (tex) {
+                            tex.guid = ext.guid;
+                        }
+                        this.resolved[resolveKey] = tex as Texture;
+                        if (debug)
+                            console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material, resolveKey);
+                        resolve(tex);
+                    });
+                    this.currentlyLoading[resolveKey] = request;
+                    const tex = await request;
+                    return tex;
+                }
+                finally {
+                    delete this.currentlyLoading[resolveKey];
+                    this.onProgressiveLoadEnd(info);
                 }
-                this.resolved[resolveKey] = tex as Texture;
-                if (debug)
-                    console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material, resolveKey);
-                return tex;
             }
             else {
-                if (debug) console.log("Load texture from uri: " + uri);
-                const loader = new TextureLoader();
-                const loaded = await loader.loadAsync(uri);
-                if (loaded && debug) {
-                    console.log(ext, loaded);
+                const info = this.onProgressiveLoadStart(context, source, uri, material, slot);
+                try {
+                    if (debug) console.log("Load texture from uri: " + uri);
+                    const loader = new TextureLoader();
+                    const tex = await loader.loadAsync(uri);
+                    if (tex) {
+                        (tex as any).guid = ext.guid;
+                        tex.flipY = false;
+                        tex.needsUpdate = true;
+                        tex.encoding = current.encoding;
+                        if (debug)
+                            console.log(ext, tex);
+                    }
+                    else if (debug) console.warn("failed loading", uri);
+                    return tex;
+                }
+                finally {
+                    this.onProgressiveLoadEnd(info);
                 }
-                else console.warn("failed loading", uri);
-                return loaded;
             }
             // loader.then((h: Texture) => {
             //     // console.log(t, h);
@@ -212,4 +242,116 @@ export class NEEDLE_progressive implements GLTFLoaderPlugin {
         }
         return null;
     }
-}
+
+
+    /** subscribe to events whenever a loading event starts, invoked for every single loading process that starts */
+    static beginListenStart(context: Context, evt: ProgressiveLoadingEvent) {
+        if (!this._progressiveEventListeners.has(context)) {
+            this._progressiveEventListeners.set(context, new ProgressiveLoadingEventHandler());
+        }
+        this._progressiveEventListeners.get(context)!.start.push(evt);
+    }
+    static stopListenStart(context: Context, evt: ProgressiveLoadingEvent) {
+        if (!this._progressiveEventListeners.has(context)) {
+            return;
+        }
+        const listeners = this._progressiveEventListeners.get(context)!.start;
+        const index = listeners.indexOf(evt);
+        if (index >= 0) {
+            listeners.splice(index, 1);
+        }
+    }
+
+    /** subscribe to loading event ended event */
+    static beginListenEnd(context: Context, evt: ProgressiveLoadingEvent) {
+        if (!this._progressiveEventListeners.has(context)) {
+            this._progressiveEventListeners.set(context, new ProgressiveLoadingEventHandler());
+        }
+        this._progressiveEventListeners.get(context)!.end.push(evt);
+    }
+    static stopListenEnd(context: Context, evt: ProgressiveLoadingEvent) {
+        if (!this._progressiveEventListeners.has(context)) {
+            return;
+        }
+        const listeners = this._progressiveEventListeners.get(context)!.end;
+        const index = listeners.indexOf(evt);
+        if (index >= 0) {
+            listeners.splice(index, 1);
+        }
+    }
+
+    /** event listeners per context */
+    private static _progressiveEventListeners: Map<Context, ProgressiveLoadingEventHandler> = new Map();
+    //** loading info per context, contains an array of urls that are currently being loaded */
+    private static _currentProgressiveLoadingInfo: Map<Context, ProgressiveLoadingInfo[]> = new Map();
+
+    // called whenever a progressive loading event starts
+    private static onProgressiveLoadStart(context: Context, source: SourceIdentifier | undefined, uri: string, material: Material, slot: string): ProgressiveLoadingInfo {
+        if (!this._currentProgressiveLoadingInfo.has(context)) {
+            this._currentProgressiveLoadingInfo.set(context, []);
+        }
+        const info = new ProgressiveLoadingInfo(context, source, uri, material, slot);
+        const current = this._currentProgressiveLoadingInfo.get(context)!;
+        const listener = this._progressiveEventListeners.get(context);
+        if (listener) listener.onStart(info);
+
+        current.push(info);
+        return info;
+    }
+
+    private static onProgressiveLoadEnd(info: ProgressiveLoadingInfo) {
+        if (!info) return;
+        const context = info.context;
+        if (!this._currentProgressiveLoadingInfo.has(context)) {
+            return;
+        }
+        const current = this._currentProgressiveLoadingInfo.get(context)!;
+        const index = current.indexOf(info);
+        if (index < 0) {
+            return;
+        }
+        current.splice(index, 1);
+        const listener = this._progressiveEventListeners.get(context);
+        if (listener) listener.onEnd(info);
+    }
+}
+
+
+/** info object that holds information about a file that is currently being loaded */
+export class ProgressiveLoadingInfo {
+    readonly context: Context;
+    readonly source: SourceIdentifier | undefined;
+    readonly uri: string;
+    readonly material?: Material;
+    readonly slot?: string;
+    // TODO: can contain information if the event is a background process / preloading or if the object is currently visible
+
+    constructor(context: Context, source: SourceIdentifier | undefined, uri: string, material?: Material, slot?: string) {
+        this.context = context;
+        this.source = source;
+        this.uri = uri;
+        this.material = material;
+        this.slot = slot;
+    }
+};
+
+
+export declare type ProgressiveLoadingEvent = (info: ProgressiveLoadingInfo) => void;
+
+/** progressive loading event handler implementation */
+class ProgressiveLoadingEventHandler {
+    start: ProgressiveLoadingEvent[] = [];
+    end: ProgressiveLoadingEvent[] = [];
+
+    onStart(listener: ProgressiveLoadingInfo) {
+        for (const l of this.start) {
+            l(listener);
+        }
+    }
+
+    onEnd(listener: ProgressiveLoadingInfo) {
+        for (const l of this.end) {
+            l(listener);
+        }
+    }
+}

package/src/engine-components/Collider.ts

@@ -5,6 +5,7 @@ import { Event, Mesh, Object3D, Vector3 } from "three"
 // import { IColliderProvider, registerColliderProvider } from "../engine/engine_physics";
 import { ICollider } from "../engine/engine_types";
 import { getWorldScale } from "../engine/engine_three_utils";
+import { PhysicsMaterial } from "../engine/engine_physics.types";
 
 
 export class Collider extends Behaviour implements ICollider {
@@ -18,6 +19,8 @@ export class Collider extends Behaviour implements ICollider {
     @serializable()
     isTrigger: boolean = false;
 
+    @serializable()
+    sharedMaterial?: PhysicsMaterial;
 
     awake() {
         super.awake();

package/src/engine-components/GroundProjection.ts

@@ -7,6 +7,9 @@ import { Texture } from "three";
 
 export class GroundProjectedEnv extends Behaviour {
 
+    @serializable()
+    applyOnAwake: boolean = false;
+
     @serializable()
     set scale(val: number) {
         this._scale = val;
@@ -40,14 +43,23 @@ export class GroundProjectedEnv extends Behaviour {
     private _watcher?: Watch;
 
 
-    onEnable() {
-        // TODO: if we do this in the first frame we can not disable it again. Something buggy with the watch?!
-        if (this.context.time.frameCount > 0)
+    awake() {
+        if (this.applyOnAwake)
             this.updateAndCreate();
     }
 
-    start() {
-        this.updateAndCreate();
+    onEnable() {
+        // TODO: if we do this in the first frame we can not disable it again. Something buggy with the watch?!
+        if (this.context.time.frameCount > 0) {
+            if (this.applyOnAwake)
+                this.updateAndCreate();
+        }
+        if (!this._watcher) {
+            this._watcher = new Watch(this.context.scene, "environment");
+            this._watcher.subscribeWrite(_ => {
+                this.updateProjection();
+            });
+        }
     }
 
     onDisable() {
@@ -57,13 +69,7 @@ export class GroundProjectedEnv extends Behaviour {
 
     private updateAndCreate() {
         this.updateProjection();
-        if (!this._watcher) {
-            this._watcher = new Watch(this.context.scene, "environment");
-            this._watcher.subscribeWrite(_ => {
-                this.updateProjection();
-            });
-        }
-        this._watcher.apply();
+        this._watcher?.apply();
     }
 
     updateProjection() {

package/src/engine-components/ParticleSystem.ts

@@ -548,6 +548,8 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
     private _state?: ParticlesEmissionState;
     emit(count: number) {
         if (this._particleSystem) {
+            // we need to call update the matrices etc e.g. if we call emit from a physics callback
+            this.onUpdate();
             count = Math.min(count, this.maxParticles - this.currentParticles);
             if (!this._state) this._state = new ParticlesEmissionState();
             this._state.waitEmiting = count;
@@ -768,6 +770,14 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
     }
 
     onBeforeRender() {
+        this.onUpdate();
+        const dt = this.deltaTime;
+        this._batchSystem?.update(dt);
+        this._time += dt;
+        if (this._time > this.duration) this._time = 0;
+    }
+
+    private onUpdate(){
         if (this._bursts) {
             this.emission.bursts = this._bursts;
             delete this._bursts;
@@ -796,17 +806,12 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
             this._container.matrix.identity();
             this._container.matrix.scale(scale);
         }
-
         this.emission.system = this;
-        const dt = this.deltaTime;
         this._interface.update();
         this.shape.update(this, this.context, this.main.simulationSpace, this.gameObject);
         this.noise.update(this.context);
         this.inheritVelocity?.update(this.context);
         this.velocityOverLifetime.update(this);
-        this._batchSystem?.update(dt);
-        this._time += dt;
-        if (this._time > this.duration) this._time = 0;
     }
 
     private addSubParticleSystems() {

package/src/engine-components/ParticleSystemModules.ts

@@ -6,6 +6,11 @@ import { AnimationCurve } from "./AnimationCurve";
 import { Vec2, Vec3 } from "../engine/engine_types";
 import { Context } from "../engine/engine_setup";
 import { EmitterShape, FrameOverLife, Particle, ShapeJSON } from "three.quarks";
+import { createNoise4D, NoiseFunction4D } from 'simplex-noise';
+import { Gizmos } from "../engine/engine_gizmos";
+import { getParam } from "../engine/engine_utils";
+
+const debug = getParam("debugparticles");
 
 declare type Color4 = { r: number, g: number, b: number, a: number };
 declare type ColorKey = { time: number, color: Color4 };
@@ -457,10 +462,10 @@ export class SizeOverLifetimeModule {
 
 export class ShapeModule implements EmitterShape {
 
+    // Emittershape start
     get type(): string {
         return ParticleSystemShapeType[this.shapeType];
     }
-
     initialize(particle: Particle): void {
         this.getPosition();
         particle.position.copy(this._vector);
@@ -471,6 +476,7 @@ export class ShapeModule implements EmitterShape {
     clone(): EmitterShape {
         return new ShapeModule();
     }
+    // EmitterShape end
 
     @serializable()
     shapeType: ParticleSystemShapeType = ParticleSystemShapeType.Box;
@@ -517,9 +523,9 @@ export class ShapeModule implements EmitterShape {
     private readonly _worldSpaceMatrixInverse: Matrix4 = new Matrix4();
 
 
-    constructor() {
-        // console.log(this);
-    }
+    // constructor() {
+    //     console.log(this);
+    // }
 
     update(system: IParticleSystem, _context: Context, simulationSpace: ParticleSystemSimulationSpace, obj: Object3D) {
         this.system = system;
@@ -534,6 +540,16 @@ export class ShapeModule implements EmitterShape {
         }
     }
 
+    private updateRotation() {
+        const isRotated = this.rotation.x !== 0 || this.rotation.y !== 0 || this.rotation.z !== 0;
+        if (isRotated) {
+            this._rotation.x = Mathf.toRadians(this.rotation.x);
+            this._rotation.y = -Mathf.toRadians(this.rotation.y);
+            this._rotation.z = -Mathf.toRadians(this.rotation.z);
+        }
+        return isRotated;
+    }
+
     /** nebula implementations: */
 
     /** initializer implementation */
@@ -544,61 +560,49 @@ export class ShapeModule implements EmitterShape {
         return this._vector;
     }
     getPosition(): void {
-        if (!this.enabled) {
-            this._vector.set(0, 0, 0);
-            return;
-        }
+        this._vector.set(0, 0, 0);
         const pos = this._temp.copy(this.position);
         const isWorldSpace = this._space === ParticleSystemSimulationSpace.World;
         if (isWorldSpace) {
             pos.applyQuaternion(this.system.worldQuaternion);
         }
-
-        const isRotated = this.rotation.x !== 0 || this.rotation.y !== 0 || this.rotation.z !== 0;
-        if (isRotated) {
-            this._rotation.x = Mathf.toRadians(this.rotation.x);
-            this._rotation.y = -Mathf.toRadians(this.rotation.y);
-            this._rotation.z = -Mathf.toRadians(this.rotation.z);
-        }
-
         let radius = this.radius;
         if (isWorldSpace) radius *= this.system.worldScale.x;
-        switch (this.shapeType) {
-            case ParticleSystemShapeType.Box:
-                this._vector.x = Math.random() * this.scale.x - this.scale.x / 2;
-                this._vector.y = Math.random() * this.scale.y - this.scale.y / 2;
-                this._vector.z = Math.random() * this.scale.z - this.scale.z / 2;
-                this._vector.add(pos);
-                break;
-            case ParticleSystemShapeType.Cone:
-                this.randomConePoint(this.position, this.angle, radius, this.radiusThickness, this.arc, this.arcMode, this._vector);
-                break;
-            case ParticleSystemShapeType.Sphere:
-                this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector);
-                this._vector.x *= this.scale.x;
-                this._vector.y *= this.scale.y;
-                this._vector.z *= this.scale.z;
-                break;
-            case ParticleSystemShapeType.Circle:
-                this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector);
-                this._vector.x *= this.scale.x;
-                this._vector.y *= this.scale.y;
-                this._vector.z *= 0;
-                break;
-            default:
-                this._vector.set(0, 0, 0);
-                break;
-            // case ParticleSystemShapeType.Hemisphere:
-            //     randomSpherePoint(this.position.x, this.position.y, this.position.z, this.radius, this.radiusThickness, 180, this._vector);
-            //     break;
-        }
+        if (this.enabled) {
+            switch (this.shapeType) {
+                case ParticleSystemShapeType.Box:
+                    this._vector.x = Math.random() * this.scale.x - this.scale.x / 2;
+                    this._vector.y = Math.random() * this.scale.y - this.scale.y / 2;
+                    this._vector.z = Math.random() * this.scale.z - this.scale.z / 2;
+                    this._vector.add(pos);
+                    break;
+                case ParticleSystemShapeType.Cone:
+                    this.randomConePoint(this.position, this.angle, radius, this.radiusThickness, this.arc, this.arcMode, this._vector);
+                    break;
+                case ParticleSystemShapeType.Sphere:
+                    this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector, this.scale);
+                    break;
+                case ParticleSystemShapeType.Circle:
+                    this._temp.copy(this.scale);
+                    this._temp.z = 0;
+                    this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector, this._temp);
+                    break;
+                default:
+                    this._vector.set(0, 0, 0);
+                    break;
+                // case ParticleSystemShapeType.Hemisphere:
+                //     randomSpherePoint(this.position.x, this.position.y, this.position.z, this.radius, this.radiusThickness, 180, this._vector);
+                //     break;
+            }
 
-        this.randomizePosition(this._vector, this.randomPositionAmount);
+            this.randomizePosition(this._vector, this.randomPositionAmount);
+        }
 
-        if (isRotated)
+        if (this.updateRotation())
             this._vector.applyEuler(this._rotation);
 
-        if (this._space === ParticleSystemSimulationSpace.World) {
+        if (isWorldSpace) {
+            this._vector.applyQuaternion(this.system.worldQuaternion);
             this._vector.add(this.system.worldPos);
         }
     }
@@ -606,7 +610,8 @@ export class ShapeModule implements EmitterShape {
 
 
     private _dir: Vector3 = new Vector3();
-    getDirection(position): Vector3 {
+
+    getDirection(pos: Vec3): Vector3 {
         if (!this.enabled) {
             this._dir.set(0, 0, 1);
             return this._dir;
@@ -622,10 +627,11 @@ export class ShapeModule implements EmitterShape {
                 break;
             case ParticleSystemShapeType.Circle:
             case ParticleSystemShapeType.Sphere:
-                const rx = position.x;
-                const ry = position.y;
-                const rz = position.z;
-                this._dir.set(rx, ry, rz).sub(this.position)
+                const rx = pos.x;
+                const ry = pos.y;
+                const rz = pos.z;
+                this._dir.set(rx, ry, rz)
+                this._dir.sub(this.position)
                 break;
             default:
                 this._dir.set(0, 0, 1);
@@ -634,10 +640,15 @@ export class ShapeModule implements EmitterShape {
         if (this._space === ParticleSystemSimulationSpace.World) {
             this._dir.applyMatrix4(this._worldSpaceMatrixInverse);
         }
+        if (this.updateRotation())
+            this._dir.applyEuler(this._rotation);
         this._dir.normalize();
         this.spherizeDirection(this._dir, this.sphericalDirectionAmount);
         this.randomizeDirection(this._dir, this.randomDirectionAmount);
-        // Gizmos.DrawDirection(position, this._dir, 0xff0000, .5);
+        if (debug) {
+            Gizmos.DrawSphere(pos, .01, 0x883300, .5, true);
+            Gizmos.DrawDirection(pos, this._dir, 0x883300, .5, true);
+        }
         return this._dir;
     }
 
@@ -674,15 +685,15 @@ export class ShapeModule implements EmitterShape {
         dir.lerp(v, amount);
     }
 
-    private randomSpherePoint(pos: Vec3, radius: number, thickness: number, arc: number, vec: Vec3) {
+    private randomSpherePoint(pos: Vec3, radius: number, thickness: number, arc: number, vec: Vec3, scale: Vec3) {
         const u = Math.random();
         const v = Math.random();
         const theta = 2 * Math.PI * u * (arc / 360);
         const phi = Math.acos(2 * v - 1);
         const r = Mathf.lerp(1, 1 - (Math.pow(1 - Math.random(), Math.PI)), thickness) * (radius);
-        const x = pos.x + (-r * Math.sin(phi) * Math.cos(theta));
-        const y = pos.y + (r * Math.sin(phi) * Math.sin(theta));
-        const z = pos.z + (r * Math.cos(phi));
+        const x = pos.x + scale.x * (-r * Math.sin(phi) * Math.cos(theta));
+        const y = pos.y + scale.y * (r * Math.sin(phi) * Math.sin(theta));
+        const z = pos.z + scale.z * (r * Math.cos(phi));
         vec.x = x;
         vec.y = y;
         vec.z = z;
@@ -735,7 +746,6 @@ export class ShapeModule implements EmitterShape {
 
 
 
-import { createNoise4D, NoiseFunction4D } from 'simplex-noise';
 
 export class NoiseModule {
     @serializable()

package/src/engine-components/Renderer.ts

@@ -229,6 +229,12 @@ export class Renderer extends Behaviour implements IRenderer {
 
     allowProgressiveLoading: boolean = true;
 
+    registering() {
+        if (!this.enabled) {
+            this.setVisibility(false);
+        }
+    }
+
     awake() {
         this.clearInstancingState();
 
@@ -463,14 +469,10 @@ export class Renderer extends Behaviour implements IRenderer {
         if (!suppressProgressiveLoading && material._didRequestTextureLOD === undefined && this.allowProgressiveLoading) {
             material._didRequestTextureLOD = 0;
             if (debugProgressiveLoading) {
-                console.log("Load material LOD (with delay)", material.name);
-                setTimeout(() => {
-                    NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
-                }, 2000);
-            }
-            else {
-                NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
+                console.log("Load material LOD", material.name);
             }
+            NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
+
         }
 
         if (material.envMapIntensity !== undefined) {
@@ -549,10 +551,10 @@ export class Renderer extends Behaviour implements IRenderer {
             // update the reflection probe right before rendering
             // if we do it immediately the reflection probe might not be enabled yet 
             // (since this method is called from onEnable)
-            this.startCoroutine(this._updateReflectionProbe(), FrameEvent.OnBeforeRender);
+            this.startCoroutine(this._updateReflectionProbe(), FrameEvent.LateUpdate);
         }
     }
-    private *_updateReflectionProbe(){
+    private *_updateReflectionProbe() {
         const obj = this.probeAnchor || this.gameObject;
         const isAnchor = this.probeAnchor ? true : false;
         this._reflectionProbe = ReflectionProbe.get(obj, this.context, isAnchor);