@needle-tools/engine 2.41.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-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/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/ParticleSystem.ts

@@ -1,107 +1,160 @@
 import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
-import { MainModule, EmissionModule, ShapeModule, ParticleSystemShapeType, MinMaxCurve, MinMaxGradient, ColorOverLifetimeModule, SizeOverLifetimeModule, NoiseModule, ParticleSystemSimulationSpace } from "./ParticleSystemModules"
+import { MainModule, EmissionModule, ShapeModule, ParticleSystemShapeType, MinMaxCurve, MinMaxGradient, ColorOverLifetimeModule, SizeOverLifetimeModule, NoiseModule, ParticleSystemSimulationSpace, ParticleBurst, IParticleSystem, ParticleSystemRenderMode } 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 System, { Emitter, Position, Life, SpriteRenderer, Particle, Body, MeshRenderer, } from '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 { AxesHelper, BufferGeometry, Material, Mesh, Object3D, Sprite, SpriteMaterial, Vector3 } from "three";
 import { getWorldQuaternion, getWorldScale } from "../engine/engine_three_utils";
+import { assign } from "../engine/engine_serialization_core";
 
 const debug = getParam("debugparticles");
 
 
-
 export class ParticleSystemRenderer extends Behaviour {
 
+    @serializeable()
+    renderMode?: ParticleSystemRenderMode;
+
     @serializeable(Material)
     particleMaterial?: SpriteMaterial;
+
+    // @serializeable(Mesh)
+    particleMesh?: Mesh | string;
+
+
+    getMesh() {
+        let geo: BufferGeometry | null = null;
+        if (this.particleMesh instanceof Mesh) {
+            geo = this.particleMesh.geometry;
+        }
+        if (geo === null) geo = new THREE.BoxGeometry(1, 1, 1);
+        const res = new Mesh(geo, this.particleMaterial);
+        return res;
+    }
 }
 
-export class ParticleSystem extends Behaviour {
+export class ParticleSystem extends Behaviour implements IParticleSystem {
 
     @serializeable(ColorOverLifetimeModule)
-    colorOverLifetime!: ColorOverLifetimeModule;
+    readonly colorOverLifetime!: ColorOverLifetimeModule;
 
     @serializeable(MainModule)
-    main!: MainModule;
+    readonly main!: MainModule;
 
     @serializeable(EmissionModule)
-    emission!: EmissionModule;
+    readonly emission!: EmissionModule;
 
     @serializeable(SizeOverLifetimeModule)
-    sizeOverLifetime!: SizeOverLifetimeModule;
+    readonly sizeOverLifetime!: SizeOverLifetimeModule;
 
     @serializeable(ShapeModule)
-    shape!: ShapeModule;
+    readonly shape!: ShapeModule;
 
     @serializeable(NoiseModule)
-    noise!: NoiseModule;
+    readonly noise!: NoiseModule;
+
+    get renderer(): ParticleSystemRenderer {
+        return this._renderer;
+    }
 
-    renderer!: ParticleSystemRenderer;
+    get currentParticles() {
+        return this._system?.getCount() ?? 0;
+    }
+    get maxParticles() {
+        return this.main.maxParticles;
+    }
+    get time() {
+        return this._time;
+    }
+    get duration() {
+        return this.main.duration;
+    }
 
+    private _renderer!: ParticleSystemRenderer;
     private _system!: System;
     private _emitter: Emitter;
     private _size!: SizeBehaviour;
+    private _container?: Object3D;
+    private _time: number = 0;
+
+    /** called from deserialization */
+    private set bursts(arr: ParticleBurst[]) {
+        for (let i = 0; i < arr.length; i++) {
+            const burst = arr[i];
+            if ((burst instanceof ParticleBurst) === false) {
+                const instance = new ParticleBurst();
+                assign(instance, burst);
+                arr[i] = instance;
+            }
+        }
+        this._bursts = arr;
+    }
+    private _bursts?: ParticleBurst[];
 
     awake(): void {
+        this._renderer = this.gameObject.getComponent(ParticleSystemRenderer) as ParticleSystemRenderer;
+        this._system = new System();
+
+        if (this.main.simulationSpace == ParticleSystemSimulationSpace.Local) {
+            this._container = new Object3D();
+            this._container.matrixAutoUpdate = false;
+            this.gameObject.add(this._container);
+        }
+
+        const container = this.main.simulationSpace == ParticleSystemSimulationSpace.Local ? this._container : this.context.scene;
+
         if (debug) {
             console.log(this);
             this.gameObject.add(new AxesHelper(1))
         }
+        const renderMode = this._renderer.renderMode;
+        let renderer: any = undefined;
+
+        switch (renderMode) {
+            case ParticleSystemRenderMode.Mesh:
+                // https://three-nebula-docs.netlify.app/class/src/renderer/meshrenderer.js~meshrenderer
+                // mesh renderer example: https://github.com/creativelifeform/three-nebula/blob/master/website/components/Examples/MeshRenderer/init.js
+                renderer = new MeshRenderer(container, THREE);
+                break;
+            case ParticleSystemRenderMode.Billboard:
+                renderer = new SpriteRenderer(container, THREE);
+                break;
+        }
 
-        this.renderer = this.gameObject.getComponent(ParticleSystemRenderer) as ParticleSystemRenderer;
-        this._system = new System();
-        const container = this.main.simulationSpace == ParticleSystemSimulationSpace.Local ? this.gameObject : this.context.scene;
-
+        if (!renderer) {
+            console.error("No renderer for particle system");
+            return;
+        }
 
-        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);
+        if (renderMode === ParticleSystemRenderMode.Billboard) {
+            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);
+            }
         }
 
         this._system.addRenderer(renderer);
