Limit to number of circles drawn in a mask

[acatcalledfrank]

Hi all.

I'm trying to mask a container using a large number of circles, but seem to be coming up against a limit on the number of circles I can draw in a mask on WebGL.

Demo here: http://codepen.io/acatcalledfrank/pen/ZQXWBL - it draws 250 x circle and numbered text labels in rows; you can see that while the labels carry on the circles stop at 160/161.

Am I coming up against some kind of hard limit with the renderer here, or is there a way around it? 

In the actual project the circles are moving and masking a gradient, which is why I can't just use a sprite for the circles. As far as I can tell, PIXI doesn't support gradient fills yet either. If I switch to the canvas renderer there's no limit, but performance is much worse in IE and FF. Yay!

Any ideas, anyone?

Thanks in advance!

Tom

[catafest]

I don't sure but most of this errors come to editors :

try to use one html file not http://codepen.io

Use webdevelopment tool like Firebug can help to see the your script into browser, see:

var renderer = PIXI.autoDetectRenderer(2000, 2000, {
    backgroundColor: 16777215,
    antialias: true
});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
stage.interactive = true;
var graphics = new PIXI.Graphics();
graphics.beginFill(16724736);
graphics.moveTo(0, 0);
graphics.lineTo(1500, 0);
graphics.lineTo(1500, 1500);
graphics.lineTo(0, 1500);
graphics.lineTo(0, 0);
graphics.endFill();
stage.addChild(graphics);
var mask = new PIXI.Graphics();
var size = 30, rows = 20;
mask.beginFill(0);
for (var i = 0; i < 250; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    mask.drawCircle(i % 10 * size * 2.5, Math.floor(i / 10) * size * 2.5, size);
}
window.CP.exitedLoop(1);
mask.endFill();
stage.addChild(mask);
graphics.mask = mask;
var text = new PIXI.Graphics();
var t;
for (var i = 0; i < 250; i++) {
    if (window.CP.shouldStopExecution(2)) {
        break;
    }
    t = text.addChild(new PIXI.Text(i, { fill: 255 }));
    t.x = i % 10 * size * 2.5;
    t.y = Math.floor(i / 10) * size * 2.5;
}
window.CP.exitedLoop(2);
stage.addChild(text);
renderer.render(stage);
//# sourceURL=pen.js

 

[acatcalledfrank]

Not quite sure what you mean, sorry

The CodePen is just a stripped-down demo to show the problem that I've found in a larger project?