@Alchemist0823 DO NOT ABANDON PROJECT.

it has really enormous potential, and I see that you have abandoned work on it for 4 months...

I could not find a way to control the opacity of particles by analogy with ColorOverLife.
Are you planning to add this functionality?

When using the editor to create particle effects, if you use the: behaviours > ColorOverLife > gradient feature and then export it subsequently fails to import properly in my tests, the gradients dont show up.

Hello

would it be possible to ad ktx2 for the particel textures?

Hello,

I recently noticed a huge performance difference on Quest using trail particles - trail particles are currently very slow on Quest to the point where I can't really use them easily in my scenario.

Could that be related to the default maxParticles size being 10x the size of a normal sprite batch? I'm also wondering why the max size is hardcoded for both of these cases? Would it be possible to expose this with the VFXBatchSettings interface?
E.g. in my case i want to render a single particle trail following an arrow so I surely don't need that many particles. Also in most cases I'm dealing with particle counts < 100 or < 200

When using the loader to load a particle system from a json, the particle system is added to the scene without any code that explicitly adds it to the scene. See fiddle

https://codesandbox.io/s/three-quarks-atom-particle-system-forked-lqtg38?file=/index.html

the scene.add() is commented out but the effect is still visible

Trails are not working in the latest threejs release

I'm new to particle systems but looking at the documentation, how are we supposed to generate the json files?

Hello,

prior to 0.10.6 (in version 0.7.3) we could create horizontal and vertical billboarding by modifying the mesh geometry. This doesn't work anymore. Is there a way to add this behaviour again?

Old code:

if (renderMode === ParticleSystemRenderMode.HorizontalBillboard) {
            geo = new THREE.BoxGeometry(1, 1, 0);
        }
        else if (renderMode === ParticleSystemRenderMode.VerticalBillboard) {
            geo = new THREE.BoxGeometry(1, 0, 1);
        }

Implement a loader for a unity prefab loader for Shuriken Particle System. many developer want to use Unity asset in their web game.

I've noticed that it seems possible to add a gravityForce behaviour to a particle system, but I did not find anything regarding a velocity or acceleration behaviour.

My particular intended use case is I would like to create an emitter can emit particles at a specified vector3 velocity (eg shooting rays from a gun towards a target). If there is another way I can achieve this please let me know! Thank you :)

The system will reach a CPU bottleneck pretty fast when using complex effects, way sooner than any GPU bottleneck.

Implement a way to offload the physics calculations to a worker. Ideally, when a particle is first created the first couple frames are calculated on the main thread while calculations of multiple frames are requested to the worker which can generate the simulation in advance.

Obviously requesting the calculations every frame to the worker would not be possible since you would be bottlenecked by the transfer between threads so the only way i see this working is if the worker calculates multiple frames in advance per request.

