Jump to content

drawing circles bug


Recommended Posts

got this weird bug when drawing lots of circles


let gameWidth = 800;
let gameHeight = 608;

const app = new PIXI.Application({
  width: gameWidth, height: gameHeight, resolution: 1, antialias: true

var circles = new PIXI.Graphics();


let nSegmentsX = gameWidth / 16;
let nSegmentsY = gameHeight / 16;

for (let x = 0 ;x<nSegmentsX; x++){
    for (let y = 0 ;y<nSegmentsY; y++){
        circles.drawCircle(x*16 + 8, y*16 + 8, 8);


It only happens when drawing circles with radius 7 and above in this case, anything below that drawing is normal as you can see in picture 3




Link to comment
Share on other sites

Its a known problem :)

Solution: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#removing-65k-vertices-limitation

Number of vertices is too high. I recommend to find another solution if that one will be slow on target devices. generateTexture()+sprites, reducing number of points in arc generation algorithm of Graphics, e.t.c.

Edited by ivan.popelyshev
Link to comment
Share on other sites

You can draw circles using Math and pure WebGL 1.0. Create circles in one VBO for performance. Read this book: WebGL Programming Guide

If you need a lot of vertices you can use Uint32Array for indices:

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);

But you need to call this code in your Init() method:

    private Init(): void
        let uints_for_indices = gl.getExtension("OES_element_index_uint");
        if (uints_for_indices === null)
            console.log("OES_element_index_uint is not available.");

This extension allows for vertex buffer array indicies to be 32-bit unsigned integers.

Edited by 8Observer8
Link to comment
Share on other sites

"indices" array contains indices of vertices. If you use UNSIGNED_SHORT you can 216 numbers. Max index will be 65535. But if you use UNSIGNED_INT the max index will be (232  - 1)= 4294967295. Read the documentation mage about drawElements() parameters: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawElements

Edited by 8Observer8
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...