@needle-tools/engine 4.12.2 → 4.12.3

package/src/engine/xr/TempXRContext.ts

@@ -1,8 +1,11 @@
-import { AxesHelper, Camera, Color, DirectionalLight, Fog, GridHelper, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PointLight, Scene, WebGLRenderer } from "three";
+import { ArrayCamera, AxesHelper, Camera, Color, DirectionalLight, Fog, GridHelper, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PlaneGeometry, PointLight, Scene, TextureLoader, Vector3, WebGLRenderer } from "three";
 
+import { needleLogoOnlySVG } from "../assets/index.js";
+import { isDevEnvironment } from "../debug/index.js";
 import { ObjectUtils, PrimitiveType } from "../engine_create_objects.js";
+import { hasCommercialLicense } from "../engine_license.js";
 import { Mathf } from "../engine_math.js";
-import { delay } from "../engine_utils.js";
+import { delay, DeviceUtilities } from "../engine_utils.js";
 
 export declare type SessionInfo = { session: XRSession, mode: XRSessionMode, init: XRSessionInit };
 
@@ -77,6 +80,9 @@ export class TemporaryXRContext {
     get isAR() {
         return this._mode === "immersive-ar";
     }
+    get isVR() {
+        return this._mode === "immersive-vr";
+    }
 
     private readonly _renderer: WebGLRenderer;
     private readonly _camera: Camera;
@@ -88,19 +94,31 @@ export class TemporaryXRContext {
         this._session = session;
         this._session.addEventListener("end", this.onEnd);
 
-        this._renderer = new WebGLRenderer({ alpha: true, antialias: true }); 
+        this._renderer = new WebGLRenderer({ alpha: true, antialias: true });
         this._renderer.outputColorSpace = 'srgb';
+        // Set pixel ratio and size
+        this._renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
+        this._renderer.setSize(window.innerWidth, window.innerHeight, true);
+        if (DeviceUtilities.isNeedleAppClip()) {
+            window.requestAnimationFrame(() => {
+                const dpr = Math.min(2, window.devicePixelRatio);
+                const expectedWidth = Math.floor(window.innerWidth * dpr);
+                const expectedHeight = Math.floor(window.innerHeight * dpr);
+                this._renderer.domElement.width = expectedWidth;
+                this._renderer.domElement.height = expectedHeight;
+            });
+        }
+
         this._renderer.setAnimationLoop(this.onFrame);
         this._renderer.xr.setSession(session);
         this._renderer.xr.enabled = true;
-        // Set pixel ratio and size
-        this._renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
-        this._renderer.setSize(window.innerWidth, window.innerHeight);
+
         this._camera = new PerspectiveCamera();
         this._scene = new Scene();
         this._scene.fog = new Fog(0x444444, 10, 250);
         this._scene.add(this._camera);
         this.setupScene();
+
     }
 
     end() {
@@ -133,6 +151,7 @@ export class TemporaryXRContext {
     }
 
     private _lastTime = 0;
+    private _frames = 0;
     private onFrame = (time: DOMHighResTimeStamp, _frame: XRFrame) => {
         const dt = time - this._lastTime;
         this.update(time, dt);
@@ -140,6 +159,39 @@ export class TemporaryXRContext {
             this._scene.add(this._camera);
         }
         this._renderer.render(this._scene, this._camera);
+        this._lastTime = time;
+        this._frames++;
+    }
+
+
+    private readonly _roomFlyObjects: Mesh[] = [];
+    private _logoObject: Mesh | null = null;
+    private get _logoDistance() {
+        return this.isAR ? 0.3 : 5;
+    }
+    private get _logoScale() {
+        return this.isAR ? 0.04 : 1;
+    }
+
+    private update(time: number, _deltaTime: number) {
+
+        const speed = time * .0004;
+        for (let i = 0; i < this._roomFlyObjects.length; i++) {
+            const obj = this._roomFlyObjects[i];
+            obj.position.y += Math.sin(speed + i * .5) * 0.005;
+            obj.rotateY(.002);
+        }
+
+        const logo = this._logoObject;
+        const xrCamera = this._renderer.xr.getCamera() as ArrayCamera;
+        if (logo) {
+            const cameraForward = new Vector3();
+            xrCamera.getWorldDirection(cameraForward);
+            const targetPosition = xrCamera.position.clone().addScaledVector(cameraForward, this._logoDistance);
+            const speed = this.isAR ? 0.005 : 0.00001; // in VR it's nicer to have the logo basically static
+            logo.position.lerp(targetPosition, this._frames <= 2 ? 1 : _deltaTime * speed);
+            logo.lookAt(this._camera.position);
+        }
     }
 
     /** can be used to prepare the user or fade to black */
@@ -159,10 +211,78 @@ export class TemporaryXRContext {
     }
 
 
-    private _objects: Mesh[] = [];
     private setupScene() {
         this._scene.background = new Color(0x000000);
-        this._scene.add(new GridHelper(5, 10, 0x111111, 0x111111));
+
+        let logoSrc = needleLogoOnlySVG;
+        if (hasCommercialLicense()) {
+            const htmlComponent = document.querySelector("needle-engine");
+            if (htmlComponent) {
+                const licenseLogo = htmlComponent.getAttribute("logo-src");
+                if (licenseLogo?.length) {
+                    logoSrc = licenseLogo;
+                    if (isDevEnvironment()) console.debug("[XR] Using custom loading logo from license:", logoSrc);
+                }
+            }
+        }
+        const logo = this._logoObject = new Mesh(new PlaneGeometry(1, 1, 1, 1), new MeshBasicMaterial({ transparent: true, side: 2 }));
+        logo.scale.multiplyScalar(this._logoScale * window.devicePixelRatio);
+        logo.renderOrder = 1000;
+        logo.material.opacity = 0;
+        this._scene.add(logo);
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const img = new Image();
+        const drawLogo = (loadingFailed: boolean) => {
+            if (!ctx) return;
+            logo.material.opacity = 1;
+            const size = 1024;
+            canvas.width = size;
+            canvas.height = size;
+            ctx.imageSmoothingQuality = "high";
+
+            // ctx.fillStyle = "#33333399";
+            // ctx.fillRect(0, 0, canvas.width, canvas.height,);
+
+            const padding = size * .19;
+            const aspect = loadingFailed ? 1 : img.width / img.height;
+            if (!loadingFailed) {
+                const maxHeight = canvas.height - padding * 1.5;
+                const imgWidth = maxHeight * aspect;
+                const imgX = (canvas.width - imgWidth) / 2;
+                ctx.drawImage(img, imgX, 0, imgWidth, maxHeight);
+            }
+            const fontSize = size * .12;
+            const text = "Loading...";
+            ctx.shadowBlur = 0;
+            ctx.fillStyle = this.isAR ? "white" : "rgba(255,255,255,0.4)";
+            ctx.font = `${fontSize}px Arial`;
+            ctx.shadowBlur = size * .02;
+            ctx.shadowColor = "rgba(0,0,0,0.5)";
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            const metrics = ctx.measureText(text);
+            ctx.fillText(text, canvas.width / 2 - metrics.width / 2, canvas.height - padding / 4);
+            ctx.font = `${fontSize}px Arial`;
+            ctx.fillText(text, canvas.width / 2 - metrics.width / 2, canvas.height - padding / 4);
+
+            const texture = new TextureLoader().load(canvas.toDataURL());
+            texture.generateMipmaps = true;
+            texture.colorSpace = 'srgb';
+            texture.anisotropy = 4;
+            const canvasAspect = canvas.width / canvas.height;
+            logo.scale.x = this._logoScale * canvasAspect * window.devicePixelRatio;
+            logo.scale.y = this._logoScale * window.devicePixelRatio;
+            logo.material.map = texture;
+            logo.material.needsUpdate = true;
+        }
+        img.onload = () => drawLogo(false);
+        img.onerror = e => {
+            console.error("Failed to load temporary XR logo:", logoSrc, e);
+            img.src = needleLogoOnlySVG;
+        };
+        img.crossOrigin = "anonymous";
+        img.src = logoSrc;
 
         const light = new DirectionalLight(0xffffff, 1);
         light.position.set(0, 20, 0);
@@ -180,48 +300,36 @@ export class TemporaryXRContext {
         light3.distance = 200;
         this._scene.add(light3);
 
-        const range =  50;
-        for (let i = 0; i < 100; i++) {
-            const material = new MeshStandardMaterial({
-                color: 0x222222,
-                metalness: 1,
-                roughness: .8,
-            });
-            // if we're in passthrough
-            if (this.isAR) {
-                material.emissive = new Color(Math.random(), Math.random(), Math.random());
-                material.emissiveIntensity = Math.random();
-            }
-            const type = Mathf.random(0, 1) > .5 ? PrimitiveType.Sphere : PrimitiveType.Cube;
-            const obj = ObjectUtils.createPrimitive(type, {
-                material
-            });
-            obj.position.x = Mathf.random(-range, range);
-            obj.position.y = Mathf.random(-2, range);
-            obj.position.z = Mathf.random(-range, range);
-            // random rotation
-            obj.rotation.x = Mathf.random(0, Math.PI * 2);
-            obj.rotation.y = Mathf.random(0, Math.PI * 2);
-            obj.rotation.z = Mathf.random(0, Math.PI * 2);
-            obj.scale.multiplyScalar(.5 + Math.random() * 10);
-
-            const dist = obj.position.distanceTo(this._camera.position) - obj.scale.x;
-            if (dist < 1) {
-                obj.position.multiplyScalar(1 + 1 / dist);
-            }
+        // if we're in passthrough
+        if (this.isAR === false) {
+            const range = 50;
+            for (let i = 0; i < 100; i++) {
+                const material = new MeshStandardMaterial({
+                    color: 0x222222,
+                    metalness: 1,
+                    roughness: .8,
+                });
 
-            this._objects.push(obj);
-            this._scene.add(obj);
-        }
-    }
+                const type = PrimitiveType.Sphere; //Mathf.random(0, 1) > .5 ? PrimitiveType.Sphere : PrimitiveType.Cube;
+                const obj = ObjectUtils.createPrimitive(type, { material });
+                obj.position.x = Mathf.random(-range, range);
+                obj.position.y = Mathf.random(-2, range);
+                obj.position.z = Mathf.random(-range, range);
+                // random rotation
+                obj.rotation.x = Mathf.random(0, Math.PI * 2);
+                obj.rotation.y = Mathf.random(0, Math.PI * 2);
+                obj.rotation.z = Mathf.random(0, Math.PI * 2);
+                obj.scale.multiplyScalar(.5 + Math.random() * 10);
 
-    private update(time: number, _deltaTime: number) {
+                const dist = obj.position.distanceTo(this._camera.position) - obj.scale.x;
+                if (dist < 10) {
+                    obj.position.z += 5;
+                    obj.position.multiplyScalar(1 + 1 / dist);
+                }
 
-        const speed = time * .0004;
-        for (let i = 0; i < this._objects.length; i++) {
-            const obj = this._objects[i];
-            obj.position.y += Math.sin(speed + i * .5) * 0.005;
-            obj.rotateY(.002);
+                this._roomFlyObjects.push(obj);
+                this._scene.add(obj);
+            }
         }
     }
 }

package/src/engine-components/SpectatorCamera.ts

@@ -229,11 +229,12 @@ export class SpectatorCamera extends Behaviour {
     onLeaveXR(_evt) {
         this.context.removeCamera(this.cam as ICamera);
         GameObject.setActive(this.gameObject, false);
-        if (this.orbit) this.orbit.enabled = true;
         this._handler?.set(undefined);
         this._handler?.disable();
         if (this.isSpectatingSelf)
             this.stopSpectating();
+        // Importantly re-enable orbit controls on main camera at the end here. This is a workaround for https://linear.app/needle/issue/NE-6897
+        if (this.orbit) this.orbit.enabled = true;
     }
 
     /**

package/src/engine-components/ui/InputField.ts

@@ -3,7 +3,7 @@ import { FrameEvent } from "../../engine/engine_setup.js";
 import { DeviceUtilities, getParam } from "../../engine/engine_utils.js";
 import { Behaviour, GameObject } from "../Component.js";
 import { EventList } from "../EventList.js";
-import { type IPointerEventHandler,PointerEventData } from "./PointerEvents.js";
+import { type IPointerEventHandler, PointerEventData } from "./PointerEvents.js";
 import { Text } from "./Text.js";
 import { tryGetUIComponent } from "./Utils.js";
 
@@ -111,8 +111,8 @@ export class InputField extends Behaviour implements IPointerEventHandler {
             this.setTextFromInputField();
         }
         else {
-            if(this.textComponent) this.textComponent.text = "";
-            if(this.placeholder) GameObject.setActive(this.placeholder.gameObject, true);
+            if (this.textComponent) this.textComponent.text = "";
+            if (this.placeholder) GameObject.setActive(this.placeholder.gameObject, true);
         }
     }
 
@@ -128,7 +128,7 @@ export class InputField extends Behaviour implements IPointerEventHandler {
 
     onPointerEnter(_args: PointerEventData) {
         const canSetCursor = _args.event.pointerType === "mouse" && _args.button === 0;
-        if(canSetCursor) this.context.input.setCursor("text");
+        if (canSetCursor) this.context.input.setCursor("text");
     }
     onPointerExit(_args: PointerEventData) {
         this.context.input.unsetCursor("text")
@@ -256,10 +256,15 @@ export class InputField extends Behaviour implements IPointerEventHandler {
 
     private selectInputField() {
         if (InputField.htmlField) {
-            if (debug) console.log("Focus Inputfield", InputField.htmlFieldFocused)
+            if (debug) console.log("Focus Inputfield", InputField.htmlFieldFocused, InputField.htmlField);
+
             InputField.htmlField.setSelectionRange(InputField.htmlField.value.length, InputField.htmlField.value.length);
-            if (DeviceUtilities.isiOS())
+
+            if (DeviceUtilities.isiOS()) {
+                // in WebXR (iOS AR Safari) display can not be none to focus input it seems
+                InputField.htmlField.style.display = "block";
                 InputField.htmlField.focus({ preventScroll: true });
+            }
             else {
                 // on Andoid if we don't focus in a timeout the keyboard will close the second time we click the InputField
                 setTimeout(() => InputField.htmlField?.focus(), 1);