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

package/src/engine/engine_three_utils.ts

@@ -1,6 +1,6 @@
 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 } from "three";
 import { CircularBuffer } from "./engine_utils";
 
 
@@ -78,7 +78,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;
 }
@@ -180,39 +180,109 @@ export function logHierarchy(root: THREE.Object3D | null | undefined, collapsibl
 
 
 
-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);
-        }`
-});
 
+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;
+    }
+
+    // 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 +292,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_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/engine_utils.ts

@@ -363,4 +363,9 @@ export class Watch implements IWatch {
         }
         this._watches.length = 0;
     }
+}
+
+
+export function isMobileDevice() {
+    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
 }

package/src/engine-components/AnimationCurve.ts

@@ -22,21 +22,35 @@ export class AnimationCurve {
 
     @serializeable(Keyframe)
     keys!: Array<Keyframe>;
-    
-    get duration() : number {
-        if(!this.keys || this.keys.length == 0) return 0;
+
+    get duration(): number {
+        if (!this.keys || this.keys.length == 0) return 0;
         return this.keys[this.keys.length - 1].time;
-    } 
+    }
 
     evaluate(time: number): number {
-        if(!this.keys || this.keys.length == 0) return 0;
-        let lastKeyframe : Keyframe | null = null;
-        for (const kf of this.keys) {
-            if (lastKeyframe && kf.time > time && time > lastKeyframe!.time) {
-                return Mathf.lerp(lastKeyframe!.value, kf.value, (time - lastKeyframe!.time) / (kf.time - lastKeyframe!.time));
+        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) {
+            return this.keys[0].value;
+        }
+        for (let i = 0; i < this.keys.length; i++) {
+            const kf = this.keys[i];
+            if (kf.time <= time) {
+                const hasNextKeyframe = i+1 < this.keys.length;
+                if (hasNextKeyframe) {
+                    const nextKf = this.keys[i+1];
+                    // if the next
+                    if(nextKf.time < time) continue;
+                    const t = Mathf.remap(time, kf.time, nextKf.time, 0, 1);
+                    return Mathf.lerp(kf.value, nextKf.value, t);
+                }
+                else {
+                    return kf.value;
+                }
             }
-            lastKeyframe = kf;
         }
-        return this.keys[this.keys.length-1].value;
+        return this.keys[this.keys.length - 1].value;
     }
 }

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/Light.ts

@@ -1,6 +1,6 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
-import { getParam } from "../engine/engine_utils";
+import { getParam, isMobileDevice } from "../engine/engine_utils";
 import { setWorldPositionXYZ } from "../engine/engine_three_utils";
 import { FrameEvent } from "../engine/engine_setup";
 import { serializeable } from "../engine/engine_serialization_decorator";
@@ -8,6 +8,7 @@ import { Color, DirectionalLight, OrthographicCamera } from "three";
 import { WebXR, WebXREvent } from "./WebXR";
 import { WebARSessionRoot } from "./WebARSessionRoot";
 import { ILight } from "../engine/engine_types";
+import { Mathf } from "../engine/engine_math";
 
 // https://threejs.org/examples/webgl_shadowmap_csm.html
 
@@ -87,6 +88,7 @@ export class Light extends Behaviour implements ILight {
 
     @serializeable()
     private type: LightType = 0;
+
     public range: number = 1;
     public spotAngle: number = 1;
     public innerSpotAngle: number = 1;
@@ -137,7 +139,8 @@ export class Light extends Behaviour implements ILight {
     set shadows(val: LightShadows) {
         this._shadows = val;
         if (this.light) {
-            this.light.castShadow = val === LightShadows.Hard || val === LightShadows.Soft;
+            this.light.castShadow = val !== LightShadows.None;
+            this.updateShadowSoftHard();
         }
     }
     get shadows(): LightShadows { return this._shadows; }
@@ -284,9 +287,9 @@ export class Light extends Behaviour implements ILight {
     }
 
     createLight() {
-        if (this.light) return;
-        let lightAlreadyCreated = this.selfIsLight;
-        if (lightAlreadyCreated) {
+        const lightAlreadyCreated = this.selfIsLight;
+
+        if (lightAlreadyCreated && !this.light) {
             this.light = this.gameObject as unknown as THREE.Light;
 
             switch (this.type) {
@@ -295,7 +298,7 @@ export class Light extends Behaviour implements ILight {
                     break;
             }
         }
-        else {
+        else if(!this.light) {
             switch (this.type) {
                 case LightType.Directional:
                     // console.log(this);
@@ -339,7 +342,7 @@ export class Light extends Behaviour implements ILight {
         }
 
 
-        if (this.light !== undefined) {
+        if (this.light) {
             this._intensity = this.light.intensity;
 
             if (this.shadows !== LightShadows.None) {
@@ -356,6 +359,9 @@ export class Light extends Behaviour implements ILight {
                 this.light.shadow.mapSize.width = 2048;
                 this.light.shadow.mapSize.height = 2048;
             }
+            // this.light.shadow.needsUpdate = true;
+            // console.log(this.light.shadow.mapSize);
+            // return;
 
             if (debug)
                 console.log("Override shadow bias?", this._overrideShadowBiasSettings, this.shadowBias, this.shadowNormalBias);
@@ -370,7 +376,8 @@ export class Light extends Behaviour implements ILight {
                 this.light.shadow.normalBias = this.shadowNormalBias * .0001;
             }
 
-            // console.log(this.light.shadow, this);
+            this.updateShadowSoftHard();
+
             const cam = this.light.shadow.camera as THREE.OrthographicCamera;
             cam.near = this.shadowNearPlane;
             // use shadow distance that was set explictly (if any)
@@ -399,6 +406,8 @@ export class Light extends Behaviour implements ILight {
                 cam.top *= sy;
                 cam.bottom *= sy;
             }
+
+
             this.light.shadow.needsUpdate = true;
             if (debug)
                 this.context.scene.add(new THREE.CameraHelper(cam));
@@ -425,6 +434,28 @@ export class Light extends Behaviour implements ILight {
         }
     }
 
+    static allowChangingRendererShadowMapType: boolean = true;
+
+    private updateShadowSoftHard() {
+        if (!this.light) return;
+        if (this.shadows === LightShadows.Soft) {
+            const radius = this.light.shadow.mapSize.width / 1024 * 5;
+            const samples = Mathf.clamp(Math.round(radius), 2, 10);
+            this.light.shadow.radius = radius;
+            this.light.shadow.blurSamples = samples;
+            if (isMobileDevice()) {
+                this.light.shadow.radius *= .5;
+                this.light.shadow.blurSamples = Math.floor(this.light.shadow.blurSamples * .5);
+            }
+            if (Light.allowChangingRendererShadowMapType)
+                this.context.renderer.shadowMap.type = THREE.VSMShadowMap;
+        }
+        else {
+            this.light.shadow.radius = 1;
+            this.light.shadow.blurSamples = 1;
+        }
+    }
+
     private setDirectionalLight(dirLight: DirectionalLight) {
         dirLight.add(dirLight.target);
         dirLight.target.position.set(0, 0, -1);