These are chat archives for pixijs/pixi.js

3rd
Aug 2016
Roman
@sapph1re
Aug 03 2016 02:46
I see. Hm, but the Graphics' performance appears poor even without clearing in my case... What I do is: draw fresh lines for the current tick; graphics.position -= step. And apparently changing the position of a Graphics object big enough takes too much CPU time for some reason.
I'll check out the v4 and mesh stuff anyways
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:48
changing position/scale is never a problem in pixi
i think the problem is that you are using too many Graphics'es
Roman
@sapph1re
Aug 03 2016 09:50
Hm. In fact I'm currently using only two. One is for the axis and one for all the plotted lines on the chart. I'm thinking maybe I should use a separate Graphics for every line, but I haven't tried yet (would take some time to implement)
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:51
then i suggest to profile your application and see whats going on
speculations like "may be changing position affect it" are making me angry, really
Roman
@sapph1re
Aug 03 2016 09:51
The latter would allow to eliminate redundant moveTo operations though, it would save me 30-50% execution time. From what I see in the profile
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:52
because I for sure now that position/scale/skew and all that stuff is very cheap
you mean, you are claering the graphics every frame?
clearing the graphics is costly operation
because it rebuilds its polygons and uploads them to gpu
i mean, if you have about 10000 lines or so
Roman
@sapph1re
Aug 03 2016 09:54
I'm not. I'm doing (moveTo + lineTo) N times + Graphics.position shift + rendering the stage in requestAnimationFrame.
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:54
are these "moveTo+lineTo" differ from frame to frame?
or do they have the same coords
Roman
@sapph1re
Aug 03 2016 09:54
But I saw in profile quite a lot of moveTo and lineTo operations taking quite some time, and the moveTo's appear to be as costy as lineTo's.
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:55
is your plot animated somehow (except changing position)
Roman
@sapph1re
Aug 03 2016 09:55
currently they differ from frame to frame, as I'm using one Graphics objects, so the "cursor" is constantly jumping from line to line. Like in a jet printer.
no, only position changing
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:56
whats the cursor?
Roman
@sapph1re
Aug 03 2016 09:56
the one you move with moveTo :)
I don't know what's the proper name of it lol
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 09:56
why do you need to move it
why dont you just draw graphics one time and then leave it alone? :)
how many lines do you have there?
Roman
@sapph1re
Aug 03 2016 10:00
that's the point. For example imagine I draw 30 "microlines" on every tick, say 10 times per second. What you're suggesting (draw graphics one time a leave it alone) would mean I'll have a huge number of Graphics objects: 30 10 <seconds passed>
Currently I only have one Graphics object that draws all the lines.
wow the parser ate my asterisks. I meant: 30 x 10 x <seconds passed>
Roman
@sapph1re
Aug 03 2016 10:06
I just realized. I don't have WebGL running because of a poor driver for my GPU in Linux. It explains a lot. Will update it and test again.
Though I'd like to optimize Canvas-version perfomance as much as possible too.
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 10:19
oh
oooooh
ok, there is a problem: right now Graphics is working with polygon, not lines
in your case, canvas2d context will be actually faster
that way pixi wont try to convert lines to polygons, and that saves some CPU time for you
I suggest you to take a real <canvas> (document.createElement('canvas')) , work with it, create PIXI Texture our of it: PIXI.Texture.fromCanvas(canvas);
and that will work for canvas2d :)
for webgl you'll have to update that texture every time: texture.baseTexture.update();
for canvas you dont have to do that
so, summary:
Use HTML5 Canvas2d context and embed it as a texture into pixi
Roman
@sapph1re
Aug 03 2016 10:52
wow I see. Ok thanks a lot!
And will I have any performance advantage from WebGL if I'm gonna use Canvas to draw the whole thing anyways?
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 12:07
no, that's actually a problem
you see, updating texture every frame is kinda bad :)
it works good for canvas2d, but for webgl it will be horrible
BUT!
you can use PIXI.RenderTexture
and every time you need extra lines
you take Graphics, clear it, draw your extra lines and RENDER IT ON RENDERTEXTURE WITHOUT CLEARING
that will be fast both on canvas2d and webgl :)
its like a using framebuffer
sorry i didnt think about that before
but its actually best solution for your case
Roman
@sapph1re
Aug 03 2016 15:44
oh wow. Sounds interesting. Reading the docs about renderTexture
Ivan Popelyshev
@ivanpopelyshev
Aug 03 2016 16:22
you can use it like off-screen canvas, but webgl works better with it