Rendering Only "In Screen" objects

[Gerente]

Hello,

I'm doing some stress test with PIXI, and it seems that PIXI draw all the element of the stage, it does not matter if they are in range off the screen or not.

I'm trying with 300 circles and even if I move the layer to coordinates very far from the "screen view" (x=10000,y=10000), it still processing them all and give me very low FPS

There is any way to process only "inrange" objects to save CPU/GPU usage?

It is a Normal Draw (drawCircle) slower or heavier than an Image?

Thanks

[ivan.popelyshev]

Yes, you can do that. 300 different Graphics elements and 300 circles in same Graphics element are different things because in first case its 300 drawcalls.

The only thing that is optimized here is that GPU doesn't call fragment shader on pixels that are out-of-bounds. IF you want to save drawcalls and vertices, implement your own culling algorithm, pixi doesn't have that.

I advice you to read at least 4 last pages, there are many related threads about your issue.

Also, related thread:

 

[Gerente]

What if before to stage.render i do set every element to visible=false?, does it render them anyway?

[ivan.popelyshev]

http://pixijs.download/dev/docs/PIXI.DisplayObject.html#visible

http://pixijs.download/dev/docs/PIXI.DisplayObject.html#renderable

Use `renderable` for that. Use `visible` if you take care of matrix updates yourself (if you know what is it)

[Gerente]

great!. so, should I just do a recursive  for each .children[x] or there is any built-in function for that?

I don't know about the matrix.

 

Thanks for you help!

[ivan.popelyshev]

According to https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L394 , its enough to set visible on parent.

If you mean that you want to check every element in the tree whether it has to be rendered - there's a cause why pixi doesn't have that built-in function. getBounds() of many sprites/graphics is slow. You have to find your own way of culling, based on your app specifics.

[Gerente]

var loopChildsDisableRenderablesOffScreen = function(children) {
	for (let k in children) {
	  var child = children[k]
	  var pos = child.toGlobal(new PIXI.Point(0, 0))
	  child.visible =child.renderable= (pos.x > 0 && pos.y > 0 && pos.x < screen.width && pos.y < screen.height)
	  loopChildsDisableRenderablesOffScreen(child.children)
	}
}

loopChildsDisableRenderablesOffScreen(stage.children)
render()

The logic works but it does not seems to improve the FPS, any idea why?

[ivan.popelyshev]

Pass "stage.children" there.

[Gerente]

I had it with stage.children, I just forget to add it when I translated it from my code to the example.

[ivan.popelyshev]

I suggest you to use only "renderable" , because "visible" can change logic of "toGlobal/toLocal".

As to why it doesn't improve FPS - I really dont know. You have to debug it or show me.

[Gerente]

Hi Ivan,

Here, I did a basic example with thousands of elements, my code seems to works perfect :D, sharing this with the comunity.

https://jsfiddle.net/vwcns1qk/5/

Do you think that loading SVG file would be much faster? or there is another option even better than SVG?

Any comment is welcome.

thanks