Needle Engine 4.0.2-alpha

Files changed (5) hide show

src/engine/engine_gltf_builtin_components.ts +7 -4
src/engine/extensions/NEEDLE_components.ts +4 -0
src/engine/xr/NeedleXRSession.ts +15 -8
src/engine-components/OrbitControls.ts +11 -7
src/engine-components/webxr/controllers/XRControllerModel.ts +54 -36

src/engine/engine_gltf_builtin_components.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import { LogType, showBalloonMessage } from "./debug/index.js";
 import { addNewComponent } from "./engine_components.js";
-import { builtinComponentKeyName,editorGuidKeyName } from "./engine_constants.js";
+import { builtinComponentKeyName, editorGuidKeyName } from "./engine_constants.js";
 import { debugExtension } from "./engine_default_parameters.js";
 import { InstantiateIdProvider } from "./engine_networking_instantiate.js"
 import { isLocalNetwork } from "./engine_networking_utils.js";
@@ -42,7 +42,10 @@
 const $context_deserialize_queue = Symbol("deserialize-queue");
 export async function createBuiltinComponents(context: Context, gltfId: SourceIdentifier, gltf, seed: number | null | UIDProvider = null, extension?: NEEDLE_components) {
-    if (!gltf) return;
+    if (!gltf) {
+        console.debug("Can not create component instances: gltf is null");
+        return;
+    }
     const lateResolve: Array<(gltf: Object3D) => {}> = [];
     let idProvider: UIDProvider | null = seed as UIDProvider;
@@ -141,7 +144,7 @@
         }
     }
     const objectIdProvider = idProviderKey && idProviderCache.get(idProviderKey) || idProvider;
     obj.guid = objectIdProvider.generateUUID();
     if (prev && prev !== "invalid")
         guidsMap[prev] = obj.guid;
@@ -160,7 +163,7 @@
                     idProviderCache.set(idProviderKey, new InstantiateIdProvider(idProviderKey));
                 }
             }
-            else if(debug) console.warn("Can not create IdProvider: component " + comp[originalComponentNameKey] + " has no guid", comp.guid);
+            else if (debug) console.warn("Can not create IdProvider: component " + comp[originalComponentNameKey] + " has no guid", comp.guid);
             const componentIdProvider = idProviderCache.get(idProviderKey) || idProvider
             const prev = comp.guid;

src/engine/extensions/NEEDLE_components.ts CHANGED Viewed

@@ -39,6 +39,8 @@
     // import
     parser?: GLTFParser;
     nodeToObjectMap: NodeToObjectMap = {};
+    /** The loaded gltf */
+    gltf: GLTF | null = null;
     // export
     exportContext!: { [nodeIndex: number]: ExportData };
