These are chat archives for pixijs/pixi.js

3rd
Sep 2018
gapipro
@gapipro
Sep 03 2018 17:41
I am trying to optimize this game: http://as1.blubit.si
but I am running out of ideas how to do it.
And somehow performance is worse on @0.5x texture size
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 17:44
@danny0i_gitlab patch the class from outside. PIXI.Spritesheet.prototype.some_method = function() { ... }
@gapipro consultations about slots are only for money. unless you have a fiddle that is slow and you want to optimize it
either make it very simple to debug so open-source community helps you, either hire someone who knows how to optimize flash-like 2d renderers :)
gapipro
@gapipro
Sep 03 2018 17:46
well I am more in search of a methods how to do it
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 17:46
oh
gapipro
@gapipro
Sep 03 2018 17:46
if you have a game that kinda "changes" every frame
how to improve actual render if pixi rerenders everything on everyframe
at least when using canvas
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 17:46
wait a minute..
tell me your DC :)
gapipro
@gapipro
Sep 03 2018 17:47
ok let me install that
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 17:47
that's the first thing to look at
also, tell me your target
mobile or PC?
gapipro
@gapipro
Sep 03 2018 17:48
PC, with low end graphics cards or integrated graphics
gapipro
@gapipro
Sep 03 2018 18:09
ok DC is around 73-75
I guess this number should be lower?
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:29
70 is fine for PC
i dont know for your case, whether its too big for integrated video
the biggest issue for integrated videos is low fillrate
gapipro
@gapipro
Sep 03 2018 18:30
well integrated video for example is around 20-30fps only
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:31
you have to profile it and see what "idle" time is
if its big, then its GPU problem and you have to draw less pixels
like, dont draw parts of background that arent seen
if "idle" is small then yeah, its probably DC
gapipro
@gapipro
Sep 03 2018 18:32
ok
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:32
to make it lower you have to make more atlases
gapipro
@gapipro
Sep 03 2018 18:32
so if for example elements are drawn on top of bg, creating a big hole in texture would actually help?
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:33
DC 30-50 is ok for sure
yes, make several sprites instead of one
and remove the center sprite :)
pixi doesnt use z-buffer mechanism that is critical for integrated devices.
gapipro
@gapipro
Sep 03 2018 18:34
is that a reason why low res texture in a single sprite performed worse then multiple sprites in full res?
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:34
so drawing less pixels there is the only good option
no, i dont think it matters
amount of pixels drawn on screen matter
not the size of textures
gapipro
@gapipro
Sep 03 2018 18:35
got it
btw: is there a way to "cache" sprites that appear on a same layer, so it would render only single cached texture instead of 5 separated sprites?
in other words if I have a container with 5 sprites, can I somehow prevent rerender/recalc of this sprites if I know they were static the whole time
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:42
its pain
that's different level of pixi usage :) RenderTexture
prepare for pain
gapipro
@gapipro
Sep 03 2018 18:43
haha awesome
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:43
however for 5 elements its nothing
in your case it matters only if it decreases fillrate
*decreases number of pixels
because fillrate is low on those devices
the problem is that you have to redo that texture every time something changes
and pixi wont notify you
because pixi is very small lib and there are no mechanisms that watch all the parameters
gapipro
@gapipro
Sep 03 2018 18:44
yea basically I would try to decrease number of overlapping pixels
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:44
flash could do that, pixi cant
yeah
that'll help :)
but you'll have some problems and you'll have to read known pixi issues ...
gapipro
@gapipro
Sep 03 2018 18:45
yey, pain as you said =)
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:45
that area is very gray, its covered by documentation partially but there are so many issues..
even more than in Flash :)
but ! its better than use "cacheAsBitmap" because cacheAsBitmap works on top of renderTexture and it has even more bugs :))))
oh
one more thing - filters
make sure you bake all the shadows
all the blure
*blurs
that can help too
gapipro
@gapipro
Sep 03 2018 18:47
ok that would help yes
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:47
it affects slow devices but it also KILLS the mobile
old computers survive it better :)
gapipro
@gapipro
Sep 03 2018 18:47
btw: you think its maybe worth it to upgrade to v5 already?
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:47
no, wait a month or two
gapipro
@gapipro
Sep 03 2018 18:47
I saw that performance should be a bit better, but not for older devices
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:48
for your case its good only by decreasing DC but its not your enemy
gapipro
@gapipro
Sep 03 2018 18:48
got it
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:48
first try to bake filters into textures, or just generate everything you need in photoshop
then try to decrease number of drawn pixels
gapipro
@gapipro
Sep 03 2018 18:49
yea I think this will be the main challenge
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:49
good luck !
gapipro
@gapipro
Sep 03 2018 18:49
thank you so much =)
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:49
oh wait
turn off the antialias if you specified it in renderer options
you dont need antialias
and its slow
gapipro
@gapipro
Sep 03 2018 18:50
thats off
only legacy: true
not exactly sure what does that do
skips few frames for update or what =)
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:51
you can remove legacy option there
i think its for mobiles :)
gapipro
@gapipro
Sep 03 2018 18:51
oh
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 18:51
mostly
it also affects DC, look if you have lower number now
gapipro
@gapipro
Sep 03 2018 18:52
damn: DC is down to 15
and yea GPU vs Idle on PC is 65% vs 35%
so main goal is to still reduce pixels
gapipro
@gapipro
Sep 03 2018 18:57
and try baking the whole scene
Ivan Popelyshev
@ivanpopelyshev
Sep 03 2018 19:05
ok, low DC means that your app does not stuck in message queue for webgl
now tell me about idle. The idea is that profiler takes 100% as all busy time , and shows idle in milliseconds
so profile 10 seconds and tell me whats 100% for you
like, if something takes 50% and 1 second, that means 100% = 2 seconds, that means idle is 8 seconds of 10 and its GPU problem.
that's the logic. look at how many idle seconds inside 10 seconds. or 30
big idle is good but if fPS is still low, then its GPU problem
gapipro
@gapipro
Sep 03 2018 19:08
ok so in 11s profile 3.5s is idle
7.7s is gpu
the interesting part is that I just removed render of every sprite and I still get same results on black screen with some text
gapipro
@gapipro
Sep 03 2018 19:14
and same result even if I remove everything
so thats kinda a benchmark of that PC for canvas of that size, no matter what will be rendered?