@needle-tools/engine 2.58.0-pre → 2.58.1-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.58.0-pre",
+    "version": "2.58.1-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.js",
     "module": "src/needle-engine.ts",

package/src/engine/engine_mainloop_utils.ts

@@ -2,7 +2,7 @@ import { Context } from './engine_setup';
 import * as utils from "./engine_generic_utils";
 import * as constants from "./engine_constants";
 import { getParam } from './engine_utils';
-import { Object3D } from 'three';
+import { CubeCamera, Object3D, WebGLCubeRenderTarget } from 'three';
 import { IComponent } from './engine_types';
 import { isActiveSelf, setActive } from './engine_gameobject';
 
@@ -83,6 +83,8 @@ export function processNewScripts(context: Context) {
                 updateActiveInHierarchyWithoutEventCall(script.gameObject);
                 if (script.activeAndEnabled)
                     utils.safeInvoke(script.__internalAwake.bind(script));
+
+                // registerPrewarmObject(script.gameObject, context);
             }
         }
         catch (err) {
@@ -320,4 +322,62 @@ function perComponent(go: THREE.Object3D, evt: (comp: IComponent) => void) {
             evt(comp);
         }
     }
+}
+
+
+const prewarmList: Map<Context, Object3D[]> = new Map();
+const $prewarmedFlag = Symbol("prewarmFlag");
+const $waitingForPrewarm = Symbol("waitingForPrewarm");
+const debugPrewarm = getParam("debugprewarm");
+
+export function registerPrewarmObject(obj: Object3D, context: Context) {
+    if (!obj) return;
+    // allow objects to be marked as prewarmed in which case we dont need to register them again
+    if (obj[$prewarmedFlag] === true) return;
+    if (obj[$waitingForPrewarm] === true) return;
+    if (!prewarmList.has(context)) {
+        prewarmList.set(context, []);
+    }
+    obj[$waitingForPrewarm] = true;
+    const list = prewarmList.get(context);
+    list!.push(obj);
+    if(debugPrewarm) console.debug("register prewarm", obj.name);
+}
+
+let prewarmTarget: WebGLCubeRenderTarget | null = null;
+let prewarmCamera: CubeCamera | null = null;
+
+// called by the engine to remove scroll or animation hiccup when objects are rendered/compiled for the first time
+export function runPrewarm(context: Context) {
+    if (!context) return;
+    const list = prewarmList.get(context);
+    if (!list?.length) return;
+
+    const cam = context.mainCamera;
+    if (cam) {
+        if(debugPrewarm) console.log("prewarm", list.length, "objects", [...list]);
+        const renderer = context.renderer;
+        const scene = context.scene;
+        renderer.compile(scene, cam!)
+        prewarmTarget ??= new WebGLCubeRenderTarget(64)
+        prewarmCamera ??= new CubeCamera(0.001, 9999999, prewarmTarget);
+        prewarmCamera.update(renderer, scene);
+        for (const obj of list) {
+            obj[$prewarmedFlag] = true;
+            obj[$waitingForPrewarm] = false;            
+        }
+        list.length = 0;
+        if(debugPrewarm) console.log("prewarm done");
+    }
+}
+
+export function clearPrewarmList(context: Context) {
+    const list = prewarmList.get(context);
+    if (list) {
+        for (const obj of list) {
+            obj[$waitingForPrewarm] = false;
+        }
+        list.length = 0;
+    }
+    prewarmList.delete(context);
 }

package/src/engine/engine_scenetools.ts

@@ -12,6 +12,7 @@ import { createBuiltinComponents, writeBuiltinComponentData } from "./engine_glt
 import { SerializationContext } from "./engine_serialization_core";
 import { NEEDLE_components } from "./extensions/NEEDLE_components";
 import { addNewComponent, getComponentInChildren } from "./engine_components";
