drawing circles bug

[gerardAlbin]

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
});
document.body.appendChild(app.view);

var circles = new PIXI.Graphics();

app.stage.addChild(circles);

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

circles.beginFill(0x5cafe2);
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

[ivan.popelyshev]

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 January 29, 2020 by ivan.popelyshev

[8Observer8]

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.");
            return;
        }
    }

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

Edited January 30, 2020 by 8Observer8

[8Observer8]

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

Edited January 30, 2020 by 8Observer8