@needle-tools/engine 2.24.0-pre

package/src/engine-components/OffsetConstraint.ts

@@ -0,0 +1,32 @@
+import { Behaviour, GameObject } from "./Component";
+import * as utils from "./../engine/engine_three_utils";
+import * as THREE from "three";
+
+export class OffsetConstraint extends Behaviour {
+
+    private from!: GameObject;
+    private affectPosition!: boolean;
+    private affectRotation!: boolean;
+    private alignLookDirection!: boolean;
+    private levelLookDirection!: boolean;
+    private positionOffset!: THREE.Vector3;
+    private rotationOffset!: THREE.Vector3;
+
+    update() {
+        if (!this.from) return;
+
+        var pos = utils.getWorldPosition(this.from);
+        var rot: THREE.Quaternion = utils.getWorldQuaternion(this.from);
+        
+        if(this.affectPosition) utils.setWorldPosition(this.gameObject, pos.add(this.positionOffset));
+        
+        const euler = new THREE.Euler(this.rotationOffset.x, this.rotationOffset.y, this.rotationOffset.z);
+        const quat = new THREE.Quaternion().setFromEuler(euler);
+        if(this.affectRotation) utils.setWorldQuaternion(this.gameObject, rot.multiply(quat));
+
+        let lookDirection = new THREE.Vector3();
+        this.from.getWorldDirection(lookDirection).multiplyScalar(50);
+        if (this.levelLookDirection) lookDirection.y = 0;
+        if (this.alignLookDirection) this.gameObject.lookAt(lookDirection);
+    }
+}

package/src/engine-components/OrbitControls.ts