@@ -109,8 +162,6 @@ export class ParticleSystem extends Behaviour {
         const initializers: Array<any> = [];
         const behaviours: Array<any> = [];
 
-
-
         const life = new Life();
         life.lifePan = new MinMaxCurveSpan(this.main.startLifetime, 1);
         initializers.push(life);
@@ -130,6 +181,9 @@ export class ParticleSystem extends Behaviour {
         velocity.gravityModifierMultiplier = this.main.gravityModifierMultiplier;
         behaviours.push(velocity);
 
+        if (renderMode === ParticleSystemRenderMode.Mesh) {
+            initializers.push(new Body(this._renderer.getMesh()))
+        }
 
         const emitter = this._emitter = new Emitter({});
         emitter.setInitializers(initializers);
@@ -142,6 +196,7 @@ export class ParticleSystem extends Behaviour {
         this._emitter.emit();
         this._system.addEmitter(this._emitter);
         this._system.emit({ onStart: () => { }, onUpdate: () => { }, onEnd: () => { }, });
+        this._time = 0;
     }
 
     onDisable() {
@@ -149,11 +204,9 @@ export class ParticleSystem extends Behaviour {
     }
 
     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);
+        if (this._bursts) {
+            this.emission.bursts = this._bursts;
+        }
 
         // sprite materials must be scaled in AR
         const cam = this.context.mainCamera;
@@ -161,13 +214,37 @@ export class ParticleSystem extends Behaviour {
             const scale = getWorldScale(cam);
             this._size.cameraScale = scale.x;
         }
+
+        if (this._container && this.gameObject?.parent) {
+            // this._container.matrix.copy(this.gameObject.matrixWorld);
+            // this._container.matrixWorld.copy(this.gameObject.matrixWorld);
+
+            const scale = getWorldScale(this.gameObject.parent);
+            scale.x = 1 / scale.x;
+            scale.y = 1 / scale.y;
+            scale.z = 1 / scale.z;
+            // console.log(scale);
+            // this._container.scale.copy(scale);
+            // // this._container.updateMatrix();
+            // // this._container.updateMatrixWorld();
+            // // // set scale to 1
+            this._container.matrix.identity();
+            this._container.matrix.scale(scale);
+            // this._container.matrixWorld.copy(this._container.matrix);
+        }
+        // this._system.time
+        // this._system.duration = this.main.duration;
+        this.emission.system = this;
+        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);
+        this._time += this.context.time.deltaTime;
+        if (this._time > this.duration) this._time = 0;
     }
 
 }
 
 
-
-
 class MinMaxCurveSpan {
 
     readonly time: Time;
@@ -308,7 +385,7 @@ class VelocityBehaviour extends CustomBehaviour {
     gravity?: MinMaxCurve;
     gravityModifierMultiplier: number = 1;
 
-    downDirection = new Vector3(0, -1, 0);
+    downDirection = new Vector3();
     private _temp: Vector3 = new Vector3();
 
     constructor(container: Object3D, shape: ShapeModule, noise: NoiseModule, startCurve: MinMaxCurve, startMultiplier: number) {
@@ -319,8 +396,6 @@ class VelocityBehaviour extends CustomBehaviour {
         this.startSpeed = startCurve;
         this.startMultiplier = startMultiplier;
 
-        const quat = getWorldQuaternion(container);
-        this.downDirection.applyQuaternion(quat);
     }
 
     applyBehaviour(target: ParticleWithVelocity | Emitter, deltaTime: number, index: number) {
@@ -329,11 +404,11 @@ class VelocityBehaviour extends CustomBehaviour {
             // target.velocity.x = target.velocity_start.x;
             // target.velocity.y = target.velocity_start.y;
             // target.velocity.z = target.velocity_start.z;
-            if (target.gravity) {
+            if (target.gravity !== 0 && this.gravity) {
                 // get world down vector
                 this._temp.copy(this.downDirection);
                 this._temp.multiplyScalar(target.gravity * deltaTime);
-                target.velocity.sub(this._temp);
+                target.velocity.add(this._temp);
             }
 
             if (this.noise) {
@@ -344,6 +419,7 @@ class VelocityBehaviour extends CustomBehaviour {
 
     initialize(particle: ParticleWithVelocity) {
         const dir = this.shape.getDirection(particle.position);
+        // dir.applyQuaternion(quat);
         const speed = this.startSpeed.evaluate(0, Math.random()) * this.startMultiplier;
         particle.velocity.x = dir.x * speed;
         particle.velocity.y = dir.y * speed;
@@ -355,14 +431,14 @@ class VelocityBehaviour extends CustomBehaviour {
         particle.velocity_start.z = particle.velocity.z;
 
         if (this.gravity) {
-            particle.gravity = this.gravity.evaluate(0, Math.random()) * this.gravityModifierMultiplier * 9.81;
+            particle.gravity = this.gravity.evaluate(Math.random(), Math.random()) * 9.81;
         }
         else {
             particle.gravity = 0;
         }
 
-        // particle.acceleration.y = 1;
-        // console.log(particle);
+        const quat = getWorldQuaternion(this.container);
+        this.downDirection.set(0, -1, 0).applyQuaternion(quat);
     }
 
 }