+import { registerPrewarmObject } from "./engine_mainloop_utils";
 
 
 export class NeedleGltfLoader implements INeedleGltfLoader {
@@ -116,6 +117,7 @@ export function parseSync(context: Context, data, path: string, seed: number | U
                 invokeEvents(GltfLoadEventType.AfterLoaded, new GltfLoadEvent(context, path, loader, data));
                 await handleLoadedGltf(context, path, data, seed, componentsExtension);
                 invokeEvents(GltfLoadEventType.FinishedSetup, new GltfLoadEvent(context, path, loader, data));
+                registerPrewarmObject(data.scene, context);
                 resolve(data);
 
             }, err => {
@@ -146,6 +148,7 @@ export function loadSync(context: Context, url: string, seed: number | UIDProvid
                 invokeEvents(GltfLoadEventType.AfterLoaded, new GltfLoadEvent(context, url, loader, data));
                 await handleLoadedGltf(context, url, data, seed, componentsExtension);
                 invokeEvents(GltfLoadEventType.FinishedSetup, new GltfLoadEvent(context, url, loader, data));
+                registerPrewarmObject(data.scene, context);
                 resolve(data);
 
             }, evt => {

package/src/engine/engine_setup.ts

@@ -701,6 +701,7 @@ export class Context {
 
 
 			if (!this.isManagedExternally) {
+				looputils.runPrewarm(this);
 				this._currentFrameEvent = -10;
 				this.renderNow();
 				this._currentFrameEvent = FrameEvent.OnAfterRender;

package/src/engine-components/Renderer.ts

@@ -12,6 +12,8 @@ import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
 import { IRenderer, ISharedMaterials } from "../engine/engine_types";
 import { debug, ReflectionProbe } from "./ReflectionProbe";
 import { setCustomVisibility } from "../engine/js-extensions/Layers";
+import { isLocalNetwork } from "../engine/engine_networking_utils";
+import { showBalloonWarning } from "../engine/debug/debug";
 
 // for staying compatible with old code
 export { InstancingUtil } from "../engine/engine_instancing";
@@ -53,12 +55,14 @@ class SharedMaterialArray implements ISharedMaterials {
     private _renderer: Renderer;
     private _targets: THREE.Object3D[] = [];
 
+    private _indexMapMaxIndex?: number;
+    private _indexMap?: Map<number, number>;
 
     is(renderer: Renderer) {
         return this._renderer === renderer;
     }
 
-    constructor(renderer: Renderer) {
+    constructor(renderer: Renderer, originalMaterials: Material[]) {
         this._renderer = renderer;
         const setMaterial = this.setMaterial.bind(this);
         const getMaterial = this.getMaterial.bind(this);
@@ -76,6 +80,38 @@ class SharedMaterialArray implements ISharedMaterials {
             }
         }
 
+        // this is useful to have an index map when e.g. materials are trying to be assigned by index
+        let hasMissingMaterials = false;
+        let indexMap: Map<number, number> | undefined = undefined;
+        let maxIndex: number = 0;
+        for (let i = 0; i < this._targets.length; i++) {
+            const target = this._targets[i] as Mesh;
+            if (!target) continue;
+            const mat = target.material as Material;
+            if (!mat) continue;
+            for (let k = 0; k < originalMaterials.length; k++) {
+                const orig = originalMaterials[k];
+                if (!orig) {
+                    hasMissingMaterials = true;
+                    continue;
+                }
+                if (mat.name === orig.name) {
+                    if (indexMap === undefined) indexMap = new Map();
+                    indexMap.set(k, i);
+                    maxIndex = Math.max(maxIndex, k);
+                    // console.log(`Material ${mat.name} at ${k} was found at index ${i} in renderer ${renderer.name}.`)
+                    break;
+                }
+            }
+        }
+        if (hasMissingMaterials) {
+            this._indexMapMaxIndex = maxIndex;
+            this._indexMap = indexMap;
+            const warningMessage = `Renderer ${renderer.name} was initialized with missing materials - this may lead to unexpected behaviour when trying to access sharedMaterials by index.`;
+            console.warn(warningMessage);
+            if(isLocalNetwork()) showBalloonWarning("Found renderer with missing materials: please check the console for details.");
+        }
+
         // this lets us override the javascript indexer, only works in ES6 tho
         // but like that we can use sharedMaterials[index] and it will be assigned to the object directly
         return new Proxy(this, {
@@ -98,10 +134,22 @@ class SharedMaterialArray implements ISharedMaterials {
     }
 
     get length(): number {
+        if (this._indexMapMaxIndex !== undefined) return this._indexMapMaxIndex + 1;
         return this._targets.length;
     }
 
+    private resolveIndex(index: number): number {
+        const map = this._indexMap;
+        // if we have a index map it means that some materials were missing
+        if (map) {
+            if (map.has(index)) return map.get(index) as number;
+            // return -1;
+        }
+        return index;
+    }
+
     private setMaterial(mat: Material, index: number) {
+        index = this.resolveIndex(index);
         if (index < 0 || index >= this._targets.length) return;
         const target = this._targets[index];
         if (!target || target["material"] === undefined) return;
@@ -109,6 +157,7 @@ class SharedMaterialArray implements ISharedMaterials {
     }
 
     private getMaterial(index: number) {
+        index = this.resolveIndex(index);
         if (index < 0) return null;
         const obj = this._targets;
         if (index >= obj.length) return null;
@@ -193,10 +242,18 @@ export class Renderer extends Behaviour implements IRenderer {
     }
 
     private _sharedMaterials!: SharedMaterialArray;
+    private _originalMaterials: Material[] = [];
+
+    // this is just available during deserialization
+    private set sharedMaterials(_val: Array<Material | null>) {
+        // TODO: elements in the array might be missing at the moment which leads to problems if an index is serialized
+        this._originalMaterials = _val as Material[];
+    }
 
+    //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
         if (!this._sharedMaterials || !this._sharedMaterials.is(this))
-            this._sharedMaterials = new SharedMaterialArray(this);
+            this._sharedMaterials = new SharedMaterialArray(this, this._originalMaterials);
         return this._sharedMaterials!;
     }