an efficient way to have large grid background

[garry]

new to pixi here
So I needed simple background grid and i did it just by adding lines next to each other like this:

for (var i=0; i<40; i++) {
   var vertical = new PIXI.Graphics()
   vertical.lineStyle(2, 0x252E35)
   vertical.moveTo(i * 250 - 5000, -5000)
   vertical.lineTo(i * 250 - 5000, 5000)
   vertical.addChild(vertical)
}

for (var i=0; i<40; i++) {
   var horizontal = new PIXI.Graphics()
   horizontal.lineStyle(2, 0x252E35)
   horizontal.moveTo(-5000, i * 250 - 5000)
   horizontal.lineTo(5000, i * 250 - 5000)
   horizontal.addChild(horizontal)
}

But it effects on performance pretty a lot for just a grid. so I was wondering if there is a better way, an efficient way to do this?
Thanks

 

[ivan.popelyshev]

Performance depends on number of texture switches (0 in this case), number of shader switches (1 or none), number of drawcalls (80) , number of buffer switches (80), number of pixels drawn (80 * screen side?)

The idea is to balance all those things. In your case if you put everything to same graphics , it'll only take 1 drawcall of 1 buffer. I cant explain how that affects application, except if you have too many calls of one of operations i mentioned it'll be a problem.

[xerver]

You can draw 1 tileable graphics object to a RenderTexture and use that in a TileSprite.

[ivan.popelyshev]

> You can draw 1 tileable graphics object to a RenderTexture and use that in a TileSprite.

Which will use TilingSprite shader which might be slow for fullscreen cases on old graphic card. Of course, in case of pow2 texture with wrapMode=repeat it will omit that"%" operator and everything will be fine.