@needle-tools/engine 2.41.0-pre → 2.42.0-pre

package/src/engine/dist/engine_three_utils.js

@@ -0,0 +1,279 @@
+"use strict";
+exports.__esModule = true;
+exports.textureToCanvas = exports.copyTexture = exports.Graphics = exports.logHierarchy = exports.setWorldRotationXYZ = exports.setWorldRotation = exports.getWorldRotation = exports.setWorldEuler = exports.getWorldEuler = exports.forward = exports.setWorldScale = exports.getWorldScale = exports.setWorldQuaternionXYZW = exports.setWorldQuaternion = exports.getWorldQuaternion = exports.setWorldPositionXYZ = exports.setWorldPosition = exports.getWorldPosition = exports.lookAtInverse = void 0;
+var THREE = require("three");
+var engine_math_1 = require("./engine_math");
+var three_1 = require("three");
+var engine_utils_1 = require("./engine_utils");
+var flipYQuat = new three_1.Quaternion().setFromAxisAngle(new three_1.Vector3(0, 1, 0), Math.PI);
+function lookAtInverse(obj, target) {
+    obj.lookAt(target);
+    obj.quaternion.multiply(flipYQuat);
+}
+exports.lookAtInverse = lookAtInverse;
+var _worldPositions = new engine_utils_1.CircularBuffer(function () { return new THREE.Vector3(); }, 100);
+function getWorldPosition(obj, vec, updateParents) {
+    if (vec === void 0) { vec = null; }
+    if (updateParents === void 0) { updateParents = true; }
+    var wp = vec !== null && vec !== void 0 ? vec : _worldPositions.get();
+    if (!obj)
+        return wp.set(0, 0, 0);
+    if (!obj.parent)
+        return wp.copy(obj.position);
+    if (updateParents)
+        obj.updateWorldMatrix(true, false);
+    if (obj.matrixWorldNeedsUpdate)
+        obj.updateMatrixWorld();
+    wp.setFromMatrixPosition(obj.matrixWorld);
+    return wp;
+}
+exports.getWorldPosition = getWorldPosition;
+function setWorldPosition(obj, val) {
+    var _a;
+    if (!obj)
+        return;
+    var wp = _worldPositions.get();
+    if (val !== wp)
+        wp.copy(val);
+    var obj2 = (_a = obj === null || obj === void 0 ? void 0 : obj.parent) !== null && _a !== void 0 ? _a : obj;
+    obj2.worldToLocal(wp);
+    obj.position.set(wp.x, wp.y, wp.z);
+}
+exports.setWorldPosition = setWorldPosition;
+function setWorldPositionXYZ(obj, x, y, z) {
+    var wp = _worldPositions.get();
+    wp.set(x, y, z);
+    setWorldPosition(obj, wp);
+}
+exports.setWorldPositionXYZ = setWorldPositionXYZ;
+var _worldQuaternionBuffer = new THREE.Quaternion();
+var _worldQuaternion = new THREE.Quaternion();
+var _tempQuaternionBuffer2 = new THREE.Quaternion();
+function getWorldQuaternion(obj, target) {
+    if (target === void 0) { target = null; }
+    if (!obj)
+        return _worldQuaternion.set(0, 0, 0, 1);
+    var quat = target !== null && target !== void 0 ? target : _worldQuaternion;
+    if (!obj.parent)
+        return quat.copy(obj.quaternion);
+    obj.getWorldQuaternion(quat);
+    return quat;
+}
+exports.getWorldQuaternion = getWorldQuaternion;
+function setWorldQuaternion(obj, val) {
+    if (!obj)
+        return;
+    if (val !== _worldQuaternionBuffer)
+        _worldQuaternionBuffer.copy(val);
+    var tempVec = _worldQuaternionBuffer;
+    var parent = obj === null || obj === void 0 ? void 0 : obj.parent;
+    parent === null || parent === void 0 ? void 0 : parent.getWorldQuaternion(_tempQuaternionBuffer2);
+    _tempQuaternionBuffer2.invert();
+    var q = _tempQuaternionBuffer2.multiply(tempVec);
+    // console.log(tempVec);
+    obj.quaternion.set(q.x, q.y, q.z, q.w);
+    // console.error("quaternion world to local is not yet implemented");
+}
+exports.setWorldQuaternion = setWorldQuaternion;
+function setWorldQuaternionXYZW(obj, x, y, z, w) {
+    _worldQuaternionBuffer.set(x, y, z, w);
+    setWorldQuaternion(obj, _worldQuaternionBuffer);
+}
+exports.setWorldQuaternionXYZW = setWorldQuaternionXYZW;
+var _worldScale = new THREE.Vector3();
+var _worldScale2 = new THREE.Vector3();
+function getWorldScale(obj, vec) {
+    if (vec === void 0) { vec = null; }
+    if (!obj)
+        return _worldScale.set(0, 0, 0);
+    if (!obj.parent)
+        return _worldScale.copy(obj.position);
+    obj.getWorldScale(vec !== null && vec !== void 0 ? vec : _worldScale);
+    return vec !== null && vec !== void 0 ? vec : _worldScale;
+}
+exports.getWorldScale = getWorldScale;
+function setWorldScale(obj, vec) {
+    if (!obj)
+        return;
+    if (!obj.parent) {
+        obj.scale.copy(vec);
+        return;
+    }
+    var tempVec = _worldScale2;
+    var obj2 = obj.parent;
+    obj2.getWorldScale(tempVec);
+    tempVec.divide(vec);
+    obj.scale.copy(tempVec);
+}
+exports.setWorldScale = setWorldScale;
+var _forward = new THREE.Vector3();
+var _forwardQuat = new THREE.Quaternion();
+function forward(obj) {
+    getWorldQuaternion(obj, _forwardQuat);
+    return _forward.set(0, 0, 1).applyQuaternion(_forwardQuat);
+}
+exports.forward = forward;
+var _worldEulerBuffer = new THREE.Euler();
+var _worldEuler = new THREE.Euler();
+var _worldRotation = new THREE.Vector3();
+// world euler (in radians)
+function getWorldEuler(obj) {
+    obj.getWorldQuaternion(_worldQuaternion);
+    _worldEuler.setFromQuaternion(_worldQuaternion);
+    return _worldEuler;
+}
+exports.getWorldEuler = getWorldEuler;
+// world euler (in radians)
+function setWorldEuler(obj, val) {
+    setWorldQuaternion(obj, _worldQuaternion.setFromEuler(val));
+    ;
+}
+exports.setWorldEuler = setWorldEuler;
+// returns rotation in degrees
+function getWorldRotation(obj) {
+    var rot = getWorldEuler(obj);
+    var wr = _worldRotation;
+    wr.set(rot.x, rot.y, rot.z);
+    wr.x = engine_math_1.Mathf.toDegrees(wr.x);
+    wr.y = engine_math_1.Mathf.toDegrees(wr.y);
+    wr.z = engine_math_1.Mathf.toDegrees(wr.z);
+    return wr;
+}
+exports.getWorldRotation = getWorldRotation;
+function setWorldRotation(obj, val) {
+    setWorldRotationXYZ(obj, val.x, val.y, val.z, true);
+}
+exports.setWorldRotation = setWorldRotation;
+function setWorldRotationXYZ(obj, x, y, z, degrees) {
+    if (degrees === void 0) { degrees = true; }
+    if (degrees) {
+        x = engine_math_1.Mathf.toRadians(x);
+        y = engine_math_1.Mathf.toRadians(y);
+        z = engine_math_1.Mathf.toRadians(z);
+    }
+    _worldEulerBuffer.set(x, y, z);
+    _worldQuaternionBuffer.setFromEuler(_worldEulerBuffer);
+    setWorldQuaternion(obj, _worldQuaternionBuffer);
+}
+exports.setWorldRotationXYZ = setWorldRotationXYZ;
+// from https://github.com/mrdoob/three.js/pull/10995#issuecomment-287614722
+function logHierarchy(root, collapsible) {
+    if (collapsible === void 0) { collapsible = true; }
+    if (!root)
+        return;
+    if (collapsible) {
+        (function printGraph(obj) {
+            console.groupCollapsed((obj.name ? obj.name : '(no name : ' + obj.type + ')') + ' %o', obj);
+            obj.children.forEach(printGraph);
+            console.groupEnd();
+        }(root));
+    }
+    else {
+        root.traverse(function (obj) {
+            var s = '|___';
+            var obj2 = obj;
+            while (obj2.parent !== null) {
+                s = '\t' + s;
+                obj2 = obj2.parent;
+            }
+            console.log(s + obj.name + ' <' + obj.type + '>');
+        });
+    }
+    ;
+}
+exports.logHierarchy = logHierarchy;
+var Graphics = /** @class */ (function () {
+    function Graphics() {
+    }
+    Graphics.createBlitMaterial = function (fragment) {
+        return new three_1.ShaderMaterial({
+            uniforms: { map: new three_1.Uniform(null) },
+            vertexShader: this.vertex,
+            fragmentShader: fragment
+        });
+    };
+    Graphics.copyTexture = function (texture, blitMaterial) {
+        var material = blitMaterial !== null && blitMaterial !== void 0 ? blitMaterial : this.blipMaterial;
+        material.uniforms.map.value = texture;
+        material.needsUpdate = true;
+        material.uniformsNeedUpdate = true;
+        var mesh = this.mesh;
+        mesh.material = material;
+        mesh.frustumCulled = false;
+        this.scene.children.length = 0;
+        this.scene.add(mesh);
+        this.renderer.setSize(texture.image.width, texture.image.height);
+        this.renderer.clear();
+        this.renderer.render(this.scene, this.perspectiveCam);
+        var tex = new three_1.Texture(this.renderer.domElement);
+        tex.name = "Copy";
+        tex.needsUpdate = true; // < important!
+        return tex;
+    };
+    // static blit(src: Texture, target: Texture, blitMaterial?: ShaderMaterial) {
+    //     let material = blitMaterial ?? this.blipMaterial;
+    //     material.uniforms.map.value = src;
+    //     this.mesh.material = material;
+    //     this.mesh.frustumCulled = false;
+    //     this.mesh.matrix.identity();
+    //     this.scene.children.length = 0;
+    //     this.scene.add(this.mesh);
+    //     this.renderer.setSize(src.image.width, src.image.height);
+    //     this.renderer.clear();
+    //     this.renderer.render(this.scene, this.perspectiveCam);
+    //     return new Texture(this.renderer.domElement);
+    // }
+    Graphics.textureToCanvas = function (texture, force) {
+        if (!texture)
+            return null;
+        if (force === true || texture["isCompressedTexture"] === true) {
+            texture = copyTexture(texture);
+        }
+        var image = texture.image;
+        if (isImageBitmap(image)) {
+            var canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+            var context = canvas.getContext('2d');
+            if (!context) {
+                console.error("Failed getting canvas 2d context");
+                return null;
+            }
+            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            return canvas;
+        }
+        return null;
+    };
+    Graphics.planeGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);
+    Graphics.renderer = new three_1.WebGLRenderer({ antialias: false });
+    Graphics.perspectiveCam = new THREE.PerspectiveCamera();
+    Graphics.scene = new THREE.Scene();
+    Graphics.vertex = "\n    varying vec2 vUv;\n    void main(){\n        vUv = uv;\n        gl_Position = vec4(position.xy * 1.0,0.,.999999);\n    }";
+    Graphics.fragment = "\n    uniform sampler2D map; \n    varying vec2 vUv;\n    void main(){ \n        vec2 uv = vUv;\n        uv.y = 1.0 - uv.y;\n        gl_FragColor = texture2D( map, uv);\n        gl_FragColor = vec4(uv.xy, 0, 1);\n    }";
+    Graphics.blipMaterial = new three_1.ShaderMaterial({
+        uniforms: { map: new three_1.Uniform(null) },
+        vertexShader: this.vertex,
+        fragmentShader: this.fragment
+    });
+    Graphics.mesh = new THREE.Mesh(this.planeGeometry, this.blipMaterial);
+    return Graphics;
+}());
+exports.Graphics = Graphics;
+/**@obsolete use Graphics.copyTexture */
+function copyTexture(texture) {
+    return Graphics.copyTexture(texture);
+}
+exports.copyTexture = copyTexture;
+/**@obsolete use Graphics.textureToCanvas */
+function textureToCanvas(texture, force) {
+    if (force === void 0) { force = false; }
+    return Graphics.textureToCanvas(texture, force);
+}
+exports.textureToCanvas = textureToCanvas;
+;
+function isImageBitmap(image) {
+    return (typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement) ||
+        (typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement) ||
+        (typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas) ||
+        (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap);
+}

