@needle-tools/engine 4.2.2 → 4.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
   "main": "dist/needle-engine.min.js",
   "exports": {
@@ -86,7 +86,7 @@
   ],
   "dependencies": {
     "@dimforge/rapier3d-compat": "^0.14.0",
-    "@needle-tools/gltf-progressive": "^2.1.0",
+    "@needle-tools/gltf-progressive": "^2.1.1",
     "@webxr-input-profiles/motion-controllers": "^1.0.0",
     "flatbuffers": "2.0.4",
     "md5": "^2.3.0",

package/plugins/types/userconfig.d.ts

@@ -85,8 +85,8 @@ export type userSettings = {
     */
     posterGenerationMode?: "default" | "once";
 
-    /** Pass in a mix of VitePWA and NeedlePWA options, or "false" */
-    /** @type {import("vite-plugin-pwa").VitePWAOptions & Partial<NeedlePWAOptions> | false} */
+    /** Pass in a mix of VitePWA and NeedlePWA options, true to enable with defaults or "false" to disable */
+    /** @type {import("vite-plugin-pwa").VitePWAOptions & Partial<NeedlePWAOptions> | boolean} */
     pwa?: undefined;
 
     /** used by nextjs config to forward the webpack module */

package/plugins/vite/pwa.js

@@ -4,6 +4,7 @@ import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync,
 import { getOutputDirectory } from './config.js';
 import { getPosterPath } from './poster.js';
 
+const pwaErrorWithInstructions = "It seems that you're trying to build a PWA using 'vite-plugin-pwa'!\nNeedle can manage PWA settings for you – just pass the same 'pwaOptions' to the needlePlugins and VitePWA plugins:\n\n1. Install the vite PWA plugin: npm install vite-plugin-pwa --save-dev\n\n2. Then update your vite.config.js:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    ...\n    needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n    VitePWA(pwaOptions),\n\nIf you want to manage PWA building yourself and skip this check, please pass '{ pwa: false }' to needlePlugins.";
 
 /** Provides reasonable defaults for a PWA manifest and workbox settings.
  * @param {import('../types').userSettings} userSettings
@@ -13,7 +14,9 @@ import { getPosterPath } from './poster.js';
 export const needlePWA = (command, config, userSettings) => {
     // @ts-ignore // TODO correctly type the userSettings.pwaOptions object
     /** @type {import("vite-plugin-pwa").VitePWAOptions | false} */
-    const pwaOptions = userSettings.pwa;
+    const pwaOptions = userSettings.pwa === true
+        ? { } // allow setting `pwa: true`
+        : userSettings.pwa;
 
     /** The context contains files that are generated by the plugin and should be deleted after 
      * @type {import('../types').NeedlePWAProcessContext} */
@@ -29,7 +32,7 @@ export const needlePWA = (command, config, userSettings) => {
             apply: "build",
             configResolved(viteConfig) {
                 if (findVitePWAPlugin(viteConfig)) {
-                    errorThrow("It seems that you're trying to build a PWA using `vite-plugin-pwa`!\nNeedle can manage PWA settings for you – just pass the same `pwaOptions` to the `needlePlugin` and `VitePWA` plugins:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    ...\n    needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n    VitePWA(pwaOptions),\n\nIf you want to manage PWA building yourself and skip this check, please pass `{ pwa: false }` to needlePlugins.");
+                    errorThrow(pwaErrorWithInstructions);
                 }
             },
         }
@@ -88,7 +91,7 @@ export const needlePWA = (command, config, userSettings) => {
             let pwaPluginIndex = -1;
             let gzipPlugin = null;
             if (viteConfig.plugins) {
-                for (let i = viteConfig.plugins.length-1; i >= 0; i--) {
+                for (let i = viteConfig.plugins.length - 1; i >= 0; i--) {
                     const plugin = viteConfig.plugins[i];
                     if (plugin && "name" in plugin && plugin.name === "vite:compression") {
                         gzipPluginIndex = i;
@@ -152,7 +155,7 @@ export const needlePWA = (command, config, userSettings) => {
             try {
                 const plugin = findVitePWAPlugin(config);
                 if (!plugin) {
-                    errorThrow("It seems that you're trying to build a PWA!.\nRun `npm install vite-plugin-pwa --save-dev` to install the plugin\nThen add VitePWA to your vite.config.js and pass the pwaOptions to both Needle and VitePWA:\n\n    import { VitePWA } from 'vite-plugin-pwa';\n    \n    const pwaOptions = {};\n    \n    plugins: [\n        needlePlugins(command, needleConfig, { pwa: pwaOptions }),\n        VitePWA(pwaOptions),\n    ]\n\nIf you don't intend to build a PWA, pass `{ pwa: false }` to needlePlugins or remove the `pwa` entry.");
+                    errorThrow(pwaErrorWithInstructions);
                 }
 
                 // check if the index header contains the webmanifest ALSO
@@ -547,28 +550,36 @@ function processWorkboxConfig(manifest) {
         ],
         runtimeCaching: [
             // allow caching Google Fonts
-            {...externalResourceCaching, ...{
-                urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
-                options: { cacheName: 'google-fonts-cache' },
-            }},
+            {
+                ...externalResourceCaching, ...{
+                    urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+                    options: { cacheName: 'google-fonts-cache' },
+                }
+            },
             // allow caching static resources from Google, like CSS
-            {...externalResourceCaching, ...{
-                urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
-                options: { cacheName: 'gstatic-fonts-cache' },
-            }},
+            {
+                ...externalResourceCaching, ...{
+                    urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+                    options: { cacheName: 'gstatic-fonts-cache' },
+                }
+            },
             // allow caching Needle cdn resources
-            {...externalResourceCaching, ...{
-                urlPattern: /^https:\/\/cdn\.needle\.tools\/.*/i,
-                handler: 'NetworkFirst',
-                options: { cacheName: 'needle-cdn-cache' },
-            }},
+            {
+                ...externalResourceCaching, ...{
+                    urlPattern: /^https:\/\/cdn\.needle\.tools\/.*/i,
+                    handler: 'NetworkFirst',
+                    options: { cacheName: 'needle-cdn-cache' },
+                }
+            },
             // allow caching controller resources, 
             // https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/
-            {...externalResourceCaching, ...{
-                urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/npm\/@webxr-input-profiles\/assets@1\.0\/dist\/profiles\/.*/i,
-                handler: 'NetworkFirst',
-                options: { cacheName: 'webxr-controller-cache' },
-            }},
+            {
+                ...externalResourceCaching, ...{
+                    urlPattern: /^https:\/\/cdn\.jsdelivr\.net\/npm\/@webxr-input-profiles\/assets@1\.0\/dist\/profiles\/.*/i,
+                    handler: 'NetworkFirst',
+                    options: { cacheName: 'webxr-controller-cache' },
+                }
+            },
             // allow caching local resources
             {
                 urlPattern: ({ url }) => url,

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_context.ts

@@ -1468,10 +1468,14 @@ export class Context implements IContext {
 		return true;
 	}
 
+	private _contextRestoreTries = 0;
 	private handleRendererContextLost() {
-		if (this.renderer.getContext().isContextLost()) {
-			console.warn("Attempting to recover WebGL context...");
-			this.renderer.forceContextRestore();
+		// Try to restore the context every x frames
+		if (this.time.frame % 10 && this.renderer.getContext().isContextLost()) {
+			if (this._contextRestoreTries++ < 100) {
+				console.warn("Attempting to recover WebGL context...");
+				this.renderer.forceContextRestore();
+			}
 		}
 	}
 

package/src/engine/engine_loaders.ts

@@ -23,26 +23,22 @@ function ensureLoaders() {
 export function setDracoDecoderPath(path: string | undefined) {
     if (path !== undefined && typeof path === "string") {
         setDracoDecoderLocation(path);
-        const loaders = ensureLoaders();
-        if (debug) console.log("Setting draco decoder path to", path);
-        loaders.dracoLoader.setDecoderPath(path);
     }
 }
 
 export function setDracoDecoderType(type: string | undefined) {
     if (type !== undefined && typeof type === "string") {
-        const loaders = ensureLoaders();
-        if (debug) console.log("Setting draco decoder type to", type);
-        loaders.dracoLoader.setDecoderConfig({ type: type });
+        if (type !== "js") {
+            const loaders = ensureLoaders();
+            if (debug) console.log("Setting draco decoder type to", type);
+            loaders.dracoLoader.setDecoderConfig({ type: type });
+        }
     }
 }
 
 export function setKtx2TranscoderPath(path: string) {
     if (path !== undefined && typeof path === "string") {
         setKTX2TranscoderLocation(path);
-        const loaders = ensureLoaders();
-        if (debug) console.log("Setting ktx2 transcoder path to", path);
-        loaders.ktx2Loader.setTranscoderPath(path);
     }
 }
 
@@ -78,7 +74,7 @@ export function addDracoAndKTX2Loaders(loader: GLTFLoader, context: Pick<Context
     if (!(loader as any).meshoptDecoder)
         loader.setMeshoptDecoder(loaders.meshoptDecoder);
 
-    configureLoader(loader, { 
+    configureLoader(loader, {
         progressive: true,
     });
 

package/src/engine/engine_physics_rapier.ts

@@ -710,7 +710,7 @@ export class RapierPhysics implements IPhysicsEngine {
                 positions = this._meshCache.get(key)!;
             }
             else {
-                if (debugPhysics || isDevEnvironment()) console.warn(`Your MeshCollider \"${collider.name}\" is scaled: consider applying the scale to the collider mesh instead (${scale.x}, ${scale.y}, ${scale.z})`);
+                if (debugPhysics || isDevEnvironment()) console.debug(`[Performance] Your MeshCollider \"${collider.name}\" is scaled: consider applying the scale to the collider mesh instead (${scale.x}, ${scale.y}, ${scale.z})`);
                 const scaledPositions = new Float32Array(positions.length);
                 for (let i = 0; i < positions.length; i += 3) {
                     scaledPositions[i] = positions[i] * scale.x;

package/src/engine-components/OrbitControls.ts

@@ -1,13 +1,14 @@
-import { Box3Helper, Object3D, PerspectiveCamera, Ray, Vector2, Vector3, Vector3Like } from "three";
+import { Box3Helper, Euler, Object3D, PerspectiveCamera, Quaternion, Ray, Vector2, Vector3, Vector3Like } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
+import { isDevEnvironment } from "../engine/debug/index.js";
 import { setCameraController } from "../engine/engine_camera.js";
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { InputEventQueue, NEPointerEvent } from "../engine/engine_input.js";
 import { Mathf } from "../engine/engine_math.js";
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { getBoundingBox, getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
+import { getBoundingBox, getTempVector, getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
 import type { ICameraController } from "../engine/engine_types.js";
 import { DeviceUtilities, getParam } from "../engine/engine_utils.js";
 import { Camera } from "./Camera.js";
@@ -616,14 +617,38 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
 
     /** 
-     * Sets camera target position and look direction. Does perform a raycast in the forward direction of the passed in object to find an orbit point 
+     * Sets camera target position and look direction using a raycast in forward direction of the object.  
+     * 
+     * @param source The object to raycast from. If a camera is passed in the camera position will be used as the source.
+     * @param immediateOrDuration If true the camera target will move immediately to the new position, otherwise it will lerp. If a number is passed in it will be used as the duration of the lerp.
+     * 
+     * This is useful for example if you want to align your camera with an object in your scene (or another camera). Simply pass in this other camera object
+     * @returns true if the target was set successfully
      */
-    public setCameraAndLookTarget(target: Object3D) {
-        if (!target || !(target instanceof Object3D)) return;
-        const worldPosition = getWorldPosition(target);
-        const forward = getWorldDirection(target);
-        this.setTargetFromRaycast(new Ray(worldPosition, forward));
-        this.setCameraTargetPosition(worldPosition);
+    public setCameraAndLookTarget(source: Object3D | Camera, immediateOrDuration: number | boolean = false): boolean {
+        if (!source) {
+            if (isDevEnvironment()) console.warn("[OrbitControls] setCameraAndLookTarget target is null");
+            return false;
+        }
+        if (!(source instanceof Object3D) && !(source instanceof Camera)) {
+            if (isDevEnvironment()) console.warn("[OrbitControls] setCameraAndLookTarget target is not an Object3D or Camera");
+            return false;
+        }
+        if (source instanceof Camera) {
+            source = source.gameObject;
+        }
+        const worldPosition = source.worldPosition;
+        const forward = source.worldForward;
+        const ray = new Ray(worldPosition, forward.multiplyScalar(-1));
+
+        if (debug) Gizmos.DrawRay(ray.origin, ray.direction, 0xff0000, 10);
+
+        if (!this.setTargetFromRaycast(ray, immediateOrDuration)) {
+            this.setLookTargetPosition(ray.at(2, getTempVector()), immediateOrDuration);
+        }
+
+        this.setCameraTargetPosition(worldPosition, immediateOrDuration);
+        return true;
     }
 
     /** Moves the camera to position smoothly. 
@@ -653,6 +678,38 @@ export class OrbitControls extends Behaviour implements ICameraController {
             else this._cameraLerpDuration = this.targetLerpDuration;
         }
     }
+    // public setCameraTargetRotation(rotation: Vector3 | Euler | Quaternion, immediateOrDuration: boolean | number = false): void {
+    //     if (!this._cameraObject) return;
+
+    //     if (typeof immediateOrDuration === "boolean") immediateOrDuration = immediateOrDuration ? 0 : this.targetLerpDuration;
+
+    //     const ray = new Ray(this._cameraObject.worldPosition, getTempVector(0, 0, 1));
+
+    //     // if the camera is in the middle of lerping we use the end position for the raycast
+    //     if (immediateOrDuration > 0 && this._cameraEndPosition && this._cameraLerpActive) {
+    //         ray.origin = getTempVector(this._cameraEndPosition)
+    //     }
+
+    //     if (rotation instanceof Vector3) {
+    //         rotation = new Euler().setFromVector3(rotation);
+    //     }
+    //     if (rotation instanceof Euler) {
+    //         rotation = new Quaternion().setFromEuler(rotation);
+    //     }
+
+    //     ray.direction.applyQuaternion(rotation);
+    //     ray.direction.multiplyScalar(-1);
+
+    //     const hits = this.context.physics.raycastFromRay(ray);
+
+    //     if (hits.length > 0) {
+    //         this.setCameraTargetPosition(hits[0].point, immediateOrDuration);
+    //     }
+    //     else {
+    //         this.setLookTargetPosition(ray.at(2, getTempVector()));
+    //     }
+    // }
+
     /** True while the camera position is being lerped */
     get cameraLerpActive() { return this._cameraLerpActive; }
     /** Call to stop camera position lerping */
@@ -747,8 +804,8 @@ export class OrbitControls extends Behaviour implements ICameraController {
         else this._controls.target.lerp(position, delta);
     }
 
-    private setTargetFromRaycast(ray?: Ray) {
-        if (!this.controls) return;
+    private setTargetFromRaycast(ray?: Ray, immediateOrDuration: number | boolean = false): boolean {
+        if (!this.controls) return false;
         const rc = ray ? this.context.physics.raycastFromRay(ray) : this.context.physics.raycast();
         for (const hit of rc) {
             if (hit.distance > 0 && GameObject.isActiveInHierarchy(hit.object)) {
@@ -760,18 +817,11 @@ export class OrbitControls extends Behaviour implements ICameraController {
                         break;
                     }
                 }
-
-                this.setLookTargetPosition(hit.point);
-
-                // if (this.context.mainCamera) {
-                //     const pos = getWorldPosition(this.context.mainCamera);
-                //     const cameraTarget = pos.clone().sub(this.controls.target).add(this._lookTargetEndPosition);
-                //     this._cameraObject?.parent?.worldToLocal(cameraTarget);
-                //     this.setCameraTargetPosition(cameraTarget);
-                // }
-                break;
+                this.setLookTargetPosition(hit.point, immediateOrDuration);
+                return true;
             }
         }
+        return false;
     }
 
     // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24

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

@@ -18,6 +18,15 @@ export class InputField extends Behaviour implements IPointerEventHandler {
     get text(): string {
         return this.textComponent?.text ?? "";
     }
+    set text(value: string) {
+        if (this.textComponent) {
+            this.textComponent.text = value;
+            if (this.placeholder) {
+                if (value.length > 0) this.placeholder.gameObject.visible = false;
+                else this.placeholder.gameObject.visible = true;
+            }
+        }
+    }
 
     get isFocused() {
         return InputField.active === this;