These are chat archives for pixijs/pixi.js

19th
Oct 2016
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 06:48
Guys, 'grats on the v4.1.0 release! Just a question though, is it just me or the download links aren't working?
Chad Engler
@englercj
Oct 19 2016 06:48
It takes a minute for the builds to finish and the CloudFront caches to clear
The build is there, will just take a few for it to propagate to all the CloudFront nodes
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 06:49
Ooooh! Thanks for the link! :))
Chad Engler
@englercj
Oct 19 2016 06:49
give it a few minutes and the links should work fine
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 06:49
I was just excited. :D
Oh, a question: if my image renders correctly on webgl and canvas, both desktop, and the mobile Phonegap canvas flickers a bit but shows the image, the mobile webgl shows a black rectangle instead, where might the problem be?
Am I right to assume that pixi.js has good browser support, and this is just something my code brought on?
Chad Engler
@englercj
Oct 19 2016 06:53
no idea, would have to see a running example
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 06:54
Do sprite/image sizes have an impact on performance?
Chad Engler
@englercj
Oct 19 2016 07:23
texture sizes do when they are uploaded to the GPU
and viewport size does, because the larger it is the more work the shaders have to do
but changing the scale of a sprite has no perf impact
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 07:25
hm. is a viewport of 1280x720 that uses sprite sizes of 4800x2700 dangerous to work with?
Chad Engler
@englercj
Oct 19 2016 07:27
when you say "Sprite" do you mean the texture is 4800x2700 or that you have a smaller texture you are scaling up?
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 07:27
The last one is surprising, but I'm thankful to have learned that.
The input image is 4800x2700. I'm scaling it to whatever the browser/viewer size is
Chad Engler
@englercj
Oct 19 2016 07:28
That is a really large texture
If you look at MAX_TEXTURE_SIZE
you'll see that there are <50% of WebGL enabled GPUs that can handle something that large
4096x4096 is about as big as you want to go
2048x2048 ensures maximum compatibility
its doesn't really matter if the texture is larger than the viewport

the costs are:

1) uploading to the GPU, which is more expensive the larger it is, but is generally a one-time cost

2) rendering the viewport, which is more expensive the larger it is
Chad Engler
@englercj
Oct 19 2016 07:34
3) texture/shader swapping, which happens when you render different things (different textures or different shaders)
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 07:34
As far as viewports go, is 1280x720 a healthy size for webgl?
Then 2048x2048 textures are generally a safe bet, considering mobile WebGL deployment?
And it's far more costly to use SVGs for textures, right?
Dave Moore
@themoonrat
Oct 19 2016 10:22
viewport size, that sounds fine to me. Remember, you can always either change the resolution of the renderer, or the resolution of assets you load if devices are struggling
Regarding texture size, if you want maximum mobile device compatibility, 2048x2048 is the way to go. We tried having ours as 4096x4096, less texture swaps and all, but unexplained issues showed up, which went away with the lower texture resolution
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 10:24
Wow, frontline experience. Thank you!
Dave Moore
@themoonrat
Oct 19 2016 10:24
for example, an iphone 5s I think, on ios9, worked fine with bigger texture size, yet the same phone on ios7 would cause any textures that were 2048x2048 to display fine, but any texture bigger than that would be renderered shrunken down
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 10:25
2048 been fine for you so far? Even with moderate texture swapping?
Dave Moore
@themoonrat
Oct 19 2016 10:25
bizarre bug, but sticking to the lower texture resolution everything was fine
yeps. 2048 worked fine on our games old libs (canvas only) across tons of devices we test against. We see no reason why we'd have an issues with our new libs on pixi
We only just found that bug/issue yesterday, so I'll hold out for 'no performance issues at all' until we can do a re-test on all the devices!
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 10:54
It's good to hear that it's working well for you. Guess I just had a stupid moment there trying to use such large textures :(
Eele
@eele94
Oct 19 2016 11:22
Anyone has a good webpack pixi es6 boilerplate?
Ralph Sto. Domingo
@ralphstodomingo
Oct 19 2016 11:24
How does one do an alpha mask? I'm on WebGL.
Chad Engler
@englercj
Oct 19 2016 14:36
@eele94 I do not
@prime-ralph Just assign a sprite to the .mask property of another sprite
Tiago Margalho
@tiagomargalho
Oct 19 2016 15:55
Hello everyone! I'm trying to use BitmapText on a high dpi display setting (4k screen). I've tried different approaches but the text always looks blurry. Is there a wiki/blog post somewhere on how to achieve responsive bitmap fonts? I imagine it is possible to just load the font image and not apply any scaling on it...
Chad Engler
@englercj
Oct 19 2016 16:28
If you scale it, it will scale using linear (or nearest) filtering
You should load the texture of the appropriate size
Tiago Margalho
@tiagomargalho
Oct 19 2016 16:29
I'm not explicitly scaling it
but somehow it seems to be upscaled as soon as the browser loads the image file
window.devicePixelRatio is 2
and I've set renderer.resolution to 1
I just want to load the bitmap text as it is without scaling it at all
Chad Engler
@englercj
Oct 19 2016 16:35
do you have a running example?
Tiago Margalho
@tiagomargalho
Oct 19 2016 16:41
yes, going to host it somewhere so you can have a look
Tiago Margalho
@tiagomargalho
Oct 19 2016 17:37
you can see the bitmap font as an HTML image is scaled as expected (normal behaviour) but I was not expecting the bitmap font be scaled when using Pixi.js (if I haven't explicitly written code for it to be scaled)