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

package/src/engine/engine_three_utils.ts

@@ -1,10 +1,9 @@
 import * as THREE from "three";
 import { Mathf } from "./engine_math"
-import { Vector3, Quaternion, Uniform } from "three";
+import { WebGLRenderTarget, WebGLRenderer, Vector3, Quaternion, Uniform, Texture, Material, ShaderMaterial, CanvasTexture, AnimationAction } from "three";
 import { CircularBuffer } from "./engine_utils";
 
 
-
 const flipYQuat: Quaternion = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), Math.PI);
 export function lookAtInverse(obj: THREE.Object3D, target: Vector3) {
 
@@ -78,7 +77,7 @@ const _worldScale2: THREE.Vector3 = new THREE.Vector3();
 
 export function getWorldScale(obj: THREE.Object3D, vec: THREE.Vector3 | null = null): THREE.Vector3 {
     if (!obj) return _worldScale.set(0, 0, 0);
-    if (!obj.parent) return _worldScale.copy(obj.position);
+    if (!obj.parent) return _worldScale.copy(obj.scale);
     obj.getWorldScale(vec ?? _worldScale);
     return vec ?? _worldScale;
 }
@@ -177,42 +176,122 @@ export function logHierarchy(root: THREE.Object3D | null | undefined, collapsibl
 }
 
 
+export function isAnimationAction(obj:object){
+    if(obj){
+        // this doesnt work :(
+        // return obj instanceof AnimationAction;
+        // instead we do this:
+        const act = obj as AnimationAction;
+        return act.blendMode !== undefined && act.clampWhenFinished !== undefined && act.enabled !== undefined && act.fadeIn !== undefined && act.getClip !== undefined;
+    }
+    return false;
+}
+
+
 
 
+export class Graphics {
+    private static planeGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);
+    private static renderer = new WebGLRenderer({ antialias: false });
+    private static perspectiveCam = new THREE.PerspectiveCamera();
+    private static scene = new THREE.Scene();
+    private static readonly vertex = `
+    varying vec2 vUv;
+    void main(){
+        vUv = uv;
+        gl_Position = vec4(position.xy * 1.0,0.,.999999);
+    }`;
+    private static readonly fragment = `
+    uniform sampler2D map; 
+    varying vec2 vUv;
+    void main(){ 
+        vec2 uv = vUv;
+        uv.y = 1.0 - uv.y;
+        gl_FragColor = texture2D( map, uv);
+        // gl_FragColor = vec4(uv.xy, 0, 1);
+    }`;
+    private static readonly blipMaterial = new ShaderMaterial({
+        uniforms: { map: new Uniform(null) },
+        vertexShader: this.vertex,
+        fragmentShader: this.fragment
+    });
+
+    static createBlitMaterial(fragment: string): ShaderMaterial {
+        return new ShaderMaterial({
+            uniforms: { map: new Uniform(null) },
+            vertexShader: this.vertex,
+            fragmentShader: fragment
+        });
+    }
+    private static readonly mesh = new THREE.Mesh(this.planeGeometry, this.blipMaterial);
+
+    static copyTexture(texture: Texture, blitMaterial?: ShaderMaterial) {
+        const material = blitMaterial ?? this.blipMaterial;
+        material.uniforms.map.value = texture;
+        material.needsUpdate = true;
+        material.uniformsNeedUpdate = true;
+        const 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);
+        const tex = new Texture(this.renderer.domElement);
+        tex.name = "Copy";
+        tex.needsUpdate = true; // < important!
+        return tex;
+    }
 
-const planeGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);
-const renderer = new THREE.WebGLRenderer({ antialias: false });
-const perspectiveCam = new THREE.PerspectiveCamera();
-const scene = new THREE.Scene();
-const shaderMaterial = new THREE.ShaderMaterial({
-    uniforms: { blitTexture: new Uniform(null) },
-    vertexShader: `
-        varying vec2 vUv;
-        void main(){
-            vUv = uv;
-            gl_Position = vec4(position.xy * 1.0,0.,.999999);
-        }`,
-    fragmentShader: `
-        uniform sampler2D blitTexture; 
-        varying vec2 vUv;
-        void main(){ 
-            vec2 uv = vUv;
-            uv.y = 1.0 - uv.y;
-            gl_FragColor = vec4(uv.xy, 0, 1);
-            gl_FragColor = texture2D( blitTexture, uv);
-        }`
-});
+    // 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);
+    // }
+
+    static textureToCanvas(texture: Texture, force: boolean) {
+        if (!texture) return null;
+
+        if (force === true || texture["isCompressedTexture"] === true) {
+            texture = copyTexture(texture);
+        }
+        const image = texture.image;
+        if (isImageBitmap(image)) {
+
+            const canvas = document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+
+            const 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;
+    }
+}
 
