Graphics artifacts

[jkm]

I've recently started playing with Pixi so I'm probably doing something very wrong here, but I encountered an issue when I'm drawing circles with PIXI.Graphics.

So what I attempted to do is to fill the screen with circles that don't overlap. Each circle starts with 1 radius and then grows every frame. Pretty simple. My problem starts at about ~500 circles.

 

It starts out ok..

But then this happens

Is drawing hundreds of circles with drawCircle() into a single Graphics object per frame bad? I don't care about performance at this time, just doing a simple circle packing exercise.

Simplified code below. No real reason to include growing and populating math here.  

I've tried putting begin Fill and line style inside the loop for every circle as well as completely outside the ticker. In the example below I have a separate loop doing math first and then another drawing circles but I tried them together too. 

I thought the long computation times for growing and populating each frame have something to do with my issue, but maybe it's a pixi/webgl limitation I have no clue about. Halp

interface Circle {
    x: number
    y: number
    r: number
}

const circles: Circle[] = [] //array filled with circle objects. 

//on then on every frame I do

public animate(delta: number) {
    for (const circle of circles) {
      growIfPossible() //simplified
    }
    populate() //adding new circles - simplified

    this.g.beginFill(0xFFFFFF)
    this.g.lineStyle(2, 0x121212)
    this.g.clear()
    for (const circle of this.circles) {
      this.g.drawCircle(circle.x, circle.y, circle.r)
    }
    this.g.endFill()
  }
}

 

[ivan.popelyshev]

> But then this happens

Thank you for detailed feedback! Very informative first post! Welcome to the forums!

>65536 vertices, and we try it in one batch, uint16 indices fail. I think we'll fix Graphics later, but for now there's workaround: https://github.com/pixijs/pixi.js/issues/5973

[jkm]

I remember reading about this a few weeks back. I just spent some time trying to fix it with these two lines but it doesn't seem to work for me. Where should I put them? I tried each frame before and after render as well as when creating Graphics object.

graphics.geometry.updateBatches();
// try commenting that to see Uint16 overflow
graphics.geometry._indexBuffer.update(new Uint32Array(graphics.geometry.indices));

 

For the other solution, editing pixi source, would I have to build it after change? I use webpack and I'm a noob. I temporarily fixed it by Drawing circles that don't have to animate anymore to a static canvas without using pixi but it bothers me I didn't solve my original issue

this.addUvs(this.points, uvs, style.texture, start, size, style.matrix);

 

[ivan.popelyshev]

Most things are done without modification of pixi lib, but you need to look in the sources anyway.

For this case, you can just change the method in prototype of class or method in instance. Like "GraphicsGeometry.prototype.addUvs = function () ..." or "myGraphics.geometry.addUVs = ..."