I want my particle to render on top over all other objects in the scene. however setting depthTest false on the material is not making it render on top as i'd expect, is there another way I should be approaching this? Thanks again, this framework is amazing!

 new ParticleSystem({ 
 ...
  material: new MeshBasicMaterial({
                map: this.texture,
                blending: AdditiveBlending,
                transparent: true,
                side: DoubleSide,
                
                //Here
                depthTest: false, 
             
            }),
            }
            ```

This is a bit ugly right now:

I think it's fine that there's a log, but could you maybe remove the styling from the log? Right now it looks like an error.

Im looking to create rain and snow

Hey @Alchemist0823!

First of all, neat project you have here, really like it!

I'm trying to build a tab-target game, and in need of a particle system. First thing I tried is to add damage effect to the entities when they get hit. I used the one in the marketplace with a little modification to be white: https://quarks.art/asset/cartoon-energy-explosion

When an entity get hit, I load the effect with the QuarksLoader().load method. But the more I load, the more the FPS drops, and memory usage goes up. I guess it always loads it from scratch.
So I wanted to cache the loaded object in some Map, reuse that when I need to add another particle system, and also set the autoDestroy to true for systems, to clean up every effect.
This works only partly, because only the "Glow" emitter visible after the first system is emitted.

In the future the entities would have the same effect on them at the same time, like healing or shield effect, so I must sort this out somehow.

My question is how would you go about this?

import { Object3D, Object3DEventMap, Vector3 } from "three"
import { BatchedRenderer, ParticleEmitter, ParticleSystem, QuarksLoader } from "three.quarks"
import { generateUUID } from "three/src/math/MathUtils"
import Game from "../Game"

type EffectOptions = {
  name: string
  parent?: Object3D
  position?: Vector3
  scale?: number
}

type Effect = {
  key: string
  object: Object3D<Object3DEventMap>
  systems: ParticleSystem[]
}

export default class ParticleRenderer {
  private static readonly renderer = new BatchedRenderer()
  private static readonly loadedEffects = new Map<string, Object3D<Object3DEventMap>>()

  static init(): void {
    Game.scene.add(this.renderer)
  }

  static async addEffect(options: EffectOptions): Promise<Effect> {
    return new Promise(async (resolve) => {
      let object: Object3D<Object3DEventMap>

      if (!this.loadedEffects.has(options.name)) {
        object = await this.loadEffect(options.name)
      } else {
        object = (this.loadedEffects.get(options.name) as Object3D<Object3DEventMap>).clone()
      }

      const key = generateUUID()
      const systems = new Array<ParticleSystem>()
      const parent = options.parent || Game.scene

      object.traverse((child: Object3D<Object3DEventMap>) => {
        if (child.type === 'ParticleEmitter') {
          systems.push(this.addSystem(child as ParticleEmitter))
        }
      })

      if (object.type === 'ParticleEmitter') {
        systems.push(this.addSystem(object as ParticleEmitter))
      }

      if (options.position) {
        object.position.copy(options.position)
      }

      if (options.scale) {
        object.scale.set(options.scale, options.scale, options.scale)
      }

      parent.add(object)

      resolve({ key, object, systems })
    })
  }

  static removeEffect(effect: Effect): void {
    effect.systems.forEach((system: ParticleSystem) => this.renderer.deleteSystem(system))
    Game.scene.remove(effect.object)
  }

  static update(): void {
    this.renderer.update(Game.deltaTime)
  }

  private static async loadEffect(name: string): Promise<Object3D<Object3DEventMap>> {
    return new Promise((resolve) => {
      new QuarksLoader().load(`/assets/particle-fx/${name}.json`, (object: Object3D<Object3DEventMap>) => {
        this.loadedEffects.set(name, object.clone())
        resolve(object)
      })
    })
  }

  private static addSystem(object: ParticleEmitter): ParticleSystem {
    const system = object.system as ParticleSystem
    system.renderOrder = 1
    system.autoDestroy = true
    this.renderer.addSystem(system)

    return system
  }
}

Hello,

is there a good way to get the died state of a particle from a behaviour? How should events be implemented that happen on particle death?

My workaround for now is adding the current delta time and checking if it is above the life.
But that is quite hacky and unstable I would say :)

const willDie = particle.age + delta >= particle.life

Importing a json that has world space effects, then applying a scale to the container of the particle systems does not reflect on the object. This can also be verified in the visual editor by changing the scale of the “plasma projectile” example and observing it does nothing

createParticleSystem = () => {
		this.batchSystem = new BatchedParticleRenderer();
		const texture = new TextureLoader().load("textures/star.png");
		texture.encoding = sRGBEncoding;
		const param = {
			shape: new DonutEmitter({
				radius: 2,
				angle: Math.PI / 4,
				arc: Math.PI,
			}),
			renderMode: RenderMode.BillBoard,
			worldSpace: false,
			renderOrder: 2,
			looping: true,
			duration: 5,
			emissionOverTime: new ConstantValue(100),
			startLife: new ConstantValue(5),
			startSize: new IntervalValue(10, 15),
			startSpeed: new ConstantValue(5),
			material: new MeshBasicMaterial({ transparent: true, color: 0xff0000, map: texture, blending: AdditiveBlending, depthTest: false }),
			onlyUsedByOther: false,
		};

		setTimeout(() => {
			const texture = new TextureLoader().load("textures/1.jpg");
			this.muzzle.texture = texture;
		}, 5000);

		this.muzzle = new ParticleSystem(param);

		this.muzzle.addBehavior(new SizeOverLife(new PiecewiseBezier([[new Bezier(.3, .5, .6, .3), 0]])));
		this.muzzle.addBehavior(new ColorOverLife(new ColorRange(new Vector4(0, 0, 0, 1), new Vector4(1, 1, 1, .3))));
		this.muzzle.emitter.name = 'muzzle1';
		this.batchSystem.addSystem(this.muzzle);

		this.muzzle.emitter.rotateX(-Math.PI / 2);
		this.scene.add(this.muzzle.emitter);
		this.scene.add(this.batchSystem);
	};

The above dynamic modify texture is not effective, Version is 0.10.2 ,Where I do wrong?

In the code example from README.md, should the curly brackets be removed?

Existing code:

muzzle1 = new ParticleSystem({muzzle});

Proposition:

muzzle1 = new ParticleSystem(muzzle);

MeshStandardMaterial seems to only be working with Trails, this means that THREE.Fog cannot be used since it does not work with the MeshBasicMaterial

I would like to create an effect such as we currently have on the three.quark website - i.e. pressing a button triggers an effect, the next press triggers another, etc.

Currently, using addSystem will simply add an effect to me that executes once (if it is not looped)

this.quarksRenderer.addSystem(child.system);

but calling the function again and creating a new object will not trigger the effect a second time - only loading it and downloading the asset again will allow this.

So, how do you trigger effect after effect depending on the will of the user? (effect read from json file)

hello,

does looping property in particle system configuration work well?
In example muzzleFlashDemo animation, effect is constantly looping on the demo, even though each instance of the System has looping on false.

*but if we read effect from .json file, then looping work well

also you should remove console.log(this.subEmissions.length, this.subParticleSystem.system.particleNum);

Pause does not quite do what I want as it suspends the current particles in air and doesn't hide the emitter. Setting the visibility of the emitter didn't seem to quite work either, as the particles remained

Hey,

is it possible to easily update and/or configure the Object3D.layers mask to a batched system? I don't want to exclude particles from being hit when raycasting

Maybe here?

I was investigating why we always get double versions of three in some applications. Turns out that three.quarks is the only package in the chain that is pulling in an actual version of three and not a peerDependency, which would correctly resolve to the actual intended three version.

Are you open to changing this? Should just be moving three from "dependency" to "peerDependency".
Thanks!

Hello! My project does not use TS nor compiling, it would be very convinient to have a jsm version where, similar to threejs, you can just drop the file in and import what you need, would it be possible to have such release downloadable for convenience ?

Hello,

could you clarify what you mean by localspace in the RenderMode enum?

export declare enum RenderMode {
    BillBoard = 0,
    StretchedBillBoard = 1,
    LocalSpace = 2,
    Trail = 3
}

was expecting something like this

export enum ParticleSystemRenderMode {
    Billboard = 0,
    //   Stretch = 1,
    //   HorizontalBillboard = 2,
    //   VerticalBillboard = 3,
    Mesh = 4,
    //   None = 5,
}

Follow-up to #63

We've had a few people voice confusion as to why their entire website is "powered by three.quarks" according to the logs.
Would it be possible to adjust the messaging to read "Particle Systems powered by three.quarks" or similar?

Thank you!

I get the following error in BatchedParticleRenderer materials when switching the threejs renderer to logarithmic depth:

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false Program Info Log: Vertex shader is not compiled. VERTEX ERROR: 0:123: 'isPerspectiveMatrix' : no matching overloaded function found

After importing a json, adding it to the scene and then removing it, accomplishes nothing

Hello,

I have a case where I have a one-shot effect with a duration of 1 and not looping. I still want to be able to call emit on this effect and have the system emit the provided amount of particles that frame. Currently the internal emitEnded flag prevents that.

What would you suggest on how to make this still work and force it to emit particles?

Here's a short video where I set emitEnded to false before calling emit in a 1 sec interval

the system is setup like this:

Right now it seems either "transparent" or "opaque" are supported. In some cases "opaque + alphaClip" would be desirable, e.g. to have circular or bokeh particles that properly render depth.

Hello,

looks like maxParticle is outdated / not used yet or anymore in the examples? And it seems like the internal property is not used?

https://github.com/Alchemist0823/three.quarks/search?q=maxParticles

Would you recommend handling this manually using the emitters over distance and life?

Hello,

do you think you could update the changelog and push release tags to github? It would help with knowing when to update to which version / when new features are available 😊

Last release: 13 days ago, version 0.10.0
Changelog: almost a year ago, version 0.7.0