Sign in to follow this  
jkm

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.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()
  }
}

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

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

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

 

Share this post


Link to post
Share on other sites

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 = ..."

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.