A limitation on the number of Graphics primitives?

[KL1]

I have played with pixi.js a couple of days and faced a weird limitation. It looks like there's a limitation on the number of graphics primitives, but can't find anything about it in here or in docs. Here's a repro code:

        stage = new PIXI.Stage(0);        var ts = 5, w = 160, h = 160;        renderer = PIXI.autoDetectRenderer(w * ts, h * ts);        document.getElementById('content').appendChild(renderer.view);        graphics = new PIXI.Graphics();        graphics.drawRect(0, 0, w * ts, h * ts);        //graphics.lineStyle(0, 0xffffff, 1);        for (var i = 0, x = 0, y = 0; i < w * h; i++, x += ts) {            if (x >= w * ts) {                x = 0;                y += ts;            }            graphics.beginFill(0xff0000);            graphics.drawRect(x, y, ts - 1, ts - 1);        }        stage.addChild(graphics);        renderer.render(stage); 

The problems is that the square is filled only about 2/3 with red boxes. If I use a line style, the filled area is even smaller. It's the same on IE, Chrome, FF, at least.

Can I overcome this limit somehow?

 

[KL1]

I've found a (kind of) workaround to avoid this limitation: create additional Graphics objects and split the stream of primitives into smaller batches. However, it seems to be slower and cause memory allocation issues. It's still the question, how to determine the batch size (10000 primitives per one graphics seems to be ok for rectangles), and what is the source of this limit.

[msha]

It's limited by the number of vertices that can be drawn with a single webgl drawElements call, which is 2^16. Each rectangle has 4 vertices, so (2^16) / 4 = 16384  rectangles is the limit. It must be 1/5th of that for rectangles with borders. It's a bug, pixi should be splitting it into smaller batches.

Anyway, use sprites instead, it will be faster for anything more complex than borderless rectangles. See http://www.html5gamedevs.com/topic/11892-awful-frame-rates-under-all-browsers/

[KL1]

Thank you for the explanation. Makes sense.