package/src/engine/engine_element.ts

@@ -168,7 +168,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
             if (fn) {
                 this.classList.add("loading");
                 console.log("Needle Engine: Begin loading", alias ?? "");
-                const allowOverridingDefaultLoading = false;
+                const allowOverridingDefaultLoading = true;
                 // default loading can be overriden by calling preventDefault in the onload start event
                 const useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
                     detail: {

package/src/engine/engine_element_loading.ts

@@ -16,7 +16,11 @@ export interface ILoadingViewHandler {
 }
 
 export function calculateProgress01(progress: LoadingProgressArgs) {
-    return progress.index / progress.count + (progress.progress.loaded / progress.progress.total) / progress.count
+    if(debug) console.log(progress);
+    const count = Math.max(1, progress.count);
+    const total = Math.max(1, progress.progress.total);
+    const prog = progress.index / count + (progress.progress.loaded / total) / count;
+    return Mathf.clamp01(prog);
 }
 
 export class EngineLoadingView implements ILoadingViewHandler {

package/src/engine/engine_gizmos.ts

@@ -1,10 +1,11 @@
 import * as THREE from 'three';
-import { BufferAttribute, Line, BoxGeometry, EdgesGeometry, Color, LineSegments, LineBasicMaterial, Object3D, Mesh, SphereGeometry, ColorRepresentation, Vector3 } from 'three';
+import { BufferAttribute, Line, BoxGeometry, EdgesGeometry, Color, LineSegments, LineBasicMaterial, Object3D, Mesh, SphereGeometry, ColorRepresentation, Vector3, Box3, Quaternion } from 'three';
 import { Context } from './engine_setup';
 import { setWorldPosition, setWorldPositionXYZ } from './engine_three_utils';
-import { Vec3 } from './engine_types';
+import { Vec3, Vec4 } from './engine_types';
 
 const _tmp = new Vector3();
+const _quat = new Quaternion();
 
 const defaultColor: ColorRepresentation = 0x888888;
 
@@ -21,12 +22,19 @@ export class Gizmos {
         obj.material["depthTest"] = depthTest;
     }
 
-    static DrawDirection(pt: Vec3, direction: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
+    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
         positions.setXYZ(0, pt.x, pt.y, pt.z);
-        _tmp.set(direction.x, direction.y, direction.z);
-        _tmp.multiplyScalar(lengthFactor);
+        if (direction["w"] !== undefined) {
+            _tmp.set(0, 0, -lengthFactor);
+            _quat.set(direction["x"], direction["y"], direction["z"], direction["w"]);
+            _tmp.applyQuaternion(_quat);
+        }
+        else {
+            _tmp.set(direction.x, direction.y, direction.z);
+            _tmp.multiplyScalar(lengthFactor);
+        }
         positions.setXYZ(1, pt.x + _tmp.x, pt.y + _tmp.y, pt.z + _tmp.z);
         positions.needsUpdate = true;
         obj.material["color"].set(color);
@@ -34,7 +42,7 @@ export class Gizmos {
 
     }
 
-    static DrawLine(pt0: { x: number, y: number, z: number }, pt1: { x: number, y: number, z: number }, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawLine(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
         const obj = Internal.getLine(duration);
 
         const positions = obj.geometry.getAttribute("position");
@@ -45,19 +53,37 @@ export class Gizmos {
         obj.material["depthTest"] = depthTest;
     }
 
-    static DrawWireSphere(center: { x: number, y: number, z: number }, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
         const obj = Internal.getSphere(radius, duration, true);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
     }
 
-    static DrawSphere(center: { x: number, y: number, z: number }, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
         const obj = Internal.getSphere(radius, duration, false);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
     }
+
+    static DrawBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getBox(duration);
+        obj.position.set(center.x, center.y, center.z);
+        obj.scale.set(size.x, size.y, size.z);
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["wireframe"] = true;
+    }
+
+    static DrawBox3(box:Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getBox(duration);
+        obj.position.copy(box.getCenter(_tmp));
+        obj.scale.copy(box.getSize(_tmp));
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["wireframe"] = true;
+    }
 }
 
 const box: BoxGeometry = new BoxGeometry(1, 1, 1);
@@ -79,6 +105,16 @@ const $cacheSymbol = Symbol("GizmoCache");
 class Internal {
     // private static createdLines: number = 0;
 
+    static getBox(duration: number): Mesh {
+        let box = this.boxesCache.pop();
+        if (!box) {
+            const geo: BoxGeometry = new BoxGeometry(1, 1, 1);
+            box = new Mesh(geo);
+        }
+        this.registerTimedObject(Context.Current, box, duration, this.boxesCache);
+        return box;
+    }
+
     static getLine(duration: number): Line {
         let line = this.linesCache.pop();
         if (!line) {
@@ -107,6 +143,7 @@ class Internal {
 
     private static linesCache: Array<Line> = [];
     private static spheresCache: Mesh[] = [];
+    private static boxesCache: Mesh[] = [];
 
     private static registerTimedObject(context: Context, object: Object3D, duration: number, cache: Array<Object3D>) {
         if (!this.contextPostRenderCallbacks.get(context)) {

package/src/engine/engine_setup.ts

@@ -139,6 +139,11 @@ export class Context {
 			return el.getAROverlayContainer();
 		return this.domElement;
 	}
+	/** Current event of the update cycle */
+	get currentFrameEvent(): FrameEvent {
+		return this._currentFrameEvent;
+	}
+	private _currentFrameEvent: FrameEvent = -1;
 
 	scene: THREE.Scene;
 	renderer: THREE.WebGLRenderer;
@@ -517,6 +522,9 @@ export class Context {
 	}
 
 	private render(_, frame) {
+		
+		this._currentFrameEvent = -1;
+
 		this._stats?.begin();
 
 		Context._current = this;
@@ -538,6 +546,8 @@ export class Context {
 			}
 		}
 
+		this._currentFrameEvent = FrameEvent.EarlyUpdate;
+
 		for (let i = 0; i < this.scripts_earlyUpdate.length; i++) {
 			const script = this.scripts_earlyUpdate[i];
 			if (!script.activeAndEnabled) continue;
@@ -546,9 +556,10 @@ export class Context {
 				script.earlyUpdate();
 			}
 		}
-
 		this.executeCoroutines(FrameEvent.EarlyUpdate);
 
+		this._currentFrameEvent = FrameEvent.Update;
+
 		for (let i = 0; i < this.scripts_update.length; i++) {
 			const script = this.scripts_update[i];
 			if (!script.activeAndEnabled) continue;
@@ -557,9 +568,10 @@ export class Context {
 				script.update();
 			}
 		}
-
 		this.executeCoroutines(FrameEvent.Update);
 
+		this._currentFrameEvent = FrameEvent.LateUpdate;
+
 		for (let i = 0; i < this.scripts_lateUpdate.length; i++) {
 			const script = this.scripts_lateUpdate[i];
 			if (!script.activeAndEnabled) continue;
@@ -572,12 +584,15 @@ export class Context {
 		// this.mainLight = null;
 		this.executeCoroutines(FrameEvent.LateUpdate);
 
+
 		try {
 			const physicsSteps = 1;
 			const dt = this.time.deltaTime / physicsSteps;
 			for (let i = 0; i < physicsSteps; i++) {
+				this._currentFrameEvent = FrameEvent.PrePhysicsStep;
 				this.executeCoroutines(FrameEvent.PrePhysicsStep);
 				this.physics.step(dt);
+				this._currentFrameEvent = FrameEvent.PostPhysicsStep;
 				this.executeCoroutines(FrameEvent.PostPhysicsStep);
 			}
 		}
@@ -586,6 +601,8 @@ export class Context {
 		}
 		this.physics.postStep();
 
+		this._currentFrameEvent = FrameEvent.OnBeforeRender;
+
 		// should we move these callbacks in the regular three onBeforeRender events?
 		for (let i = 0; i < this.scripts_onBeforeRender.length; i++) {
 			const script = this.scripts_onBeforeRender[i];
@@ -609,6 +626,8 @@ export class Context {
 			}
 		}
 
+		this._currentFrameEvent = -10;
+
 		this._isRendering = true;
 		this.renderRequiredTextures();
 		if (!this.isManagedExternally) {
@@ -621,6 +640,8 @@ export class Context {
 		}
 		this._isRendering = false;
 
+		this._currentFrameEvent = FrameEvent.OnAfterRender;
+
 		for (let i = 0; i < this.scripts_onAfterRender.length; i++) {
 			const script = this.scripts_onAfterRender[i];
 			if (!script.activeAndEnabled) continue;
@@ -638,6 +659,8 @@ export class Context {
 			}
 		}
 
+		this._currentFrameEvent = -1;
+
 		this.connection.sendBufferedMessagesNow();
 
 		this._stats?.end();