+/**@obsolete use Graphics.copyTexture */
 export function copyTexture(texture: THREE.Texture): THREE.Texture {
-    shaderMaterial.uniforms.blitTexture.value = texture;
-    const mesh = new THREE.Mesh(planeGeometry, shaderMaterial);
-    mesh.frustumCulled = false;
-    scene.children.length = 0;
-    scene.add(mesh);
-    renderer.setSize(texture.image.width, texture.image.height);
-    renderer.clear();
-    renderer.render(scene, perspectiveCam);
-    return new THREE.Texture(renderer.domElement);
+    return Graphics.copyTexture(texture);
+}
+
+/**@obsolete use Graphics.textureToCanvas */
+export function textureToCanvas(texture: THREE.Texture, force: boolean = false): HTMLCanvasElement | null {
+    return Graphics.textureToCanvas(texture, force);
 }
 
 declare class OffscreenCanvas { };
@@ -222,33 +301,4 @@ function isImageBitmap(image) {
         (typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement) ||
         (typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas) ||
         (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap);
-}
-
-
-export function textureToCanvas(texture: THREE.Texture, force : boolean = false): HTMLCanvasElement | null {
-
-    if(!texture) return null;
-    
-    if (force === true || texture["isCompressedTexture"] === true) {
-        texture = copyTexture(texture);
-    }
-
-    const image = texture.image;
-
-    if (isImageBitmap(image)) {
-
-        const canvas = document.createElement('canvas');
-        canvas.width = image.width;
-        canvas.height = image.height;
-
-        const 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;
 }

package/src/engine/engine_time.ts

@@ -27,6 +27,7 @@ export class Time {
         this.deltaTime = this.clock.getDelta();
         // clamp delta time because if tab is not active clock.getDelta can get pretty big
         this.deltaTime = Math.min(.1, this.deltaTime);
+        if(this.deltaTime <= 0) this.deltaTime = 0.000000000001;
         this.frame += 1;
         this.time += this.deltaTime;
 

package/src/engine/engine_types.ts

@@ -157,7 +157,14 @@ export type Vec2 = {
 export type Vec3 = {
     x: number,
     y: number,
-    z: number
+    z: number,
+}
+
+export type Vec4 = {
+    x: number,
+    y: number,
+    z: number,
+    w: number,
 }
 
 const contactsVectorBuffer = new CircularBuffer(() => new Vector3(), 20);

package/src/engine/extensions/NEEDLE_techniques_webgl.ts

@@ -57,6 +57,16 @@ enum CullMode {
     Front = 1,
     Back = 2,
 }
+enum ZTestMode {
+    Never = 1,
+    Less = 2,
+    Equal = 3,
+    LEqual = 4,
+    Greater = 5,
+    NotEqual = 6,
+    GEqual = 7,
+    Always = 8,
+}
 
 export class CustomShader extends RawShaderMaterial {
 
@@ -446,6 +456,7 @@ export class NEEDLE_techniques_webgl implements GLTFLoaderPlugin {
                     //     "USE_SHADOWMAP" : true
                     // },
                 });
+
             const culling = uniforms["_Cull"]?.value;
             switch (culling) {
                 case CullMode.Off:
@@ -462,6 +473,38 @@ export class NEEDLE_techniques_webgl implements GLTFLoaderPlugin {
                     break;
             }
 
+            const zTest = uniforms["_ZTest"]?.value as ZTestMode;
+            switch (zTest) {
+                case ZTestMode.Equal:
+                    material.depthTest = true;
+                    material.depthFunc = THREE.EqualDepth;
+                    break;
+                case ZTestMode.NotEqual:
+                    material.depthTest = true;
+                    material.depthFunc = THREE.NotEqualDepth;
+                    break;
+                case ZTestMode.Less:
+                    material.depthTest = true;
+                    material.depthFunc = THREE.LessDepth;
+                    break;
+                case ZTestMode.LEqual:
+                    material.depthTest = true;
+                    material.depthFunc = THREE.LessEqualDepth;
+                    break;
+                case ZTestMode.Greater:
+                    material.depthTest = true;
+                    material.depthFunc = THREE.GreaterDepth;
+                    break;
+                case ZTestMode.GEqual:
+                    material.depthTest = true;
+                    material.depthFunc = THREE.GreaterEqualDepth;
+                    break;
+                case ZTestMode.Always:
+                    material.depthTest = false;
+                    material.depthFunc = THREE.AlwaysDepth;
+                    break;
+            }
+
             material.transparent = isTransparent;
             if (isTransparent)
                 material.depthWrite = false;
@@ -490,7 +533,6 @@ export class NEEDLE_techniques_webgl implements GLTFLoaderPlugin {
             if (debug)
                 console.log(material.uuid, uniforms);
 
-
             createUniformProperties(material);
 
             resolve(material);

package/src/engine-components/Animation.ts

@@ -6,6 +6,9 @@ import { serializeable } from "../engine/engine_serialization_decorator";
 import { InstancingUtil } from "../engine/engine_instancing";
 import { Mathf } from "../engine/engine_math";
 import { Vec2 } from "../engine/engine_types";
+import { getParam } from "../engine/engine_utils";
+
+const debug = getParam("debuganimation");
 
 export declare class PlayOptions {
     fadeDuration?: number;
@@ -33,16 +36,19 @@ export class Animation extends Behaviour {
         return this.animations?.length ? this.animations[0] : null;
     }
     set clip(val: AnimationClip | null) {
-        if (!this.gameObject) {
+        if (!this.__didAwake) {
+            if(debug) console.log("Assign clip during serialization", val);
             this._tempAnimationClipBeforeGameObjectExisted = val;
             return;
         }
         if (!val) return;
+        if(debug) console.log("Assign clip", val, Boolean(this.gameObject));
         if (!this.gameObject.animations) this.gameObject.animations = [];
         this.gameObject.animations.push(val);
     }
 
     set animations(animations: THREE.AnimationClip[]) {
+        if(debug) console.log("assign animations", animations);
         this.gameObject.animations = animations;
     }
 

package/src/engine-components/AnimationCurve.ts

@@ -32,12 +32,12 @@ export class AnimationCurve {
         if (!this.keys || this.keys.length == 0) return 0;
         // if the first keyframe time is already greater than the time we want to evaluate
         // then we dont need to iterate
-        if (this.keys[0].time > time) {
+        if (this.keys[0].time >= time) {
             return this.keys[0].value;
         }
         for (let i = 0; i < this.keys.length; i++) {
             const kf = this.keys[i];
-            if (kf.time < time) {
+            if (kf.time <= time) {
                 const hasNextKeyframe = i+1 < this.keys.length;
                 if (hasNextKeyframe) {
                     const nextKf = this.keys[i+1];

package/src/engine-components/AnimatorController.ts

@@ -7,6 +7,7 @@ import * as THREE from "three";
 import { TypeStore } from "../engine/engine_typestore";
 import { assign } from "../engine/engine_serialization_core";
 import { Mathf } from "../engine/engine_math";
+import { isAnimationAction } from "../engine/engine_three_utils";
 
 const debug = getParam("debuganimatorcontroller");
 const debugRootMotion = getParam("debugrootmotion");
@@ -122,7 +123,10 @@ export class AnimatorController {
             // dont clone three Objects
             if (_value.type === "Object3D" || _value.isObject3D === true) return false;
             // dont clone AnimationAction
-            if (_value?.constructor?.name === "AnimationAction") return false;
+            if (isAnimationAction(_value)) { //.constructor.name === "AnimationAction") {
+                console.log(_value);
+                return false;
+            }
             // dont clone AnimationClip
             if (_value["tracks"] !== undefined) return false;
             return true;

package/src/engine-components/BoxHelperComponent.ts

@@ -1,10 +1,11 @@
 import { Behaviour } from "./Component";
 import * as THREE from "three";
 import { getParam } from "../engine/engine_utils";
-import { CreateWireCube } from "../engine/engine_gizmos";
+import { CreateWireCube, Gizmos } from "../engine/engine_gizmos";
 import { getWorldPosition, getWorldScale } from "../engine/engine_three_utils";
 
 const gizmos = getParam("gizmos");
+const debug = getParam("debugboxhelper");
 
 export class BoxHelperComponent extends Behaviour {
 
@@ -14,7 +15,7 @@ export class BoxHelperComponent extends Behaviour {
     private static _position: THREE.Vector3 = new THREE.Vector3();
     private static _size: THREE.Vector3 = new THREE.Vector3(.01, .01, .01);
 
-    public isInBox(obj: THREE.Object3D, scaleFactor? : number): boolean | undefined {
+    public isInBox(obj: THREE.Object3D, scaleFactor?: number): boolean | undefined {
         if (!obj) return undefined;
 
         // if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
@@ -24,15 +25,13 @@ export class BoxHelperComponent extends Behaviour {
             this.box = new THREE.Box3();
         }
 
+
         if (obj.type === "Mesh") {
             BoxHelperComponent.testBox.setFromObject(obj);
         }
         else if (obj.type === "Group") {
+            BoxHelperComponent.testBox.makeEmpty();
             if (obj.children.length > 0) {
-                BoxHelperComponent.testBox.setFromCenterAndSize(
-                    BoxHelperComponent._position.set(0, 0, 0),
-                    BoxHelperComponent._size.set(0, 0, 0)
-                );
                 for (let i = 0; i < obj.children.length; i++) {
                     const ch = obj.children[i];
                     if (ch.type === "Mesh") {
@@ -44,19 +43,17 @@ export class BoxHelperComponent extends Behaviour {
         else {
             const wp = getWorldPosition(obj, BoxHelperComponent._position);
             const size = getWorldScale(obj, BoxHelperComponent._size);
-            if(scaleFactor !== undefined) size.multiplyScalar(scaleFactor);
+            if (scaleFactor !== undefined) size.multiplyScalar(scaleFactor);
             BoxHelperComponent.testBox.setFromCenterAndSize(wp, size);
         }
 
-        // console.log("Obj box:", obj.name, obj.uuid, BoxHelperComponent.testBox.getCenter(new THREE.Vector3()), BoxHelperComponent.testBox.getSize(new THREE.Vector3()),
-        // "\nTest box:", this.box.getCenter(new THREE.Vector3()), this.box.getSize(new THREE.Vector3()), this.context.time.frameCount);
-        // this.tp.copy(obj.geometry.boundingBox);
-        // // this.tp.setFromCenterAndSize(obj.position, obj.scale);
-        // this.tp.applyMatrix4(obj.matrixWorld);
-        // console.log(this.tp);
-        // console.log(this.box?.min, this.box?.max, this.tp.min, this.tp.max);
         this.updateBox();
-        return this.box?.intersectsBox(BoxHelperComponent.testBox);
+        const intersects = this.box?.intersectsBox(BoxHelperComponent.testBox);
+        if (intersects) {
+            if (debug)
+                Gizmos.DrawBox3(BoxHelperComponent.testBox, 0xff0000, 5);
+        }
+        return intersects;
     }
 
     public intersects(box: THREE.Box3): boolean {

package/src/engine-components/Camera.ts

@@ -80,6 +80,19 @@ export class Camera extends Behaviour implements ICamera {
     @serializeable()
     public ARBackgroundAlpha: number = 0;
 
+    @serializeable()
+    public set cullingMask(val: number) {
+        this._cullingMask = val;
+        if (this._cam) {
+            this._cam.layers.mask = val;
+        }
+    }
+    public get cullingMask(): number {
+        if (this._cam) return this._cam.layers.mask;
+        return this._cullingMask;
+    }
+    private _cullingMask: number = 0xffffffff;
+
     private _nearClipPlane: number = 0.1;
     private _farClipPlane: number = 1000;
 
@@ -95,7 +108,7 @@ export class Camera extends Behaviour implements ICamera {
         }
         else this._backgroundColor.copy(val);
         // set background color to solid if provided color doesnt have any alpha channel
-        if(val.alpha === undefined) this._backgroundColor.alpha = 1;
+        if (val.alpha === undefined) this._backgroundColor.alpha = 1;
         this.applyClearFlagsIfIsActiveCamera();
     }
 
@@ -113,10 +126,6 @@ export class Camera extends Behaviour implements ICamera {
     }
 
 
-    // constructor(){
-    //     super();
-    //     console.log(this);
-    // }
 
     awake() {
         if (!this.sourceId) {
@@ -146,6 +155,7 @@ export class Camera extends Behaviour implements ICamera {
         let cam: THREE.PerspectiveCamera | THREE.OrthographicCamera | null = null;
         if (cameraAlreadyCreated) {
             cam = this.gameObject as any;
+            cam?.layers.enableAll();
         }
         else
             cam = this.gameObject.children[0] as THREE.PerspectiveCamera | THREE.OrthographicCamera | null;
@@ -167,11 +177,8 @@ export class Camera extends Behaviour implements ICamera {
         }
         this._cam = cam;
 
-        // workaround for layers in three affecting visibility by default
-        // we should probably export this info from unity as well
-        if (this.layer === 0) {
-            this._cam.layers.enableAll();
-        }
+        this._cam.layers.mask = this._cullingMask;
+
         if (this.tag == "MainCamera") {
             this.context.setCurrentCamera(this);
         }