@@ -163,6 +165,8 @@
     // called by GLTFLoader
     async afterRoot(result: GLTF): Promise<void> {
+        this.gltf = result;
         const parser = result.parser;
         const ext = parser?.extensions;
         if (!ext) return;

src/engine/xr/NeedleXRSession.ts CHANGED Viewed

@@ -984,10 +984,13 @@
         // check if an xr controller for this input source already exists
         // in case we have both an event from inputsourceschange and from the construtor initial input sources
         if (this.controllers.find(c => c.inputSource === newInputSource)) {
-            console.warn("Controller already exists for input source", index);
+            console.debug("Controller already exists for input source", index);
             return;
         }
-        if (debug) console.log("Adding controller", index);
+        else if(this._newControllers.find(c => c.inputSource === newInputSource)) {
+            console.debug("Controller already registered for input source", index);
+            return;
+        }
         // TODO: check if this is a transient input source AND we can figure out which existing controller it likely belongs to
         // TODO: do not draw raycasts for controllers that don't have primary input actions / until we know that they have primary input actions
         const newController = new NeedleXRController(this, newInputSource, index);
@@ -996,7 +999,7 @@
     /** Disconnects the controller, invokes events and notifies previou controller (if any) */
     private disconnectInputSource(inputSource: XRInputSource) {
-        const handleController = (oldController: NeedleXRController, _array: Array<NeedleXRController>, i: number) => {
+        const handleRemove = (oldController: NeedleXRController, _array: Array<NeedleXRController>, i: number) => {
             if (oldController.inputSource === inputSource) {
                 if (debug) console.log("Disconnecting controller", oldController.index);
                 this.controllers.splice(i, 1);
@@ -1014,11 +1017,11 @@
         }
         for (let i = this.controllers.length - 1; i >= 0; i--) {
             const oldController = this.controllers[i];
-            handleController(oldController, this.controllers, i);
+            handleRemove(oldController, this.controllers, i);
         }
         for (let i = this._newControllers.length - 1; i >= 0; i--) {
             const oldController = this._newControllers[i];
-            handleController(oldController, this._newControllers, i);
+            handleRemove(oldController, this._newControllers, i);
         }
     }
@@ -1038,7 +1041,7 @@
         if (this._ended) return;
         this._ended = true;
-        if (debug) console.log("XR Session ended");
+        console.debug("XR Session ended");
         deleteSessionInfo();
@@ -1068,9 +1071,13 @@
         }
         // make sure we disconnect all controllers
-        for (let i = 0; i < this.controllers.length; i++) {
-            this.disconnectInputSource(this.controllers[i].inputSource);
+        // we copy the array because the disconnectInputSource method modifies the controllers array
+        const copy = [...this.controllers];
+        for (let i = 0; i < copy.length; i++) {
+            this.disconnectInputSource(copy[i].inputSource);
         }
+        this._newControllers.length = 0;
+        this.controllers.length = 0;
         // we want to call leave XR for *all* scripts that are still registered
         // even if they might already be destroyed e.g. by the WebXR component (it destroys the default controller scripts)

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -307,10 +307,13 @@
             }
             this._controls.addEventListener("start", this.onControlsChangeStarted);
-            if (!this._startedListeningToKeyEvents) {
+            if (!this._startedListeningToKeyEvents && this.enableKeys) {
                 this._startedListeningToKeyEvents = true;
-                this._controls.listenToKeyEvents(window.document.body);
+                this._controls.listenToKeyEvents(this.context.domElement);
             }
+            else {
+                this._controls.stopListenToKeyEvents();
+            }
         }
         this._syncedTransform = GameObject.getComponent(this.gameObject, SyncedTransform) ?? undefined;
         this.context.pre_render_callbacks.push(this.__onPreRender);
@@ -330,7 +333,8 @@
             this._controls.enabled = false;
             this._controls.autoRotate = false;
             this._controls.removeEventListener("start", this.onControlsChangeStarted);
-            // this._controls.reset();
+            this._controls.stopListenToKeyEvents();
+            this._startedListeningToKeyEvents = false;
         }
         this._activePointerEvents.length = 0;
         this.context.input.removeEventListener("pointerdown", this._onPointerDown);
@@ -383,7 +387,7 @@
     };
     private _onPointerUpLate = (evt: NEPointerEvent) => {
-        if(this.doubleClickToFocus && evt.isDoubleClick && !evt.used){
+        if (this.doubleClickToFocus && evt.isDoubleClick && !evt.used) {
             this.setTargetFromRaycast();
         }
     };
@@ -677,7 +681,7 @@
         // if a user calls setLookTargetPosition we don't want to perform autoTarget in onBeforeRender (and override whatever the user set here)
         this._didSetTarget++;
         if (debug) {
             console.warn("OrbitControls: setLookTargetPosition", position, immediateOrDuration);
             Gizmos.DrawWireSphere(this._lookTargetEndPosition, .2, 0xff0000, 2);
@@ -851,7 +855,7 @@
         const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance) + size.z / 2;
         if (debugCameraFit) {
-            console.log("Fit camera to objects", {fitHeightDistance, fitWidthDistance, distance, verticalFov, horizontalFov});
+            console.log("Fit camera to objects", { fitHeightDistance, fitWidthDistance, distance, verticalFov, horizontalFov });
         }
         this.maxZoom = distance * 10;
@@ -903,7 +907,7 @@
             cameraLocalPosition = camera.parent.worldToLocal(cameraLocalPosition);
         }
         this.setCameraTargetPosition(cameraLocalPosition, immediate);
         if (debugCameraFit) {
             const helper = new Box3Helper(box);
             this.context.scene.add(helper);

src/engine-components/webxr/controllers/XRControllerModel.ts CHANGED Viewed

@@ -7,15 +7,17 @@
 import { AssetReference } from "../../../engine/engine_addressables.js";
 import { setDontDestroy } from "../../../engine/engine_gameobject.js";
 import { Gizmos } from "../../../engine/engine_gizmos.js";
+import { getLoader } from "../../../engine/engine_gltf.js";
+import { createBuiltinComponents } from "../../../engine/engine_gltf_builtin_components.js";
 import { addDracoAndKTX2Loaders } from "../../../engine/engine_loaders.js";
 import { serializable } from "../../../engine/engine_serialization_decorator.js";
-import type { IGameObject } from "../../../engine/engine_types.js";
+import type { IGameObject, SourceIdentifier } from "../../../engine/engine_types.js";
 import { getParam } from "../../../engine/engine_utils.js";
 import { NeedleXRController, type NeedleXRControllerEventArgs, type NeedleXREventArgs, NeedleXRSession } from "../../../engine/engine_xr.js";
-import { registerExtensions } from "../../../engine/extensions/extensions.js";
+import { registerComponentExtension, registerExtensions } from "../../../engine/extensions/extensions.js";
 import { NEEDLE_progressive } from "../../../engine/extensions/NEEDLE_progressive.js";
 import { flipForwardMatrix } from "../../../engine/xr/internal.js";
-import { Behaviour, GameObject } from "../../Component.js"
+import { Behaviour, Component, GameObject } from "../../Component.js"
 const debug = getParam("debugwebxr");
@@ -70,11 +72,11 @@
         if (this.createControllerModel || this.createHandModel) {
             if (controller.hand) {
                 if (this.createHandModel) {
-                    const res = await this.loadHandModel(controller);
+                    const res = await this.loadHandModel(this, controller);
                     // check if the model doesnt exist, the hand disconnected or it's suddenly a controller
                     if (!res || !controller.connected || !controller.isHand) {
-                        res?.handObject?.removeFromParent();
-                        res?.handmesh?.controller?.removeFromParent();
+                        if (res?.handObject) setDontDestroy(res.handObject, false);
+                        res?.handObject?.destroy();
                         return;
                     }
                     this._models.push({ controller: controller, model: res.handObject, handmesh: res.handmesh });
@@ -113,6 +115,7 @@
         }
     }
     onXRControllerRemoved(args: NeedleXRControllerEventArgs): void {
+        console.debug("XR Controller Removed", args.controller.side, args.controller.index);
         // we need to find the index by the controller because if controller 0 is removed first then args.controller.index 1 will be at index 0
         const indexInArray = this._models.findIndex(m => m.controller === args.controller);
         const entry = this._models[indexInArray];
@@ -120,15 +123,29 @@
         this._models.splice(indexInArray, 1);
-        if (entry.handmesh) {
-            entry.handmesh.handModel?.removeFromParent();
-            entry.handmesh = undefined;
-        }
         if (entry.model) {
-            entry.model.removeFromParent();
+            setDontDestroy(entry.model, false);
+            entry.model.destroy();
             entry.model = undefined;
         }
     }
+    onLeaveXR(_args: NeedleXREventArgs): void {
+        for (const entry of this._models) {
+            if (!entry) continue;
+            if (entry.model) {
+                setDontDestroy(entry.model, false);
+                entry.model.destroy();
+                entry.model = undefined;
+            }
+            // Unassign the model from the controller when this script becomes inactive
+            if (entry.controller.model === entry.model) {
+                entry.controller.model = null;
+            }
+        }
+        this._models.length = 0;
+    }
     onBeforeRender() {
         if (!NeedleXRSession.active) return;
@@ -147,17 +164,6 @@
             }
         }
     }
