@needle-tools/engine 3.5.9-beta.1 → 3.5.10-beta

package/src/engine/debug/debug_overlay.ts

@@ -104,7 +104,9 @@ export function addLog(type: LogType, message: string | any[], _file?: string |
 
 const currentMessages = new Set<string>();
 
-function showMessage(type: LogType, element: HTMLElement, msg: string) {
+function showMessage(type: LogType, element: HTMLElement, msg: string | null | undefined) {
+    if (msg === null || msg === undefined) return;
+
     const container = getLogsContainer(element);
     if (container.childElementCount >= 20) {
         const last = container.lastElementChild;
@@ -117,8 +119,9 @@ function showMessage(type: LogType, element: HTMLElement, msg: string) {
     const msgcontainer = getMessageContainer(type, msg);
     container.prepend(msgcontainer);
 
+    const _msg = msg;
     setTimeout(() => {
-        currentMessages.delete(msg);
+        currentMessages.delete(_msg);
         returnMessageContainer(msgcontainer);
     }, 10000);
 }

package/src/engine/engine_context.ts

@@ -2,7 +2,7 @@ import {
 	BufferGeometry, Camera, Clock, Color, DepthTexture, Group,
 	Material, NearestFilter, NoToneMapping, Object3D, PCFSoftShadowMap,
 	PerspectiveCamera, RGBAFormat, Scene, sRGBEncoding,
-	Texture, WebGLRenderer, WebGLRenderTarget
+	Texture, WebGLRenderer, WebGLRendererParameters, WebGLRenderTarget
 } from 'three'
 import { Input } from './engine_input';
 import { Physics } from './engine_physics';
@@ -259,9 +259,15 @@ export class Context implements IContext {
 			this.isManagedExternally = true;
 		}
 		else {
-			this.renderer = new WebGLRenderer({
-				antialias: true
-			});
+			const params: WebGLRendererParameters = {
+				antialias: true,
+			};
+			
+			// get canvas already configured in the Needle Engine Web Component
+			const canvas = args?.domElement?.shadowRoot?.querySelector("canvas");
+			if (canvas) params.canvas = canvas;
+
+			this.renderer = new WebGLRenderer(params);
 
 			// some tonemapping other than "NONE" is required for adjusting exposure with EXR environments
 			this.renderer.toneMappingExposure = 1; // range [0...inf] instead of the usual -15..15
@@ -551,7 +557,7 @@ export class Context implements IContext {
 
 		// console.log(prepare_succeeded);
 
-		if (!this.isManagedExternally)
+		if (!this.isManagedExternally && !this.domElement.shadowRoot)
 			this.domElement.prepend(this.renderer.domElement);
 
 		Context.Current = this;

package/src/engine/engine_element.ts

@@ -276,18 +276,22 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         if (currentHash !== null && currentHash !== undefined)
             this._context.hash = currentHash;
         this._context.alias = alias;
-        if (!this._context.isCreated)
+        const contextWasCreated = this._context.isCreated;
+        if (!contextWasCreated) {
             await this._context.onCreate(loadFunction);
+        }
         else {
             await loadFunction(this._context);
         }
 
 
 
-
+        console.log("Needle Engine: finished loading", alias ?? "")
         this._loadingProgress01 = 1;
-        if (useDefaultLoading)
+        if (useDefaultLoading) {
             this._loadingView?.onLoadingUpdate(1, "creating scene");
+            if (contextWasCreated) this.onReady();
+        }
         this.classList.remove("loading");
         this.classList.add("loading-finished");
         if (debug)
@@ -301,6 +305,7 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
 
     }
 
+    /** called by the context when the first frame has been rendered */
     private onReady = () => this._loadingView?.onLoadingFinished();
 
 

package/src/engine/engine_element_loading.ts

@@ -73,14 +73,15 @@ export class EngineLoadingView implements ILoadingViewHandler {
     }
 
     onLoadingBegin(message?: string) {
+        const _element = this._element.shadowRoot || this._element;
         if (debug) console.warn("Begin Loading")
         if (!this._loadingElement) {
-            for (let i = 0; i < this._element.children.length; i++) {
-                const el = this._element.children[i] as HTMLElement;
+            for (let i = 0; i < _element.children.length; i++) {
+                const el = _element.children[i] as HTMLElement;
                 if (el.classList.contains(EngineLoadingView.LoadingContainerClassName)) {
                     if (!this._allowCustomLoadingElement) {
                         if (debug) console.warn("Remove custom loading container")
-                        this._element.removeChild(el);
+                        _element.removeChild(el);
                         continue;
                     }
                     this._loadingElement = this.createLoadingElement(el);
@@ -92,7 +93,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._progress = 0;
         this.loadingProgress = 0;
         this._loadingElement.style.display = "flex";
-        this._element.appendChild(this._loadingElement);
+        _element.appendChild(this._loadingElement);
         this.smoothProgressLoop();
         this.setMessage(message ?? "");
     }
@@ -141,7 +142,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if (typeof debugRendering === "number") dt *= debugRendering;
         }
         this._progressLoop = setInterval(() => {
-            // increate loading speed when almost done
+            // increase loading speed when almost done
             if (this.loadingProgress >= .95 && !debugRendering) dt = .9;
             this._progress = Mathf.lerp(this._progress, this.loadingProgress, dt * this.loadingProgress);
             this.updateDisplay();
@@ -229,15 +230,12 @@ export class EngineLoadingView implements ILoadingViewHandler {
         else
             loadingBarContainer.style.backgroundColor = "rgba(255,255,255,.2)"
         // loadingBarContainer.style.alignItems = "center";
-        this._loadingElement.appendChild(loadingBarContainer);
 
         const logo = document.createElement("img");
         const logoSize = 64;
         logo.style.width = `${logoSize}px`;
         logo.style.height = `${logoSize}px`;
-        logo.style.position = "absolute";
-        logo.style.left = "50%";
-        logo.style.transform = `translate(-${logoSize * .5}px, -${logoSize + 32}px)`;
+        logo.style.marginBottom = "20px";
         logo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
         logo.style.cursor = "pointer";
         logo.style.userSelect = "none";
@@ -250,7 +248,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
                 logo.src = customLogo;
             }
         }
-        loadingBarContainer.appendChild(logo);
+        this._loadingElement.appendChild(logo); 
+        this._loadingElement.appendChild(loadingBarContainer);
 
 
         this._loadingBar = document.createElement("div");

package/src/engine/engine_license.ts

@@ -64,9 +64,10 @@ function insertNonCommercialUseHint(ctx: IContext) {
 
     const interval = setInterval(() => {
         if (!licenseElement) return;
-        if (licenseElement.parentElement !== ctx.domElement) {
-            ctx.domElement.appendChild(licenseElement);
-            if (style) ctx.domElement.appendChild(style);
+        const parent = ctx.domElement.shadowRoot || ctx.domElement;
+        if (licenseElement.parentNode !== parent) {
+            parent.appendChild(licenseElement);
+            if (style) parent.appendChild(style);
         }
     }, 100);
 
@@ -121,7 +122,7 @@ async function logNonCommercialUse(_logo?: string) {
 function createLicenseElement() {
     const licenseElement = document.createElement("div");
     licenseElement.setAttribute(licenseElementIdentifier, "");
-    licenseElement.style.position = "fixed";
+    licenseElement.style.position = "absolute";
     licenseElement.style.bottom = "12px";
     licenseElement.style.right = "15px";
 

package/src/engine/engine_physics_rapier.ts

@@ -21,6 +21,7 @@ import { Gizmos } from './engine_gizmos';
 import { Mathf } from './engine_math';
 import { SphereOverlapResult } from './engine_types';
 import { ContextEvent, ContextRegistry } from './engine_context_registry';
+import { isDevEnvironment } from './debug/debug';
 
 const debugPhysics = getParam("debugphysics");
 const debugColliderPlacement = getParam("debugphysicscolliders");
@@ -61,48 +62,49 @@ declare type PhysicsBody = {
 export class RapierPhysics implements IPhysicsEngine {
 
     removeBody(obj: IComponent) {
+        if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
         obj[$bodyKey] = null;
         if (body && this.world) {
             const index = this.objects.findIndex(o => o === obj);
             if (index >= 0) {
-                const body = this.bodies[index];
+                const rapierBody = this.bodies[index];
+                // Remove references
                 this.bodies.splice(index, 1);
                 this.objects.splice(index, 1);
 
-                if (body instanceof Collider) {
-                    const collider = body as Collider;
-                    this.world?.removeCollider(collider, true);
+                // Remove the collider from the physics world
+                if (rapierBody instanceof Collider) {
+                    const rapierCollider = rapierBody as Collider;
+                    this.world?.removeCollider(rapierCollider, true);
 
-                    // remove the rigidbody if it doesnt have colliders anymore
-                    const rb = collider.parent();
-                    if (rb && rb.numColliders() <= 0) {
-                        this.world?.removeRigidBody(rb);
+                    // also remove the rigidbody if it doesnt have colliders anymore
+                    const rapierRigidbody: RigidBody | null = rapierCollider.parent();
+                    if (rapierRigidbody && rapierRigidbody.numColliders() <= 0) {
+                        const rigidbody = rapierRigidbody[$componentKey] as IRigidbody;
+                        this.removeBody(rigidbody);
                     }
                 }
-                else if (body instanceof RigidBody) {
-                    // TODO: running this code below causes a crash in rapier
-                    // const rb = body as RigidBody;
-                    // console.log("colliders", rb.numColliders())
-                    // for (let i = 0; i < rb.numColliders(); i++) {
-                    //     const col = rb.collider(i);
-                    //     this.world?.removeCollider(col, true);
-                    // }
-                    // console.log("colliders", rb.numColliders(), rb)
-                    // console.log(rb.handle, rb.userData);
-                    // if (rb.userData === undefined)
-                    //     this.world?.removeRigidBody(rb);
-                }
+                // Remove the rigidbody from the physics world
+                else if (rapierBody instanceof RigidBody) {
+                    if (rapierBody.numColliders() <= 0) {
+                        this.world?.removeRigidBody(rapierBody);
+                    }
+                    else {
+                        if (isDevEnvironment()) {
+                            if (!rapierBody["did_log_removing"]) {
+                                setTimeout(() => {
+                                    if (rapierBody.numColliders() > 0) {
+                                        rapierBody["did_log_removing"] = true;
+                                        console.warn("RapierPhysics: removing rigidbody with colliders from the physics world is not possible right now, please remove the colliders first");
+                                    }
+                                }, 1);
 
-                // check if we need to remove the rigidbody too
-                // const col = obj as ICollider;
-                // if (col.isCollider && col.attachedRigidbody) {
-                //     const rb = col.attachedRigidbody[$bodyKey] as RigidBody;
-                //     if (rb && rb.numColliders() <= 0) {
-                //         // this.world?.removeRigidBody(rb);
-                //     }
-                // }
+                            }
+                        }
+                    }
+                }
             }
         }
     }
@@ -128,7 +130,7 @@ export class RapierPhysics implements IPhysicsEngine {
 
     updateProperties(rigidbody: IRigidbody) {
         this.validate();
-        const physicsBody = rigidbody[$bodyKey];
+        const physicsBody = this.internal_getRigidbody(rigidbody);
         if (physicsBody) {
             this.internalUpdateProperties(rigidbody, physicsBody);
         }
@@ -206,7 +208,7 @@ export class RapierPhysics implements IPhysicsEngine {
 
     private async internalInitialization() {
         // NEEDLE_PHYSICS_INIT_START
-        // use .env file with VITE_NEEDLE_USE_RAPIER=false to treeshape rapier
+        // use .env file with VITE_NEEDLE_USE_RAPIER=false to treeshake rapier
         // @ts-ignore
         if ("env" in import.meta && import.meta.env.VITE_NEEDLE_USE_RAPIER === "false") {
             return false;

package/src/engine-components/CameraUtils.ts

@@ -16,14 +16,15 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     scene.add(cameraObject);
 
     const camInstance = new Camera();
-    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera
+    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera;
     cam.sourceId = srcId;
     cam.clearFlags = 2;
     cam.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
 
-    cameraObject.position.x = -2;
-    cameraObject.position.y = 2;
+    cameraObject.position.x = 0;
+    cameraObject.position.y = 1;
     cameraObject.position.z = 2;
+
     return cam;
 });
 
@@ -46,6 +47,9 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreated, (evt) => {
         if (cameraObject) {
             const orbit = addNewComponent(cameraObject, new OrbitControls(), false) as OrbitControls;
             orbit.sourceId = "unknown";
+            setTimeout(() => {
+                orbit.fitCameraToObjects(evt.context.scene.children, 1);
+            }, 100);
         }
         else {
             console.warn("Missing camera object, can not add orbit controls")

package/src/engine-components/Component.ts

@@ -185,7 +185,7 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
      * @param go component to move the component to
      * @param instance component to move to the GO
      */
-    public static addComponent(go: IGameObject, instance: Component): void {
+    public static addComponent(go: IGameObject | Object3D, instance: Component): void {
         return this.moveComponent(go, instance);
     }
 
@@ -194,7 +194,7 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
      * @param go component to move the component to
      * @param instance component to move to the GO
      */
-    public static moveComponent(go: IGameObject, instance: Component): void {
+    public static moveComponent(go: IGameObject | Object3D, instance: Component): void {
         moveComponentInstance(go, instance as any);
     }
 

package/src/engine-components/OrbitControls.ts

@@ -87,7 +87,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
             if (camGo && !this.setFromTargetPosition()) {
                 if (this.debugLog)
                     console.log("NO TARGET");
-                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                const forward = new Vector3(0, 0, -10).applyMatrix4(camGo.cam.matrixWorld);
                 this.setTarget(forward, true);
             }
         }

package/src/engine-components/SpriteRenderer.ts

@@ -161,6 +161,14 @@ export class SpriteRenderer extends Behaviour {
     private _spriteSheet?: SpriteData;
     private _currentSprite?: THREE.Mesh;
 
+    // additional data
+    @serializable()
+    transparent: boolean = true;
+    @serializable()
+    cutoutThreshold: number = 0;
+    @serializable()
+    castShadows: boolean = false;
+
     awake(): void {
         this._currentSprite = undefined;
         if(debug) {
@@ -221,6 +229,11 @@ export class SpriteRenderer extends Behaviour {
             this._currentSprite.layers.set(this.layer)
         }
 
+        if (this.sharedMaterial) {
+            this.sharedMaterial.alphaTest = this.cutoutThreshold;
+            this.sharedMaterial.transparent = this.transparent;
+        }
+        this._currentSprite.castShadow = this.castShadows;
         this._spriteSheet?.update();
     }
 }

package/src/engine-components/webxr/WebXRPlaneTracking.ts

@@ -31,12 +31,11 @@ export class WebXRPlaneTracking extends Behaviour {
     /** Optional: if assigned it will be instantiated per tracked plane */
     @serializable(Object3D)
     planeTemplate?: Object3D;
+    @serializable()
+    initiateRoomCaptureIfNoPlanes = true;
 
     get trackedPlanes() { return this._allPlanes.values(); }
 
-
-
-
     onEnable(): void {
         WebXR.addEventListener(WebXREvent.XRUpdate, this.onXRUpdate);
         WebXR.addEventListener("modify-ar-options", this.onModifyAROptions);
@@ -61,6 +60,7 @@ export class WebXRPlaneTracking extends Behaviour {
 
     private _planeId = 1;
     private readonly _allPlanes = new Map<XRPlane, XRPlaneContext>();
+    private firstTimeNoPlanesDetected = -100;
 
     private processPlanes(rig: Object3D, frame: XRFramePlanes) {
         const renderer = this.context.renderer;
@@ -95,6 +95,24 @@ export class WebXRPlaneTracking extends Behaviour {
             }
         }
 
+        // When no planes are found and we haven't already run the coroutine,
+        // we start it and then wait for 2s before opening the settings.
+        // This only works on Quest through a magic method on the frame,
+        // see https://developer.oculus.com/documentation/web/webxr-mixed-reality/#:~:text=Because%20few%20people,once%20per%20session.
+        if (this.initiateRoomCaptureIfNoPlanes) {
+            if (frame.detectedPlanes.size == 0 && this.firstTimeNoPlanesDetected < -10)
+                this.firstTimeNoPlanesDetected = Date.now();
+            if (frame.detectedPlanes.size > 0)
+                this.firstTimeNoPlanesDetected = -1; // we're done
+            if (this.firstTimeNoPlanesDetected > 0 && Date.now() - this.firstTimeNoPlanesDetected > 2500) {
+                if ("initiateRoomCapture" in frame.session) {
+                    //@ts-ignore
+                    frame.session.initiateRoomCapture();
+                    this.firstTimeNoPlanesDetected = -1; // we're done
+                }
+            }
+        }
+
         for (const plane of frame.detectedPlanes) {
             const planePose = frame.getPose(plane.planeSpace, referenceSpace);
 
@@ -212,7 +230,6 @@ export class WebXRPlaneTracking extends Behaviour {
         };
     }
 
-
     createGeometry(polygon: Vec3[]) {
         const geometry = new BufferGeometry();