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

package/src/engine-components/ParticleSystem.ts

@@ -1,248 +1,368 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
-import * as Modules from "./ParticleSystemModules"
-import { Mathf } from "../engine/engine_math";
+import { MainModule, EmissionModule, ShapeModule, ParticleSystemShapeType, MinMaxCurve, MinMaxGradient, ColorOverLifetimeModule, SizeOverLifetimeModule, NoiseModule, ParticleSystemSimulationSpace } from "./ParticleSystemModules"
 import { getParam } from "../engine/engine_utils";
+import System, {
+    Emitter,
+    Rate,
+    Span,
+    Position,
+    Mass,
+    Radius,
+    Life,
+    PointZone,
+    Vector3D,
+    Alpha,
+    Scale,
+    Color,
+    SpriteRenderer,
+    RadialVelocity,
+    BoxZone,
+    Particle,
+    Gravity,
+    SphereZone,
+} from 'three-nebula';
+// https://github.dev/creativelifeform/three-nebula
+
+import { serializeable } from "../engine/engine_serialization";
+import { Time } from "../engine/engine_time";
+import { Context } from "../engine/engine_setup";
+import { RGBAColor } from "./js-extensions/RGBAColor";
+import { Mathf } from "../engine/engine_math";
+import { Vec3 } from "../engine/engine_types";
+import { AxesHelper, Material, Object3D, Sprite, SpriteMaterial, Vector3 } from "three";
+import { Renderer } from "./Renderer";
+import { getWorldQuaternion, getWorldScale } from "../engine/engine_three_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;
+    @serializeable(Material)
+    particleMaterial?: SpriteMaterial;
+}
+
+export class ParticleSystem extends Behaviour {
+
+    @serializeable(ColorOverLifetimeModule)
+    colorOverLifetime!: ColorOverLifetimeModule;
+
+    @serializeable(MainModule)
+    main!: MainModule;
+
+    @serializeable(EmissionModule)
+    emission!: EmissionModule;
+
+    @serializeable(SizeOverLifetimeModule)
+    sizeOverLifetime!: SizeOverLifetimeModule;
+
+    @serializeable(ShapeModule)
+    shape!: ShapeModule;
+
+    @serializeable(NoiseModule)
+    noise!: NoiseModule;
+
+    renderer!: ParticleSystemRenderer;
+
+    private _system!: System;
+    private _emitter: Emitter;
+    private _size!: SizeBehaviour;
+
+    awake(): void {
+        if (debug) {
+            console.log(this);
+            this.gameObject.add(new AxesHelper(1))
+        }
+
+        this.renderer = this.gameObject.getComponent(ParticleSystemRenderer) as ParticleSystemRenderer;
+        this._system = new System();
+        const container = this.main.simulationSpace == ParticleSystemSimulationSpace.Local ? this.gameObject : this.context.scene;
+
+
+        const renderer = new SpriteRenderer(container, THREE);
+        renderer.logRendererType = () => { };
+        if (this.renderer.particleMaterial) {
+            const sprite = renderer._body as Sprite;
+            sprite.layers.disableAll();
+            sprite.layers.set(2); // ignore raycasting particles
+            sprite.renderOrder = 1;
+            sprite.material.map = this.renderer.particleMaterial.map;
+            sprite.material.transparent = true;
+            // sprite.material.sizeAttenuation = false;
+            sprite.material.blending = this.renderer.particleMaterial.blending;
+            sprite.material.blendDst = this.renderer.particleMaterial.blendDst;
+            sprite.material.blendDstAlpha = this.renderer.particleMaterial.blendDstAlpha;
+            sprite.material.blendEquation = this.renderer.particleMaterial.blendEquation;
+            sprite.material.blendEquationAlpha = this.renderer.particleMaterial.blendEquationAlpha;
+            sprite.material.blendSrc = this.renderer.particleMaterial.blendSrc;
+            sprite.material.blendSrcAlpha = this.renderer.particleMaterial.blendSrcAlpha;
+            sprite.material.premultipliedAlpha = this.renderer.particleMaterial.premultipliedAlpha;
+            sprite.material.depthWrite = false;
+            sprite.material.depthTest = true;
+            if (debug) console.log(sprite);
         }
-        return null;
+
+        this._system.addRenderer(renderer);
+
+        const initializers: Array<any> = [];
+        const behaviours: Array<any> = [];
+
+
+
+        const life = new Life();
+        life.lifePan = new MinMaxCurveSpan(this.main.startLifetime, 1);
+        initializers.push(life);
+
+        const shape = new Position(this.shape);
+        initializers.push(shape);
+
+        const size = this._size = new SizeBehaviour(this.main.startSize, this.main.startSizeMultiplier);
+        size.sizeOverLifetimeModule = this.sizeOverLifetime;
+        behaviours.push(size);
+
+        const color = new GradientBehaviour(this.main.startColor, this.colorOverLifetime?.enabled ? this.colorOverLifetime.color : undefined);
+        behaviours.push(color);
+
+        const velocity = new VelocityBehaviour(renderer.container, this.shape, this.noise, this.main.startSpeed, 1);
+        velocity.gravity = this.main.gravityModifier;
+        velocity.gravityModifierMultiplier = this.main.gravityModifierMultiplier;
+        behaviours.push(velocity);
+
+
+        const emitter = this._emitter = new Emitter({});
+        emitter.setInitializers(initializers);
+        emitter.setBehaviours(behaviours);
+        emitter.setRate(this.emission);
+        emitter.damping = 0;
     }
 
-    getMesh(_index: number): THREE.Mesh | null {
-        if (!this.mesh) return null;
-        return this.context.assets.findMesh(this.mesh);
+    onEnable() {
+        this._emitter.emit();
+        this._system.addEmitter(this._emitter);
+        this._system.emit({ onStart: () => { }, onUpdate: () => { }, onEnd: () => { }, });
     }
 
-    private sharedMaterial?: string;
-    private mesh?: string;
+    onDisable() {
+        this._system.removeEmitter(this._emitter);
+    }
 
-    awake() {
-        if (debug)
-            console.log(this);
+    onBeforeRender() {
+        this.emission.currentParticles = this._system.getCount();
+        this.emission.maxParticles = this.main.maxParticles;
+        this.shape.update(this.context, this.main.simulationSpace, this.gameObject);
+        this.noise.update(this.context);
+        this._system.update(this.context.time.deltaTime * this.main.simulationSpeed);
+
+        // sprite materials must be scaled in AR
+        const cam = this.context.mainCamera;
+        if (cam) {
+            const scale = getWorldScale(cam);
+            this._size.cameraScale = scale.x;
+        }
     }
+
 }
 
-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;
+class MinMaxCurveSpan {
 
-    private positions!: THREE.Float32BufferAttribute;
-    private positionsArray!: Float32Array;
-    private particleStates: Array<ParticleState> = [];
-    private activeCount: number = 0;
+    readonly time: Time;
+    readonly curve: MinMaxCurve;
+    multiplier: number = 1;
 
-    private shapeRotation: THREE.Quaternion = new THREE.Quaternion();
-    private tempVec3: THREE.Vector3 = new THREE.Vector3();
-    private tempQuat: THREE.Quaternion = new THREE.Quaternion();
+    constructor(minMaxCurve: MinMaxCurve, multiplier: number = 1) {
+        this.time = Context.Current.time;
+        this.curve = minMaxCurve;
+        this.multiplier = multiplier;
+    }
 
-    awake(): void {
-        this.renderer = GameObject.getComponent(this.gameObject, ParticleSystemRenderer)!;
-        // if (debug)
-            console.log(this);
+    /** called by nebula */
+    getValue(lerp?: number) {
+        const res = this.curve.evaluate(this.time.time, lerp) * this.multiplier;
+        return res;
     }
+}
 
-    onEnable() {
-        // console.trace();
-        if (this.geometry) {
-            return;
-        }
-        // console.log(this);
+abstract class CustomBehaviour extends Behaviour {
+    abstract applyBehaviour(target: Particle | Emitter, time: number, index: number);
+    abstract initialize(particle: Particle);
+}
+
+abstract class MinMaxCurveBehaviour extends CustomBehaviour {
 
-        this.particleStates = [];
-        this.shapeRotation.setFromEuler(new THREE.Euler(this.shape.rotation.x, this.shape.rotation.y, this.shape.rotation.z));
+    readonly startCurve: MinMaxCurve;
+    startMultiplier: number = 1;
 
-        // TODO: how to render particle mesh
-        // const assignedMesh = this.renderer?.getMesh(0);
-        // console.log(assignedMesh);
+    constructor(startCurve: MinMaxCurve, startMultiplier: number = 1) {
+        super();
+        this.startCurve = startCurve;
+        this.startMultiplier = startMultiplier;
+    }
+}
+
+declare type ParticleWithScale = Particle & { target: Object3D, start_scale: number };
 
-        this.geometry = new THREE.BufferGeometry();
+class SizeBehaviour extends MinMaxCurveBehaviour {
 
-        this.positionsArray = new Float32Array(this.main.maxParticles * 3);
-        this.positions = new THREE.Float32BufferAttribute(this.positionsArray, 3);
-        this.geometry.setAttribute('position', this.positions);
+    sizeOverLifetimeModule!: SizeOverLifetimeModule;
 
+    cameraScale: number = 1;
 
-        // 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;
+    applyBehaviour(particle: ParticleWithScale, _deltaTime: number, _index: number) {
+        if (particle.target.type === "Sprite") {
+            particle.radius = 1 / this.cameraScale;
+        }
+        else particle.radius = 1;
+
+        // particle.target.scale.set(1,1,1);
+        if (this.sizeOverLifetimeModule?.enabled) {
+            const time = particle.age / particle.life;
+            const scaleVector = particle.target.scale;
+            this.sizeOverLifetimeModule.evaluate?.call(this.sizeOverLifetimeModule, time, scaleVector);
+            // scaleVector.set(.1, .1, .1)
+            particle.scale = particle.start_scale * scaleVector.x;
+            // console.log(time, particle.scale);
         }
-        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;
     }
+    initialize(particle: ParticleWithScale) {
+        particle.scale = this.startCurve.evaluate(0, Math.random());// * this.startMultiplier;
+        particle.start_scale = particle.scale;
 
-    // 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);
-    //     }
-    // }
-
-    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;
-            }
+declare type ParticleWithColor = Particle & { color_start: { r: number, g: number, b: number }, alpha_start: number };
+
+class GradientBehaviour extends CustomBehaviour {
+
+    private startGradient: MinMaxGradient;
+    private gradient?: MinMaxGradient;
 
-            ps.age += deltaTime;
-            this.particleStates[i] = ps;
+    constructor(startGradient: MinMaxGradient, gradient?: MinMaxGradient) {
+        super();
+        this.startGradient = startGradient;
+        this.gradient = gradient;
+    }
+
+    /** called from nebula */
+    applyBehaviour(target: ParticleWithColor | Emitter, _deltaTime: number, _index: number) {
+        // console.log(target, time, index)
+        if (target instanceof Particle) {
+            if (this.gradient) {
+                const t = target.age / target.life;
+                const ev = this.gradient.evaluate(t) as RGBAColor;
+                const startColor = target.color_start;
+                target.color.r = startColor.r * ev.r;
+                target.color.g = startColor.g * ev.g;
+                target.color.b = startColor.b * ev.b;
+                target.alpha = ev.alpha * target.alpha_start;
+            }
         }
-        this.activeCount += deltaTime * (this.emission.rate);
-        this.activeCount = Math.min(this.main.maxParticles, this.activeCount);
     }
 
-    private initializeParticle(index: number, particle: ParticleState) {
+    private id = Symbol('gradientId');
+    private _internalId: number = 0;
+
+    /** called from nebula */
+    initialize(particle: ParticleWithColor) {
+
+        // console.log(particle);
+        // const context = Context.Current;
+        // const time = context.time.time;
+        const ev = this.startGradient.evaluate(Math.random()) as RGBAColor;
+        particle.color.r = ev.r;
+        particle.color.g = ev.g;
+        particle.color.b = ev.b;
+        particle.alpha = ev.alpha
 
-        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);
+
+        particle.color_start = { r: ev.r, g: ev.g, b: ev.b };
+        particle.alpha_start = ev.alpha;
+
+        particle.useColor = true;
+        particle.useAlpha = true;
+
+        if (particle[this.id] === undefined)
+            particle[this.id] = this._internalId++;
     }
+}
+
+
+declare type ParticleWithVelocity = Particle & { velocity_start: { x: number, y: number, u: number }, gravity: number };
+
+class VelocityBehaviour extends CustomBehaviour {
+
+    container: Object3D;
+
+    shape: ShapeModule;
+    noise: NoiseModule;
 
-    private updateOverLifetime(_index: number, _particle: ParticleState) {
-        // particle.position.multiplyScalar()
+    startSpeed: MinMaxCurve;
+    startMultiplier: number = 1;
+
+    gravity?: MinMaxCurve;
+    gravityModifierMultiplier: number = 1;
+
+    downDirection = new Vector3(0, -1, 0);
+    private _temp: Vector3 = new Vector3();
+
+    constructor(container: Object3D, shape: ShapeModule, noise: NoiseModule, startCurve: MinMaxCurve, startMultiplier: number) {
+        super();
+        this.container = container;
+        this.shape = shape;
+        this.noise = noise;
+        this.startSpeed = startCurve;
+        this.startMultiplier = startMultiplier;
+
+        const quat = getWorldQuaternion(container);
+        this.downDirection.applyQuaternion(quat);
     }
 
-    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;
+    applyBehaviour(target: ParticleWithVelocity | Emitter, deltaTime: number, index: number) {
+
+        if (target instanceof Particle) {
+            // target.velocity.x = target.velocity_start.x;
+            // target.velocity.y = target.velocity_start.y;
+            // target.velocity.z = target.velocity_start.z;
+            if (target.gravity) {
+                // get world down vector
+                this._temp.copy(this.downDirection);
+                this._temp.multiplyScalar(target.gravity * deltaTime);
+                target.velocity.sub(this._temp);
+            }
+
+            if (this.noise) {
+                this.noise.applyNoise(index, target.position, target.velocity, deltaTime, target.age, target.life);
+            }
         }
     }
 
-    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;
+    initialize(particle: ParticleWithVelocity) {
+        const dir = this.shape.getDirection(particle.position);
+        const speed = this.startSpeed.evaluate(0, Math.random()) * this.startMultiplier;
+        particle.velocity.x = dir.x * speed;
+        particle.velocity.y = dir.y * speed;
+        particle.velocity.z = dir.z * speed;
+        if (!particle.velocity_start)
+            particle.velocity_start = {};
+        particle.velocity_start.x = particle.velocity.x;
+        particle.velocity_start.y = particle.velocity.y;
+        particle.velocity_start.z = particle.velocity.z;
+
+        if (this.gravity) {
+            particle.gravity = this.gravity.evaluate(0, Math.random()) * this.gravityModifierMultiplier * 9.81;
         }
-        velocity.normalize();
-
-        // set position
-        switch (this.shape.shapeType) {
-            case Modules.ParticleSystemShapeType.Circle:
-                position.add(velocity).multiplyScalar(this.shape.radius);
-                break;
+        else {
+            particle.gravity = 0;
         }
 
-        velocity.multiplyScalar(this.main.startSpeedMultiplier);
+        // particle.acceleration.y = 1;
+        // console.log(particle);
     }
+
 }