Jump to content

Graphics artifacts


Recommended Posts

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.lineStyle(2, 0x121212)
    for (const circle of this.circles) {
      this.g.drawCircle(circle.x, circle.y, circle.r)


Link to comment
Share on other sites

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.

// 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 :D

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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...