OpenFL GPU particles support!

I’m currently working on GPU particles, using sprite.graphics, but I find that I need to redraw every time to make the shader render again.

Is there a way for me to upload triangle data only once and then drive GPU to render the shader?

@singmajesty

1 Like

@:privateAccess for (index => value in this.graphics.__usedShaderBuffers) {
value.update(value.shader);
}
// this.graphics.clear();
// this.graphics.beginBitmapFill(texture);
// this.graphics.beginShaderFill(_shader);
// this.graphics.drawTriangles(_vertices, _triangles, _uv);
// this.graphics.endFill();
:thinking: I found that the shaderbuffer is used internally, and the shader is available when I use this update.

QQ20210703-210910-HD
Hi, this is what I’m doing. I’m adding GPU particle support to openfl. Now, I have directional force, acceleration force and life. Next I want to perfect it!


GPU Particle sample

1 Like

I created a GitHub, but it’s not officially finished yet. When I finish the GPU particle function, I will release a version to haxelib.

New dynamic generation of particles, particles can follow the mouse effect. Meanwhile, GitHub has uploaded a sample

Is it work with any particle editor?

I’m going to implement a new particle editor for it. At the same time, it will be compatible with the particle files output by some general particle editors.

1 Like

QQ20210708-170523
Now start to support the transition effect of the start color and the end color.

color(1,0,0,0) => color(1,1,1,1)

1 Like

QQ20210708-185708
Random colors.

1 Like

QQ20210709-164508
It is allowed to read general particles in normal JSON format, but there are still some properties that have not been implemented, but they should be implemented in the near future.

1 Like
// JSON粒子DEMO
			Assets.loadText("assets/fish31_lizi.json").onComplete(function(data) {
				// Create JSON Particle
				var jsonParticle = GPUParticleSprite.fromJson(Json.parse(data), texture);
				this.addChild(jsonParticle);
				jsonParticle.x = stage.stageWidth / 2;
				jsonParticle.y = stage.stageHeight / 2;
				jsonParticle.start();
			});

Now, it supports loading general particle effects in JSON format.

// Stop event
				jsonParticle.addEventListener(ParticleEvent.STOP,function(data){
					trace("stop!");
				});

At the same time, I also added events for particle effects, such as stop event.

2 Likes

QQ20210711-145035
Transition color support, you can set a variety of colors for transition.

gpuSystem.colorAttribute.tween.pushAttribute(30, new GPUFourAttribute(1, 0, 0, 1));
						gpuSystem.colorAttribute.tween.pushAttribute(30, new GPUFourAttribute(0, 1, 0, 1));
						gpuSystem.colorAttribute.tween.pushAttribute(30, new GPUFourAttribute(0, 0, 1, 1));
						gpuSystem.colorAttribute.tween.pushAttribute(30, new GPUFourAttribute(1, 1, 0, 1));
gpuSystem.start();
1 Like

The first version was released:
v0.0.3
First edition

  1. Support: particle rendering is done by GPU.
  2. Support: allow to read JSON format file of general particle.
  3. Support: support gravity, direction, tangential, radial acceleration force, etc.
  4. Support: multi color transition support.
  5. Support: all parameters support random or fixed values.

Use:

haxelib install openfl-gpu-particles
4 Likes

Great Rainy! First Spine and now GPU particles! Greeeat!! :heart_eyes: :wink:

1 Like

@rainy how it is different from https://github.com/restorer/zame-haxe-particles/ ? Different files? Different renderer ?

On top of the file, it can parse the JSON file, which is the same as zame haxe particles; On the render: openfl GPU paricles uses GPU to calculate displacement logic, while zame haxe particles uses CPU to calculate displacement logic.

My previous projects have been using zame haxe particles, which is good; But I still need more functions, such as more color transition, different random value rules, etc; And because can customize shaders, you can have more imaginative special effects.

Thanks for the clarification! Looks good :+1:

So does it uses the same file as Starling? I’ve ported an editor recently: https://www.loudoweb.fr/app/particleeditor/

I’d love to see it, but I don’t seem to be able to visit loudoweb.fr normally.

If you can send me a particle file, try it. :grinning:

You need to access this URL , not loudoweb.fr