Rendering millions of 'points'

[jhnatow]

Hello,

I am working on a proof of concept application that requires rendering many ~2 million data points on screen. I am using phaser in this POC to harness the power of WebGL. I am a newbie, so I am just wondering if what I am doing is the most efficient way to do this. Basically, at this point I'm just trying to draw many, many circles on screen by doing this: 

// Create single graphic to make a texture to re-use on sprites for efficiency
const circle = game.add.graphics(0,0);
circle.beginFill(0x2b908f, 1);
circle.drawCircle(0, 0, 2);
circle.endFill();

// save the texture to re-use it 
const texture = circle.generateTexture();

and then later I'm re-using this texture many times over and over again with something like this (x and y are set to some presumably sane coordinates): 

game.add.sprite(x, y, texture);

Can anyone please let me know if there are more efficient ways to do something like this in phaser and/or point me to an example if so? 

Thanks very much! 

[rich]

Honestly, don't use Phaser for this. You will struggle (massively) to get even native Pixi 4/5 to handle rendering 2 million points like this. It feels like you need another approach for this project imho.