For vs. Image

[guillaume.chaumet]

Hi pixy people,

My challenge is to optimize in term of speed the following plot:

http://blockbuilder.org/guillaumechaumet/7cb92053f786dfb53b932a4904102fbc

My plot is a mix of D3 and pixi. Because SVG (D3.js) is very very very greedy for the browser when you have a lot of points to plot, I used pixi with the hope to improve the performance.

The final version of my plot will contain colors and a html5 slider to change these colors. The source of data is a big JSON with possibly up to 300 000 rows.

As you can see, I used a loop but it's very slow. I'm a total newbie in pixi.js and I look for a possible "rastering" pixi solution like image() on Matlab or R.

I hope I'm sufficiently clear. 

Guillaume

 

[ivan.popelyshev]

Graphics is bad, make one circle texture (may be with graphics.generateTexture()), and use 10000 of PIXI.Sprite instead.

[ivan.popelyshev]

And of course if your image isnt changing, you can call generateTexture() on whole stage and pass it to Sprite. Or easier way, stage.cacheAsBitmap=true;

[guillaume.chaumet]

Ok thanks for your reply Ivan. 

I'm stuck with generateTexture conversion part.

There is something I don't understand with the addChild

Here is my sprite version

http://blockbuilder.org/guillaumechaumet/bb30250a4b0afec83b65eadad4170dff

with "TypeError: undefined is not an object (evaluating 'child.parent')"

 

 

[ivan.popelyshev]

@guillaume.chaumet Did you clone pixi.js github repo, are you browsing the sources?

Well I can say that may be generateTexture can work only for elements that have a parent. You can add it somewhere and then remove

[guillaume.chaumet]

On 29 mai 2016 at 1:29 PM, ivan.popelyshev said:

@guillaume.chaumet Did you clone pixi.js github repo, are you browsing the sources?

I'm not confortable with github. 

Ok thanks for the tip;

[ivan.popelyshev]

3 hours ago, guillaume.chaumet said:

I'm not confortable with github. 

Ok thanks for the tip;

something like 

var tempParent = new PIXI.Container();

thing.parent = tempParent;
var tex = renderer.generateTexture(thing);
thing.parent = null;