-    onLeaveXR(_args: NeedleXREventArgs): void {
-        for (const entry of this._models) {
-            if (!entry) continue;
-            entry.model?.removeFromParent();
-            // Unassign the model from the controller when this script becomes inactive
-            if (entry.controller.model === entry.model) {
-                entry.controller.model = null;
-            }
-        }
-        this._models.length = 0;
-    }
     private updateRendering(xr: NeedleXRSession) {
@@ -171,6 +177,7 @@
                 continue;
             }
             // do we have a controller model?
             if (entry.model && !entry.handmesh) {
                 entry.model.matrixAutoUpdate = false;
@@ -253,7 +260,7 @@
         return model as IGameObject;
     }
-    protected async loadHandModel(controller: NeedleXRController): Promise<{ handObject: IGameObject, handmesh: XRHandMeshModel } | null> {
+    protected async loadHandModel(comp: Component, controller: NeedleXRController): Promise<{ handObject: IGameObject, handmesh: XRHandMeshModel } | null> {
         const context = this.context;
         const hand = context.renderer.xr.getHand(controller.index);
@@ -265,28 +272,39 @@
         const loader = new GLTFLoader();
         addDracoAndKTX2Loaders(loader, context);
         await registerExtensions(loader, context, this.sourceId ?? "");
-        loader.setPath('https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles/generic-hand/');
+        const componentsExtension = registerComponentExtension(loader);
-        // TODO: we should handle the loading here ourselves to not have this requirement of a specific model name
-        const expectedHandModelName = controller.side === "left" ? "left." : "right.";
+        let filename = "";
         const customHand = controller.side === "left" ? this.customLeftHand : this.customRightHand;
         if (customHand) {
-            if (!customHand.url.includes(expectedHandModelName)) {
-                console.warn("XRControllerModel: custom hand model must be named " + expectedHandModelName);
-                showBalloonWarning("Custom Hand: unexpected name, please see the console for details");
-            }
-            else {
-                const basePath = customHand.url.substring(0, customHand.url.indexOf(expectedHandModelName));
-                loader.setPath(basePath);
-                if (debug) console.log("XRControllerModel: loading custom hand model from " + basePath);
-            }
+            const urlWithoutExtension = customHand.url.split('.').slice(0, -1).join('.');
+            filename = urlWithoutExtension;
+            loader.setPath("");
         }
+        else {
+            // DEFAULT hands
+            // XRHandmeshModel is using "<handedness>.glb" for loading the file
+            filename = controller.inputSource.handedness === "left" ? "left" : "right";
+            loader.setPath('https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles/generic-hand/');
+        }
         const handObject = new Object3D();
         setDontDestroy(handObject);
         // @ts-ignore
-        const handmesh = new XRHandMeshModel(handObject, hand, loader.path, controller.inputSource.handedness, loader, (object: Object3D) => {
+        const handmesh = new XRHandMeshModel(handObject, hand, loader.path, filename, loader, (object: Object3D) => {
+            const gltf = componentsExtension.gltf;
+            // The XRHandMeshController removes the hand from the gltf before calling this callback
+            // we need this in the GLTF scene however for creating the builtin components
+            if (gltf?.scene.children?.length === 0) {
+                gltf.scene.children[0] = object;
+            }
+            // console.log(controller.side, componentsExtension.gltf, object, componentsExtension.gltf.scene?.children)
+            getLoader().createBuiltinComponents(comp.context, comp.sourceId || filename, componentsExtension.gltf, null, componentsExtension);
             // The hand mesh should not receive raycasts
             object.traverse(child => {
                 child.layers.set(2);