@needle-tools/engine 4.1.0-experimental.13 → 4.1.0

package/plugins/common/config.js

@@ -1,19 +1,35 @@
 import { existsSync, readFileSync } from "fs";
 
-export function getMeta() {
+
+/**
+ * 
+ * @returns {import("../types").needleConfig | null}
+ */
+export function getConfig() {
     const workingDirectory = process.cwd();
-    const configPath = workingDirectory + "/needle.config.json";
-    if(existsSync(configPath)) {
+    const configPath = `${workingDirectory}/needle.config.json`;
+    if (existsSync(configPath)) {
         const configStr = readFileSync(configPath, "utf8");
         const config = JSON.parse(configStr);
-        if(config.codegenDirectory) {
-            const dir = workingDirectory + "/" + config.codegenDirectory + "/meta.json";
-            if(existsSync(dir)) {
-                const metaStr = readFileSync(dir, "utf8");
-                /**@type {import("../types").needleConfig} */
-                const meta = JSON.parse(metaStr);
-                return meta;
-            }
+        return config;
+    }
+    return null;
+}
+
+/**
+ * 
+ * @returns {import("../types").needleMeta | null}
+ */
+export function getMeta() {
+    const workingDirectory = process.cwd();
+    const config = getConfig();
+    if (config && config.codegenDirectory) {
+        const dir = `${workingDirectory}/${config.codegenDirectory}/meta.json`;
+        if (existsSync(dir)) {
+            const metaStr = readFileSync(dir, "utf8");
+            /**@type {import("../types").needleMeta} */
+            const meta = JSON.parse(metaStr);
+            return meta;
         }
     }
     return null;

package/plugins/next/next.js

@@ -2,8 +2,9 @@ import { fileURLToPath } from 'url';
 import { dirname, resolve } from 'path';
 import { tryGetNeedleEngineVersion } from '../common/version.js';
 import { tryGetGenerator } from '../common/generator.js';
-import { getMeta } from '../common/config.cjs';
+import { getConfig, getMeta } from '../common/config.cjs';
 import { alias } from './alias.cjs';
+import { createBuildInfoFile } from '../common/buildinfo.js';
 
 
 const __filename = fileURLToPath(import.meta.url);
@@ -24,12 +25,37 @@ export const needleNext = (nextConfig, userSettings) => {
             reactStrictMode: true,
         };
 
+    const needleConfig = getConfig();
+
     // add transpile packages
     if (!nextConfig.transpilePackages) {
         nextConfig.transpilePackages = [];
     }
     nextConfig.transpilePackages.push("three", "peerjs", "three-mesh-ui");
 
+    if (nextConfig.output === undefined) {
+        console.log("Set output to 'export' (see 'https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#configuration' for more information)");
+        nextConfig.output = "export";
+        // we *also* need to turn OFF image optimization for static HTML files to be generated
+        // see https://github.com/vercel/next.js/issues/40240
+        if (nextConfig.images === undefined) {
+            nextConfig.images = {
+                unoptimized: true
+            }
+        }
+    }
+    if (nextConfig.distDir == undefined) {
+        console.log("Export to 'dist'");
+        if (needleConfig?.buildDirectory) {
+            console.log(`Using build directory from needle config: ${needleConfig.buildDirectory}`);
+            nextConfig.distDir = needleConfig.buildDirectory;
+        }
+        else {
+            console.log("Using default build directory 'dist'. You can override the output directory via the needle config or by setting nextConfig.distDir");
+            nextConfig.distDir = "dist";
+        }
+    }
+
     // add webpack config
     if (!nextConfig.webpack) nextConfig.webpack = nextWebPack;
     else {
@@ -43,11 +69,11 @@ export const needleNext = (nextConfig, userSettings) => {
     function nextWebPack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
 
         // TODO: get public identifier key from license server
-        
+
         const meta = getMeta();
         let useRapier = true;
         if (userSettings.useRapier === false) useRapier = false;
-        else if (meta.useRapier === false) useRapier = false;
+        else if (meta && meta.useRapier === false) useRapier = false;
         // add defines
         const webpackModule = userSettings.modules?.webpack;
         const definePlugin = webpackModule && new webpackModule.DefinePlugin({
@@ -68,7 +94,6 @@ export const needleNext = (nextConfig, userSettings) => {
             test: /engine_license\.(ts|js)$/,
             loader: resolve(__dirname, 'license.cjs')
         });
-
         // add mesh bvh worker transform
         config.module.rules.push({
             test: /generateMeshBVH.worker\.js$/,
@@ -77,6 +102,24 @@ export const needleNext = (nextConfig, userSettings) => {
 
         alias(config);
 
+        // these hooks are invoked but nextjs deletes the files again:
+        // add webpack done plugin https://webpack.js.org/api/compiler-hooks/
+        // config.plugins.push({
+        //     apply(compiler) {
+        //         compiler.hooks.shutdown.tap('NeedleDonePlugin', (stats) => {
+        //             return createBuildInfoFile(nextConfig.distDir);
+        //         });
+        //     }
+        // });
+        // so as a workaround for above's problem:
+        // hook into process quit event since there doesn't seem to be a next hook for "after emit"
+        // node's beforeExit event is not called :(
+        process.on('exit', (code) => {
+            if (code === 0)
+                return createBuildInfoFile(nextConfig.distDir);
+        });
+
+
         return config;
     }
 

package/plugins/vite/transform.js

@@ -15,9 +15,9 @@ export const needleTransformCode = (command, config, userSettings) => {
              */
             transform(src, id) {
                 if (id.includes("three__quarks.js") || id.includes("three.quarks")) {
-                    const line1 = `console.log('%c Particle system powered by three.quarks. https://quarks.art/', 'font-size: 16px; font-weight: bold;');`
-                    const line2 = `console.log("%c Particle system powered by three.quarks. https://quarks.art/", "font-size: 16px; font-weight: bold;");`;
-                    const replacement = `setTimeout(()=> console.log("Particle system powered by three.quarks. https://quarks.art/"), 100);`
+                    const line1 = `console.log('%c Particle system powered by three.quarks. https://quarks.art/', 'font-size: 14px; font-weight: bold;');`
+                    const line2 = `console.log("%c Particle system powered by three.quarks. https://quarks.art/", "font-size: 14px; font-weight: bold;");`;
+                    const replacement = `setTimeout(()=> console.debug("Particle system powered by three.quarks. https://quarks.art/"), 100);`
                     const content = src
                         .replace(line1, replacement)
                         .replace(line2, replacement);

package/src/engine/assets/index.ts

@@ -1,5 +1,6 @@
 import { Box3, DoubleSide, Group, Mesh, MeshBasicMaterial, ShapeGeometry, Vector3 } from "three";
 import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader.js";
+
 import { NEEDLE_LOGO_SVG_URL } from "./static.js";
 
 /** Logo Only */

package/src/engine/codegen/register_types.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import { TypeStore } from "./../engine_typestore.js"
-
+
 // Import types
 import { AlignmentConstraint } from "../../engine-components/AlignmentConstraint.js";
 import { Animation } from "../../engine-components/Animation.js";
@@ -220,7 +220,7 @@ import { XRFlag } from "../../engine-components/webxr/XRFlag.js";
 import { PlayerSync } from "../../engine-components-experimental/networking/PlayerSync.js";
 import { PlayerState } from "../../engine-components-experimental/networking/PlayerSync.js";
 import { PresentationMode } from "../../engine-components-experimental/Presentation.js";
-
+
 // Register types
 TypeStore.add("AlignmentConstraint", AlignmentConstraint);
 TypeStore.add("Animation", Animation);

package/src/engine/engine_addressables.ts

@@ -5,10 +5,10 @@ import { destroy, type IInstantiateOptions, instantiate, InstantiateOptions, isD
 import { getLoader } from "./engine_gltf.js";
 import { processNewScripts } from "./engine_mainloop_utils.js";
 import { BlobStorage } from "./engine_networking_blob.js";
-import { registerPrefabProvider, syncInstantiate,SyncInstantiateOptions } from "./engine_networking_instantiate.js";
+import { registerPrefabProvider, syncInstantiate, SyncInstantiateOptions } from "./engine_networking_instantiate.js";
 import { SerializationContext, TypeSerializer } from "./engine_serialization_core.js";
 import { Context } from "./engine_setup.js";
-import type { IComponent, IGameObject, SourceIdentifier } from "./engine_types.js";
+import type { GLTF, IComponent, IGameObject, SourceIdentifier } from "./engine_types.js";
 
 const debug = getParam("debugaddressables");
 
@@ -140,8 +140,11 @@ export class AssetReference {
 
     private static currentlyInstantiating: Map<string, number> = new Map<string, number>();
 
+    /** @returns true if this is an AssetReference instance */
+    get isAssetReference() { return true; }
+
     /** The loaded asset */
-    get asset(): any {
+    get asset(): Object3D | null {
         return this._glbRoot ?? this._asset;
     }
 
@@ -183,7 +186,7 @@ export class AssetReference {
     private _hashedUri: string;
 
     private _isLoadingRawBinary: boolean = false;
-    private _rawBinary?: ArrayBuffer | null;
+    private _rawBinary?: ArrayBufferLike | null;
 
     /** @internal */
     constructor(uri: string, hash?: string, asset: any = null) {
@@ -197,7 +200,7 @@ export class AssetReference {
         registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
 
-    private async onResolvePrefab(url: string): Promise<IGameObject | null> {
+    private async onResolvePrefab(url: string): Promise<Object3D | null> {
         if (url === this.url) {
             if (this.mustLoad) await this.loadAssetAsync();
             if (this.asset) {
@@ -208,7 +211,7 @@ export class AssetReference {
     }
 
     private get mustLoad() {
-        return !this.asset || this.asset.__destroyed === true || isDestroyed(this.asset) === true;
+        return !this.asset || (this.asset as any).__destroyed === true || isDestroyed(this.asset) === true;
     }
 
     /**
@@ -220,8 +223,8 @@ export class AssetReference {
         if (this.asset) {
             if (debug) console.log("Unload", this.asset);
             // TODO: we need a way to remove objects from the context (including components) without actually "destroying" them
-            if (this.asset.scene)
-                destroy(this.asset.scene, true, true);
+            if ("scene" in this.asset && this.asset.scene)
+                destroy(this.asset.scene as Object3D, true, true);
             destroy(this.asset, true, true);
         }
         this.asset = null;
@@ -234,7 +237,7 @@ export class AssetReference {
     }
 
     /** loads the asset binary without creating an instance */
-    async preload(): Promise<ArrayBuffer | null> {
+    async preload(): Promise<ArrayBufferLike | null> {
         if (!this.mustLoad) return null;
         if (this._isLoadingRawBinary) return null;
         if (this._rawBinary !== undefined) return this._rawBinary;
@@ -268,6 +271,10 @@ export class AssetReference {
         // we should "address" (LUL) this
         // console.log("START LOADING");
         if (this._rawBinary) {
+            if (!(this._rawBinary instanceof ArrayBuffer)) {
+                console.error("Invalid raw binary data", this._rawBinary);
+                return null;
+            }
             this._loading = getLoader().parseSync(context, this._rawBinary, this.url, null);
             this.raiseProgressEvent(new ProgressEvent("progress", { loaded: this._rawBinary.byteLength, total: this._rawBinary.byteLength }));
         }
@@ -283,7 +290,6 @@ export class AssetReference {
         this._glbRoot = this.tryGetActualGameObjectRoot(res);
         this._loading = undefined;
         if (res) {
-
             // Make sure the loaded roots all have a reference to this AssetReference
             // that was originally loading it.
             // We need this when the loaded asset is being disposed
@@ -302,10 +308,11 @@ export class AssetReference {
             }
             return this.asset;
         }
+        return null;
     }
 
     /** loads and returns a new instance of `asset` */
-    async instantiate(parent?: Object3D | IInstantiateOptions) {
+    async instantiate(parent?: Object3D | IInstantiateOptions | null) {
         return this.onInstantiate(parent, false);
     }
 
@@ -332,7 +339,7 @@ export class AssetReference {
         }
     }
 
-    private async onInstantiate(opts?: Object3D | IInstantiateOptions | SyncInstantiateOptions, networked: boolean = false, saveOnServer?: boolean) : Promise<Object3D | null> {
+    private async onInstantiate(opts?: Object3D | IInstantiateOptions | SyncInstantiateOptions | null, networked: boolean = false, saveOnServer?: boolean): Promise<Object3D | null> {
         const context = Context.Current;
 
         // clone the instantiate options immediately

package/src/engine/engine_context.ts

@@ -1,7 +1,9 @@
+import 'three/examples/jsm/renderers/webgl-legacy/nodes/WebGLNodes.js';
+
 import type { EffectComposer } from "postprocessing";
 import {
 	BufferGeometry, Camera, Color, DepthTexture, Group,
-	Material, NearestFilter, NoToneMapping, Object3D, PCFSoftShadowMap,
+	Material, NearestFilter, NoToneMapping, Object3D, OrthographicCamera, PCFSoftShadowMap,
 	PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace,
 	Texture, WebGLRenderer, type WebGLRendererParameters, WebGLRenderTarget, type WebXRArrayCamera
 } from 'three';
@@ -156,6 +158,8 @@ export class Context implements IContext {
 		// Note: this is due to a bug on OSX devices. See NE-5370
 		powerPreference: (DeviceUtilities.isiOS() || DeviceUtilities.isMacOS()) ? "default" : "high-performance",
 		stencil: true,
+		// logarithmicDepthBuffer: true,
+		// reverseDepthBuffer: true, // https://github.com/mrdoob/three.js/issues/29770
 	};
 	/** The default parameters that will be used when creating a new WebGLRenderer.  
 	 * Modify in global context to change the default parameters for all new contexts.
@@ -485,7 +489,7 @@ export class Context implements IContext {
 		this.renderer.shadowMap.type = PCFSoftShadowMap;
 		this.renderer.setSize(this.domWidth, this.domHeight);
 		this.renderer.outputColorSpace = SRGBColorSpace;
-	
+
 		// Injecting the core nodes library here, like WebGPURenderer backends do
 		//@ts-ignore
 		this.renderer.nodes = {
@@ -545,16 +549,37 @@ export class Context implements IContext {
 		}
 	}
 
-	updateAspect(camera: PerspectiveCamera, width?: number, height?: number) {
+	updateAspect(camera: PerspectiveCamera | OrthographicCamera, width?: number, height?: number) {
 		if (!camera) return;
 		if (width === undefined)
 			width = this.domWidth;
 		if (height === undefined)
 			height = this.domHeight;
-		const pa = camera.aspect;
-		camera.aspect = width / height;
-		if (pa !== camera.aspect)
-			camera.updateProjectionMatrix();
+		const aspectRatio = width / height;
+		if ((camera as PerspectiveCamera).isPerspectiveCamera) {
+			const cam = camera as PerspectiveCamera;
+			const pa = cam.aspect;
+			cam.aspect = aspectRatio;
+			if (pa !== cam.aspect)
+				camera.updateProjectionMatrix();
+		}
+		else if ((camera as OrthographicCamera).isOrthographicCamera) {
+			const cam = camera as OrthographicCamera;
+			// Maintain the camera's current vertical size (top - bottom)
+			const verticalSize = cam.top - cam.bottom;
+			// Calculate new horizontal size based on aspect ratio
+			const horizontalSize = verticalSize * aspectRatio;
+			// Update camera bounds while maintaining center position
+			const halfWidth = horizontalSize / 2;
+			const halfHeight = verticalSize / 2;
+			if (cam.left != -halfWidth || cam.top != halfHeight) {
+				cam.left = -halfWidth;
+				cam.right = halfWidth;
+				cam.top = halfHeight;
+				cam.bottom = -halfHeight;
+				camera.updateProjectionMatrix();
+			}
+		}
 	}
 
 	/** This will recreate the whole needle engine context and dispose the whole scene content  
@@ -1078,7 +1103,7 @@ export class Context implements IContext {
 		// if the id was changed while still loading
 		// then we want to cleanup/destroy previously loaded files
 		if (createId !== this._createId || args.abortSignal?.aborted) {
-			if(debug) console.log("Aborting loading because create id changed or abort signal was set", createId, this._createId);
+			if (debug) console.log("Aborting loading because create id changed or abort signal was set", createId, this._createId);
 			for (const res of results) {
 				if (res && res.file) {
 					for (const scene of res.file.scenes)

package/src/engine/engine_gameobject.ts

@@ -1,5 +1,6 @@
 import { Bone, Object3D, Quaternion, SkinnedMesh, Vector3 } from "three";
 
+import { type AssetReference } from "./engine_addressables.js";
 import { __internalNotifyObjectDestroyed as __internalRemoveReferences, disposeObjectResources } from "./engine_assetdatabase.js";
 import { ComponentLifecycleEvents } from "./engine_components_internal.js";
 import { activeInHierarchyFieldName } from "./engine_constants.js";
@@ -10,26 +11,13 @@ import { InstantiateIdProvider } from "./engine_networking_instantiate.js";
 import { assign } from "./engine_serialization_core.js";
 import { Context, registerComponent } from "./engine_setup.js";
 import { logHierarchy, setWorldPosition, setWorldQuaternion } from "./engine_three_utils.js";
-import { type Constructor, type GuidsMap, type IComponent as Component, type IComponent, IEventList,type IGameObject as GameObject, type UIDProvider } from "./engine_types.js";
+import { type Constructor, type GuidsMap, type IComponent as Component, type IComponent, IEventList, type IGameObject as GameObject, type UIDProvider } from "./engine_types.js";
 import { getParam, tryFindObject } from "./engine_utils.js";
 import { apply } from "./js-extensions/index.js";
 
 const debug = getParam("debuggetcomponent");
 const debugInstantiate = getParam("debuginstantiate");
 
-/** @internal */
-export enum HideFlags {
-    None = 0,
-    HideInHierarchy = 1,
-    HideInInspector = 2,
-    DontSaveInEditor = 4,
-    NotEditable = 8,
-    DontSaveInBuild = 16, // 0x00000010
-    DontUnloadUnusedAsset = 32, // 0x00000020
-    DontSave = DontUnloadUnusedAsset | DontSaveInBuild | DontSaveInEditor, // 0x00000034
-    HideAndDontSave = DontSave | NotEditable | HideInHierarchy, // 0x0000003D
-}
-
 export type IInstantiateOptions = {
     idProvider?: UIDProvider;
     //** parent guid or object */
@@ -307,9 +295,17 @@ declare type InstantiateReferenceMap = Record<string, ObjectCloneReference>;
  */
 export declare type InstantiateContext = Readonly<InstantiateReferenceMap>;
 
-export function instantiate(instance: GameObject | Object3D, opts: IInstantiateOptions | null = null): GameObject {
+export function instantiate(instance: AssetReference, opts?: IInstantiateOptions | null): Promise<Object3D | null>
+export function instantiate(instance: GameObject | Object3D, opts?: IInstantiateOptions | null): GameObject
+export function instantiate(instance: AssetReference | GameObject | Object3D, opts?: IInstantiateOptions | null | undefined): GameObject | Promise<Object3D | null> {
+
+    if ("isAssetReference" in instance) {
+        return instance.instantiate(opts ?? undefined);
+    }
+
     let options: InstantiateOptions | null = null;
-    if (opts !== null) {
+
+    if (opts !== null && opts !== undefined) {
         // if x is defined assume this is a vec3 - this is just to not break everything at once and stay a little bit backwards compatible
         if (opts["x"] !== undefined) {
             options = new InstantiateOptions();

package/src/engine/engine_gltf_builtin_components.ts

@@ -11,7 +11,7 @@ import { isLocalNetwork } from "./engine_networking_utils.js";
 import { deserializeObject, serializeObject } from "./engine_serialization.js";
 import { assign, ImplementationInformation, type ISerializable, SerializationContext } from "./engine_serialization_core.js";
 import { Context } from "./engine_setup.js";
-import type { GuidsMap, ICamera, IComponent, IGameObject, SourceIdentifier, UIDProvider } from "./engine_types.js";
+import type { GuidsMap, ICamera, ICollider, IComponent, IGameObject, IRigidbody, SourceIdentifier, UIDProvider } from "./engine_types.js";
 import { TypeStore } from "./engine_typestore.js";
 import { getParam } from "./engine_utils.js";
 import { NEEDLE_components } from "./extensions/NEEDLE_components.js";
@@ -247,6 +247,12 @@ async function onCreateBuiltinComponents(context: SerializationContext, obj: Obj
                             if (context.context.mainCamera === null && (instance.tag === "MainCamera"))
                                 context.context.setCurrentCamera(instance as ICamera);
                         }
+
+                        // if the component is a rigidbody or collider and the physics engine is not initialized yet
+                        // initialize the physics engine right away
+                        if (context.context?.physics?.engine?.isInitialized === false && ((instance as ICollider).isCollider || (instance as IRigidbody).isRigidbody)) {
+                            context.context?.physics.engine?.initialize();
+                        }
                     }
                     else {
                         if (debug)

package/src/engine/engine_input.ts

@@ -36,8 +36,15 @@ export const enum InputEvents {
     KeyUp = "keyup",
     KeyPressed = "keypress"
 }
+
 /** e.g. `pointerdown` */
-export type InputEventNames = EnumToPrimitiveUnion<InputEvents>;
+type PointerEventNames = EnumToPrimitiveUnion<PointerEnumType>;
+type KeyboardEventNames = EnumToPrimitiveUnion<KeyboardEnumType>;
+export type InputEventNames = PointerEventNames | KeyboardEventNames;
+
+declare type PointerEventListener = (evt: NEPointerEvent) => void;
+declare type KeyboardEventListener = (evt: NEKeyboardEvent) => void;
+declare type InputEventListener = PointerEventListener | KeyboardEventListener;
 
 
 
@@ -217,10 +224,6 @@ export class KeyEventArgs {
 
 
 
-declare type PointerEventListener = (evt: NEPointerEvent) => void;
-declare type KeyboardEventListener = (evt: NEKeyboardEvent) => void;
-declare type InputEventListener = PointerEventListener | KeyboardEventListener;
-
 export enum InputEventQueue {
     Early = -100,
     Default = 0,
@@ -254,6 +257,8 @@ export class Input implements IInput {
      * @param callback The callback to call when the event is triggered
      * @param options The options for adding the event listener 
      */
+    addEventListener(type: PointerEventNames, callback: PointerEventListener, options?: EventListenerOptions);
+    addEventListener(type: KeyboardEventNames, callback: KeyboardEventListener, options?: EventListenerOptions);
     addEventListener(type: InputEvents | InputEventNames, callback: InputEventListener, options?: EventListenerOptions): void {
         if (!this._eventListeners[type]) this._eventListeners[type] = [];
 
@@ -284,6 +289,8 @@ export class Input implements IInput {
      * @param callback The callback to remove
      * @param options The options for removing the event listener 
      */
+    removeEventListener(type: PointerEventNames, callback: PointerEventListener, options?: EventListenerOptions);
+    removeEventListener(type: KeyboardEventNames, callback: KeyboardEventListener, options?: EventListenerOptions);
     removeEventListener(type: InputEvents | InputEventNames, callback: InputEventListener, options?: EventListenerOptions): void {
         if (!this._eventListeners[type]) return;
         if (!callback) return;

package/src/engine/engine_license.ts

@@ -6,6 +6,8 @@ import { getParam } from "./engine_utils.js";
 
 const debug = getParam("debuglicense");
 
+const _licenseCheckResultChangedCallbacks: ((result: boolean) => void)[] = [];
+
 // This is modified by a bundler (e.g. vite)
 // Do not edit manually
 let NEEDLE_ENGINE_LICENSE_TYPE: string = "basic";
@@ -36,7 +38,6 @@ export function hasCommercialLicense() {
     return hasProLicense() || hasIndieLicense();
 }
 
-const _licenseCheckResultChangedCallbacks: ((result: boolean) => void)[] = [];
 
 /** @internal */
 export function onLicenseCheckResultChanged(cb: (result: boolean) => void) {

package/src/engine/engine_modules.ts

@@ -1,4 +1,11 @@
 
+/**
+ * External dependencies that are loaded on demand either by the engine automatically when needed or they can be loaded manually by calling the `load` function.  
+ * 
+ * Use the `ready` function to wait for the module to be loaded if you do not wand to trigger a load.
+ * 
+ * If a module is already loaded it's also available in the `MODULE` variable.
+ */
 export namespace MODULES {
 
     export namespace RAPIER_PHYSICS {

package/src/engine/engine_networking_auto.ts

@@ -32,15 +32,12 @@ class ComponentPropertiesSyncer {
     comp: IComponent;
 
     constructor(comp: IComponent) {
-        // console.log("CREATE NEW SYNC", comp.name, comp.guid);
         this.comp = comp;
     }
 
     // private getters: { [key: string]: Function } = {};
     private hasChanges: boolean = false;
     private changedProperties: { [key: string]: any } = {};
-    // private data = {};
-
 
     get networkingKey(): string {
         return this.comp.guid;
@@ -89,27 +86,24 @@ class ComponentPropertiesSyncer {
             return;
         }
         for (const name in this.changedProperties) {
-            const guid = this.comp.guid + "/" + name;
             const value = this.changedProperties[name];
-            if (debug) console.log("SEND", this.comp.name, this.networkingKey);
-            net.send(this.networkingKey, { guid, data: value }, SendQueue.Queued);
+            if (debug) console.log("SEND", this.comp.guid, this.networkingKey);
+            net.send(this.networkingKey, { guid: this.comp.guid, property: name, data: value }, SendQueue.Queued);
+            delete this.changedProperties[name];
         }
     }
 
-    private onHandleReceiving = (val: { guid: string, data: any }) => {
-        if (debug)
-            console.log("RECEIVE", this.comp.name, this.comp.guid, val);
+    private onHandleReceiving = (val: { guid: string, property: string, data: any }) => {
+        if (debug) console.log("SYNCFIELD RECEIVE", this.comp.name, this.comp.guid, val);
         if (!this._isInit) return;
         if (!this.comp) return;
         // check if this change belongs to this component
-        if (val.guid.startsWith(this.comp.guid) === false) {
+        if (val.guid !== this.comp.guid) {
             return;
         }
-        const [_guid, key] = val.guid.split("/");
-        if (debug) console.log("RECEIVED", this.comp.name, this.comp.guid, val);
         try {
             this._isReceiving = true;
-            this.comp[key] = val.data;
+            this.comp[val.property] = val.data;
         }
         catch (err) {
             console.error(err);
@@ -118,15 +112,6 @@ class ComponentPropertiesSyncer {
             this._isReceiving = false;
         }
     }
-
-    // private _seen: Set<any> = new Set();
-    // private uniqBy(a, key) {
-    //     this._seen.clear();
-    //     return a.filter(item => {
-    //         let k = key(item);
-    //         return this._seen.has(k) ? false : this._seen.add(k);
-    //     });
-    // }
 }
 
 function testValueChanged(newValue, previousValue): boolean {

package/src/engine/engine_networking_instantiate.ts

@@ -350,7 +350,7 @@ function instantiateSeeded(obj: GameObject, opts: IInstantiateOptions | null): {
     return { seed: seed, instance: instance };
 }
 
-export declare type PrefabProviderCallback = (guid: string) => Promise<GameObject | null>;
+export declare type PrefabProviderCallback = (guid: string) => Promise<Object3D | null>;
 
 const registeredPrefabProviders: { [key: string]: PrefabProviderCallback } = {};