How to convert this logic to a shader

[PyroStunts]

This week I've been rewriting some code to use pixi.js . In my game I have a smoke grenade. The smoke particles were drawn with circles with PIXI.Graphics(); . On each frame, I could be drawing from up to 1000 of these or other kinds of circles for things like explosions. I read that PIXI.Graphics() should not be used for this purpose as the game becomes very slow if there are too many particles to render. Further reading suggested I write my own shader. I would like some help with writing a shader as I have no experience with this kind of code as yet. Here is what I have so far

My Smoke Particle:
 

var Smoke = function (x,y) {
	this.OPACITY_REDUCTION=0.01;
	this.opacity=getRandom(0.5,1);
	this.size=getRandom(5,10);
	this.x=x;
	this.y=y;
	this.xdir=getRandom(-1,1);
    this.ydir=getRandom(0,-2);
};


Smoke.prototype.updateAndCanKeep = function () {
	this.x+=this.xdir;
	this.y+=this.ydir;
	this.opacity-=this.OPACITY_REDUCTION;
	return (this.opacity>0);
};

One smoke particle is created every frame while the smoke grenade is on the ground (30 seconds). It is removed when the opacity is <0.

This code is inside my render function:

for(var i=smokeTrails.length-1; i>=0; i--){
	if(smokeTrails[i].updateAndCanKeep()){
		particleGraphics.lineStyle(0);
		particleGraphics.beginFill(0x00C800, smokeTrails[i].opacity);
		particleGraphics.drawCircle(smokeTrails[i].x-thisPlayer.viewX,smokeTrails[i].y-thisPlayer.viewY, smokeTrails[i].size);
		particleGraphics.endFill();
	}else{
		smokeTrails.splice(i,1);
	}

}

Is this code easy to port into a shader? If I can have some help with this, I'll be able to do the same for all my other particles. Thanks.

 

[ivan.popelyshev]

You have to use sprites for that, and not graphics. It will easy handle 10k sprites in webgl mode.

[PyroStunts]

I was trying to avoid loading in files of basic geometric shapes. However I can see the benefit of doing this now. A shader for this purpose would have been overkill. I am still trying to learn to use a shader for another aspect of this game. I will post a new question shortly. Cheers.