@@ -0,0 +1,270 @@
+import { Behaviour, GameObject } from "./Component";
+import { Camera } from "./Camera";
+import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { LookAtConstraint } from "./LookAtConstraint";
+import * as THREE from "three";
+import { getWorldPosition } from "../engine/engine_three_utils";
+import { Physics, RaycastOptions } from "../engine/engine_physics";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Vector3 } from "three";
+
+export class OrbitControls extends Behaviour {
+
+    public get controls() {
+        return this._controls;
+    }
+
+    public get controllerObject(): THREE.Object3D | null {
+        return this._cameraObject;
+    }
+
+    public onStartInteraction(func: Function) {
+        this.controls?.addEventListener("start", func as any);
+    }
+
+    autoRotate: boolean = false;
+    autoRotateSpeed: number = 1.0;
+    enableKeys: boolean = true;
+    enableDamping: boolean = true;
+    dampingFactor: number = 0.1;
+    enableZoom: boolean = true;
+    minZoom: number = 0;
+    maxZoom: number = Infinity;
+    enablePan: boolean = true;
+    @serializeable(LookAtConstraint)
+    lookAtConstraint: LookAtConstraint | null = null;
+    lookAtConstraint01: number = 1;
+    middleClickToFocus: boolean = true;
+    doubleClickToFocus: boolean = true;
+
+    // remove once slerp works correctly
+    useSlerp: boolean = false;
+
+
+    debugLog: boolean = false;
+    targetLerpSpeed = 5;
+
+    private _lookTargetPosition!: THREE.Vector3;
+    private _controls: ThreeOrbitControls | null = null;
+    private _cameraObject: THREE.Object3D | null = null;
+
+    private _lerpToTargetPosition: boolean = false;
+    private _lerpCameraToTarget: boolean = false;
+    private _cameraTargetPosition: THREE.Vector3 | null = null;
+
+    private _inputs: number = 0;
+    private _enableTime: number = 0; // use to disable double click when double clicking on UI
+
+    awake(): void {
+        this._lookTargetPosition = new THREE.Vector3();
+    }
+
+    onEnable() {
+        this._enableTime = this.context.time.time;
+        const camGo = GameObject.getComponent(this.gameObject, Camera);
+        const cam = camGo?.cam;
+
+        if (!this._controls) {
+            console.assert(cam !== null && cam !== undefined, "Missing camera", this);
+            if (cam)
+                this._cameraObject = cam;
+            this._controls = new ThreeOrbitControls(cam!, this.context.renderer.domElement);
+        }
+
+        if (this._controls) {
+            this._controls.enableDamping = this.enableDamping;
+            this._controls.enableKeys = this.enableKeys;
+            this._controls.autoRotate = this.autoRotate;
+            this._controls.autoRotateSpeed = this.autoRotateSpeed;
+            this._controls.enableZoom = this.enableZoom;
+            if (cam?.type === "PerspectiveCamera") {
+                this._controls.minDistance = this.minZoom;
+                this._controls.maxDistance = this.maxZoom;
+            }
+            else {
+                this._controls.minZoom = this.minZoom;
+                this._controls.maxZoom = this.maxZoom;
+            }
+            this._controls.dampingFactor = this.dampingFactor;
+            this._controls.enablePan = this.enablePan;
+        }
+    }
+
+
+    onDisable() {
+        if (this._controls) {
+            this._controls.enabled = false;
+            this._controls.autoRotate = false;
+            // this._controls.reset();
+        }
+    }
+
+    start() {
+        if (this._controls) {
+            const camGo = GameObject.getComponent(this.gameObject, Camera);
+            if (camGo && !this.setFromTargetPosition()) {
+                console.log("NO TARGET");
+                const forward = new THREE.Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                this.setTarget(forward, true);
+            }
+        }
+        this.startCoroutine(this.startRaycastDelayed());
+    }
+
+    // we need to wait one frame (when starting the scene for the very first time)
+    private * startRaycastDelayed() {
+        yield;
+        if (!this.setFromTargetPosition()) {
+            const opts = new RaycastOptions();
+            // center of the screen:
+            opts.screenPoint = new THREE.Vector2(0, 0);
+            opts.lineThreshold = 0.1;
+            const hits = this.context.physics.raycast(opts);
+            if (hits.length > 0) {
+                this.setTarget(hits[0].point, true);
+            }
+        }
+    }
+
+    onBeforeRender() {
+        if (!this._controls) return;
+
+        if (this.context.input.getPointerDown(0) || this.context.input.getPointerDown(1) || this.context.input.getPointerDown(2)) {
+            this._inputs += 1;
+        }
+        if (this._inputs > 0) {
+            this._controls.autoRotate = false;
+            this._lerpCameraToTarget = false;
+            this._lerpToTargetPosition = false;
+        }
+        this._inputs = 0;
+
+        // if (this.context.input.getPointerLongPress(0) && this.context.time.frameCount % 20 === 0) console.log("LP", this.context.alias);
+
+        let focusAtPointer = (this.middleClickToFocus && this.context.input.getPointerClicked(1));
+        focusAtPointer ||= (this.doubleClickToFocus && this.context.input.getPointerDoubleClicked(0) && this.context.time.time - this._enableTime > .3);
+        if (focusAtPointer) {
+            this.setTargetFromRaycast();
+        }
+        else if (this.context.input.getPointerDown(0) || this.context.input.mouseWheelChanged) {
+            this._lerpToTargetPosition = false;
+            this._lerpCameraToTarget = false;
+        }
+
+        if (this._lerpToTargetPosition || this._lerpCameraToTarget) {
+            const step = this.context.time.deltaTime * this.targetLerpSpeed;
+
+            // confusing naming ahead:
+            // _targetObject: the target where the camera moves to
+            // targetPosition: the target where the look target moves to
+
+            // lerp the camera
+            if (this._lerpCameraToTarget && this._cameraTargetPosition && this._cameraObject) {
+                if (this.useSlerp && typeof this._cameraObject?.position["slerp"] === "function") {
+                    const position = this._cameraObject?.position;
+                    position
+                        // TODO fix the offset here
+                        // .sub(this._cameraTargetPosition)
+                        //@ts-ignore
+                        .slerp(this._cameraTargetPosition, step)
+                    // .add(this._cameraTargetPosition);
+                }
+                else {
+                    this._cameraObject?.position.lerp(this._cameraTargetPosition, step);
+                }
+                if (this._cameraObject.position.distanceTo(this._cameraTargetPosition) < .01) {
+                    this._lerpCameraToTarget = false;
+                }
+            }
+
+            // lerp the look target
+            if (this._lerpToTargetPosition) {
+
+                this.lerpTarget(this._lookTargetPosition, step);
+                if (this._lookTargetPosition.distanceTo(this._controls.target) < .005) {
+                    this._lerpToTargetPosition = false;
+                }
+            }
+        }
+
+        if (this.lookAtConstraint?.locked) this.setFromTargetPosition(0, this.lookAtConstraint01);
+
+
+        if (this._controls) {
+            if (this.debugLog)
+                this._controls.domElement = this.context.renderer.domElement;
+            this._controls.enabled = true;
+            this._controls.update();
+        }
+    }
+
+    public setCameraTarget(position?: THREE.Vector3 | null, immediate: boolean = false) {
+        if (!position) this._lerpCameraToTarget = false;
+        else {
+            this._lerpCameraToTarget = true;
+            this._cameraTargetPosition = position.clone();
+            if (immediate && this._cameraTargetPosition) {
+                this.controllerObject?.position.copy(this._cameraTargetPosition);
+            }
+        }
+    }
+
+    public setFromTargetPosition(index: number = 0, t: number = 1): boolean {
+        if (!this._controls) return false;
+        const sources = this.lookAtConstraint?.sources;
+        if (sources && sources.length > 0) {
+            const target = sources[index];
+            if (target) {
+                target.getWorldPosition(this._lookTargetPosition);
+                this.lerpTarget(this._lookTargetPosition, t);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    public setTarget(position: THREE.Vector3 | null = null, immediate: boolean = false) {
+        if (!this._controls) return;
+        if (position !== null) this._lookTargetPosition.copy(position);
+        if (immediate)
+            this._controls.target.copy(this._lookTargetPosition);
+        else this._lerpToTargetPosition = true;
+    }
+
+    public lerpTarget(position: THREE.Vector3, delta: number) {
+        if (!this._controls) return;
+        this._controls.target.lerp(position, delta);
+    }
+
+    public distanceToTarget(position: THREE.Vector3): number {
+        if (!this._controls) return -1;
+        return this._controls.target.distanceTo(position);
+    }
+
+    private setTargetFromRaycast() {
+        if (!this.controls) return;
+        const rc = this.context.physics.raycast();
+        for (const hit of rc) {
+            if (hit.distance > 0 && GameObject.isActiveInHierarchy(hit.object)) {
+                // if (hit.object && hit.object.parent) {
+                //     const par: any = hit.object.parent;
+                //     if (par.isUI) continue;
+                // }
+                // console.log("Set target", this.targetPosition, hit.object.name, hit.object);
+                this._lookTargetPosition.copy(hit.point);
+                this._lerpToTargetPosition = true;
+                this._cameraTargetPosition = null;
+                if (this.context.mainCamera) {
+                    this._lerpCameraToTarget = true;
+                    const pos = getWorldPosition(this.context.mainCamera);
+                    this._cameraTargetPosition = pos.clone().sub(this.controls.target).add(this._lookTargetPosition);
+                }
+                break;
+            }
+        }
+    }
+
+    // private onPositionDrag(){
+
+    // }
+}

package/src/engine-components/ParticleSystem.ts

@@ -0,0 +1,249 @@
+import { Behaviour, GameObject } from "./Component";
+import * as THREE from "three";
+import * as Modules from "./ParticleSystemModules"
+import { Mathf } from "../engine/engine_math";
+import { getParam } from "../engine/engine_utils";
+
+const debug = getParam("debugparticles");
+
+class ParticleState {
+    age: number = 0;
+    lifetime: number = 0;
+    position!: THREE.Vector3;
+    velocity!: THREE.Vector3;
+    color!: THREE.Color;
+}
+
+export class ParticleSystemRenderer extends Behaviour {
+
+    get mainTexture(): THREE.Texture | null {
+        if (this.sharedMaterial) {
+            const tex = this.context.assets.findTexture(this.sharedMaterial);
+            if (tex) return tex;
+        }
+        return null;
+    }
+
+    getMesh(_index: number): THREE.Mesh | null {
+        if (!this.mesh) return null;
+        return this.context.assets.findMesh(this.mesh);
+    }
+
+    private sharedMaterial?: string;
+    private mesh?: string;
+
+    awake() {
+        if (debug)
+            console.log(this);
+    }
+}
+
+export class ParticleSystem extends Behaviour {
+
+    main!: Modules.MainModule;
+    emission!: Modules.EmissionModule;
+    shape!: Modules.ShapeModule;
+
+    private renderer!: ParticleSystemRenderer;
+
+    private geometry: THREE.BufferGeometry | undefined;
+    private material!: THREE.PointsMaterial;
+    private particlesMesh!: THREE.Points;
+
+    private positions!: THREE.Float32BufferAttribute;
+    private positionsArray!: Float32Array;
+    private particleStates: Array<ParticleState> = [];
+    private activeCount: number = 0;
+
+    private shapeRotation: THREE.Quaternion = new THREE.Quaternion();
+    private tempVec3: THREE.Vector3 = new THREE.Vector3();
+    private tempQuat: THREE.Quaternion = new THREE.Quaternion();
+
+    awake(): void {
+        this.renderer = GameObject.getComponent(this.gameObject, ParticleSystemRenderer)!;
+        if (debug)
+            console.log(this);
+    }
+
+    onEnable() {
+        // console.trace();
+        if (this.geometry) {
+            return;
+        }
+        // console.log(this);
+
+        this.particleStates = [];
+        this.shapeRotation.setFromEuler(new THREE.Euler(this.shape.rotation.x, this.shape.rotation.y, this.shape.rotation.z));
+
+        // TODO: how to render particle mesh
+        // const assignedMesh = this.renderer?.getMesh(0);
+        // console.log(assignedMesh);
+
+        this.geometry = new THREE.BufferGeometry();
+
+        this.positionsArray = new Float32Array(this.main.maxParticles * 3);
+        this.positions = new THREE.Float32BufferAttribute(this.positionsArray, 3);
+        this.geometry.setAttribute('position', this.positions);
+
+
+        // const color = new THREE.Color();
+        const colorsArray = new Float32Array(this.main.maxParticles * 3);
+        for (let i = 0; i < colorsArray.length; i++) {
+            colorsArray[i * 3] = 1;
+            colorsArray[i * 3 + 1] = 1;
+            colorsArray[i * 3 + 2] = 1;
+        }
+        const colors = new THREE.Float32BufferAttribute(colorsArray, 3);
+        this.geometry.setAttribute('color', colors);
+        this.material = new THREE.PointsMaterial({ size: this.main.startSize, color: 0xffffff, vertexColors: true });
+        this.material.map = this.renderer.mainTexture;
+        // this.material.onBeforeCompile = (shader) => {
+        //     shader.
+        // });
+
+        this.particlesMesh = new THREE.Points(this.geometry, this.material);
+        this.particlesMesh.layers.enable(2);
+        this.gameObject.add(this.particlesMesh);
+
+        this.activeCount = this.main.prewarm ? this.main.maxParticles : 0;
+    }
+
+    update() {
+        if (!this.geometry) return;
+
+        const t = this.context.time.deltaTime;
+        this.emit(t);
+
+        for (let i = 0; i < this.activeCount; i += 1) {
+            const ps = this.particleStates[i];
+            if (!ps) continue;
+            const vx = ps.velocity.x * t;
+            const vy = ps.velocity.y * t;
+            const vz = ps.velocity.z * t;
+            ps.position.x += vx;
+            ps.position.y += vy;
+            ps.position.z += vz;
+            this.updateOverLifetime(i, ps);
+            this.geometry.attributes.position.setXYZ(i, ps.position.x, ps.position.y, ps.position.z);
+            this.geometry.attributes.color.setXYZ(i, ps.color.r, ps.color.g, ps.color.b);
+        }
+        if (this.geometry) {
+            this.geometry.attributes.position.needsUpdate = true;
+            this.geometry.setDrawRange(0, this.activeCount);
+        }
+        // console.log(this.activeCount);
+    }
+
+    emit(deltaTime: number) {
+        const count = this.activeCount;
+        for (let i = 0; i < count; i += 1) {
+
+            if (i >= this.particleStates.length) {
+                const ps = new ParticleState();
+                ps.lifetime = this.main.startLifetime ?? 1;
+                ps.position = new THREE.Vector3();
+                ps.velocity = new THREE.Vector3();
+                ps.color = new THREE.Color(1, 0, 0);
+                this.particleStates.push(ps);
+                this.initializeParticle(i, ps);
+                ps.age = ps.lifetime * Math.random();
+            }
+            const ps = this.particleStates[i];
+
+            if (ps.age > ps.lifetime) {
+                this.activeCount -= 1;
+                this.activeCount = Math.max(0, this.activeCount);
+                this.initializeParticle(i, ps);
+                continue;
+            }
+
+            ps.age += deltaTime;
+            this.particleStates[i] = ps;
+        }
+        this.activeCount += deltaTime * (this.emission.rate);
+        this.activeCount = Math.min(this.main.maxParticles, this.activeCount);
+    }
+
+    private initializeParticle(index: number, particle: ParticleState) {
+
+        if (!this.geometry) return;
+        particle.age = 0;
+        particle.color.set(this.main.startColor);
+        if (this.main.startColor1) {
+            particle.color.lerp(this.main.startColor1, Math.random());
+        }
+        this.geometry.attributes.color.needsUpdate = true;
+
+        this.assignPosition(particle.position);
+        this.assignVelocity(particle.position, particle.velocity);
+
+        const position = particle.position;
+        position.multiply(this.shape.scale);
+        position.applyQuaternion(this.shapeRotation);
+        position.add(this.shape.position);
+        // push back
+        this.particleStates.splice(index, 1);
+        this.particleStates.push(particle);
+    }
+
+    private updateOverLifetime(_index: number, _particle: ParticleState) {
+        // particle.position.multiplyScalar()
+    }
+
+    private assignPosition(position: THREE.Vector3) {
+        switch (this.shape.shapeType) {
+            case Modules.ParticleSystemShapeType.Sphere:
+                position.set(Math.random() - .5, Math.random() - .5, Math.random() - .5).multiplyScalar(this.shape.radius);
+                break;
+            case Modules.ParticleSystemShapeType.Box:
+                position.set(Math.random() - .5, Math.random() - .5, Math.random() - .5);
+                break;
+            default:
+                position.set(0, 0, 0);
+                break;
+        }
+    }
+
+    private assignVelocity(position: THREE.Vector3, velocity: THREE.Vector3) {
+        switch (this.shape.shapeType) {
+            case Modules.ParticleSystemShapeType.Sphere:
+                velocity.set(position.x, position.y, position.z);
+                break;
+            case Modules.ParticleSystemShapeType.Box:
+                velocity.set(0, 0, 1);
+                if (this.shape.sphericalDirectionAmount > 0) {
+                    this.tempVec3.set(position.x, position.y, position.z).multiply(this.shape.scale).normalize();
+                    velocity.lerp(this.tempVec3, this.shape.sphericalDirectionAmount);
+                }
+                break;
+            case Modules.ParticleSystemShapeType.Cone:
+                // const maxAngle = 90;
+                // const fwd = this.shape.angle / maxAngle;
+                // const side = 1 - fwd;
+                // const angle = Mathf.toRadians(this.shape.angle);
+                // const upDir = Math.random();
+                // const sideDir = 1 - upDir;
+                // const quat = new THREE.Quaternion().setFromAxisAngle(this.tempVec3.set(side, 0, fwd), angle * Math.random())
+                const dir = new THREE.Vector3(0, 1, 0);//.applyQuaternion(quat);
+                velocity.copy(dir);
+                break;
+            case Modules.ParticleSystemShapeType.Circle:
+                this.tempQuat.setFromAxisAngle(this.tempVec3.set(0, 0, 1), Math.random() * Mathf.toRadians(this.shape.arc));
+                velocity.copy(this.tempVec3.set(1, 0, 0).applyQuaternion(this.tempQuat));
+                break;
+            default:
+                velocity.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
+                break;
+        }
+        velocity.normalize();
+
+        // set position
+        switch (this.shape.shapeType) {
+            case Modules.ParticleSystemShapeType.Circle:
+                position.add(velocity).multiplyScalar(this.shape.radius);
+                break;
+        }
+
+        velocity.multiplyScalar(this.main.startSpeedMultiplier);
+    }
+}