These are chat archives for pixijs/pixi.js

23rd
Dec 2015
Chad Engler
@englercj
Dec 23 2015 00:10
Yeah you can call .render() anytime you want, it doesn't have to only be in a frame loop.
We built it in such a way to be agnostic
a few charting libs use pixi, and they only render on interaction and data change animations.
Bar Ziony
@bartzy
Dec 23 2015 00:57
@englercj Thanks. And that doesn't affect the performance when you interact? i.e the browser won't "take time" to get to 60 FPS? I can see that sometime happen in the FPS meter on Chrome
Also, if I just call render() at some point, does it render synchronously or does PIXI use RAF internally as well?
@englercj Also, can you answer my mask question on issue #1639 ? ;)
Sorry for all the questions
Ivan Popelyshev
@ivanpopelyshev
Dec 23 2015 00:59
you can use 30FPS
what exactly problem with the mask?
Bar Ziony
@bartzy
Dec 23 2015 01:00
Why would I do that
It is half the size it should be.
And I don't quite understand the reasoning as to why the mask should be in the layer tree in order to work
Bar Ziony
@bartzy
Dec 23 2015 01:07
@ivanpopelyshev Here a screenshot with the mask (that user photo is the object that is being masked, and the mask should be bigger to fill that whole heart background
And here's the mask itself without being declared as the photo's mask so it's clearly visible: http://c.bartzy.com/0g0r2t0E432p
I have non idea why it is that size. I explicitly set its width and height to be the same as the photo's.
non=no*
Ivan Popelyshev
@ivanpopelyshev
Dec 23 2015 01:40
ok, i'll look at it tomorrow, thank you :)
Bar Ziony
@bartzy
Dec 23 2015 02:02
Awesome, thanks
Chad Engler
@englercj
Dec 23 2015 02:10
I don't know what "affect the performance when you interact" means
I also don't know what "take time to get to 60 fps" means either
if you call .render() one time, it will render one frame
thats all
If you call it two times, it will render two frames
If you call it in a loop, it will render as many times as it is called.
requestAnimationFrame tries to schedule the next call in such a way that if you were to continue calling it, it would be 60 frames per second
Pixi doesn't make use of requestAnimationFrame at all
all we do is render when the user calls .render()
Bar Ziony
@bartzy
Dec 23 2015 10:09
@englercj So .render is synchronous?
Bar Ziony
@bartzy
Dec 23 2015 10:16
About the mask, it seems to work correctly (mask size is respected) only if the mask is added as a sibiling to the masked element.
If it if added as a child of the masked element, its size is off
OK so I guess I understood what's going on: The texture for the masked object is 700x700 for example. But I set the sprite's width and height to 500x500
So Pixi uses a transform to scale the sprite to 500x500, and then when I add the mask as its child, it is scaled too.
That's a change from something like iOS / Android views for example, so I wasn't used to it.
Bar Ziony
@bartzy
Dec 23 2015 10:27
So do I need to set the inverse transform on the mask or something? It's a bit weird that this changed a "public" transform and not only during compositing... Am I doing anything wrong?
Bar Ziony
@bartzy
Dec 23 2015 10:34
OK, after reading pixijs/pixi.js#1794 , I solved this by having a container object that contains both the sprite and the mask. so the container itself is not scaled.
However, I do agree with the issue opener here. I think that if width and height wouldn't change the scale, it would be more understandable. perhaps there could be a "contentMode" property on a sprite, that specifies how the sprite should be rendered when its size is not the same as the texture's size
Bar Ziony
@bartzy
Dec 23 2015 15:16
@ivanpopelyshev Are you here perhaps?
Wanted to ask you why did you say that Pixi doesn't need dirty region checking since it's WebGL? Because it's fast enough?
Chad Engler
@englercj
Dec 23 2015 17:52

@Bartzy

So .render is synchronous?

Yes, absolutely.

Wanted to ask you why did you say that Pixi doesn't need dirty region checking since it's WebGL? Because it's fast enough?
Because generally everything is changing and a dirty region check in the lib would be overhead that decreased performance, not increased it
There are a small subset of apps it would be useful for, so those apps should implement it on top of pixi, there is nothing to stop a user from doing this themselves
each "region" can be a texture, render only the textures that change. Composite to the main view via the main renderer
Bar Ziony
@bartzy
Dec 23 2015 18:08
@englercj For example, while building user interfaces with Pixi, couldn't that benefit a lot from dirty region checking?
I mean the compositing part. Does that even make since to composite only part of the screen? i.e. leave some of the screen unchanged from the last frame, and composite only the parts that where changing (and any parts below them that should composite with them)
it sounds really complicate to understand what needs to be composited in that way
complicated*
where=were. My brain is dead :|
Bar Ziony
@bartzy
Dec 23 2015 18:23
I have another general question - Did anyone notice touch latency issues on the web with Android devices? I'm talking about Android 5-6 and latest Chrome. It seems that it runs on 60fps but the touch events are lagging a bit
Chad Engler
@englercj
Dec 23 2015 18:29

For example, while building user interfaces with Pixi, couldn't that benefit a lot from dirty region checking?

It could, depending on the application. Again, thats why it should be in application land. Games don't want that code, other apps might. So we push it out of core.

Ivan Popelyshev
@ivanpopelyshev
Dec 23 2015 18:30
I personally use multiple canvases and position them with css, so browser does composition
somehow that's better on mobiles, i dont know why
Bar Ziony
@bartzy
Dec 23 2015 19:20
@englercj But how is it out of core if the WebGLRenderer is compositing?
@ivanpopelyshev I was talking about touch latency on Android
Chad Engler
@englercj
Dec 23 2015 21:11

But how is it out of core if the WebGLRenderer is compositing

The webgl renderer doesn't composit anything, it renders what you pass into it. You can render multiple "areas" to texures and then render each of those in a scene. That is you doing compositing, that is the renderer just rendering some opaque textures