Problem with render sprites in ParticleContainer

[alex-oko]

I'm currently looking for a way to represent a large number of points, following the example of 'particles' and 'particles-patched' ... these work very well for me, they allow me to zoom in and see the points very well. When you zoom in a lot you can see how the point deforms and disappears, I don't understand why.

By changing the code a little to get the same result as in the example but with the most real coordinates and quantities, the rendering fails me and I get the following:

1) When I zoom, the points disappear. 2) Generate a very different shape than the texture I'm sending you (the same texture I use for the first image)

with this function I generate the texture for both cases:

generateCircleTexture(radius) {
        const gfx = new PIXI.Graphics();
        const tileSize = radius * 3;
        const texture = PIXI.RenderTexture.create(tileSize, tileSize);
        gfx.beginFill(0x000000); // color base
        gfx.drawCircle(tileSize / 2, tileSize / 2, radius);
        gfx.endFill();
        this.rendererPixi.render(gfx, texture);
        return texture;
 }

 this.pixiContainer = new PIXI.Container();
 const innerContainer = new PIXI.ParticleContainer(400000, {vertices: true});
 this.pixiContainer.addChild(innerContainer);

For generate coordinates

const that = this;
function getRandom(min, max) {
    return min + Math.random() * (max - min);
}
const markers = [];
for (let i = 0; i < 1000; i++) {
       markers.push({'latitude': getRandom(35, 55), 'longitude': getRandom(-10, 20)});
 }

This is the route I do in the firstDraw for the example

markers.forEach(function(marker) {
      const projectedCenter = project([marker.latitude, marker.longitude]);
      const circleSprite = new PIXI.Sprite(that.texturePixi);
      circleSprite.x = projectedCenter.x;
      circleSprite.y = projectedCenter.y;
      circleSprite.center = projectedCenter;
      circleSprite.anchor.set(0.5);
      circleSprite.scale.set(invScale);
      innerContainer.addChild(circleSprite);
      cirlceSprites.push(circleSprite);
});

For generate coordinates

function getRandom(min, max) {
    return min + Math.random() * (max - min);
}
const markers = [];
 for (let i = 0; i < 1000; i++) {
       markers.push({'latitude': getRandom(0.051, 0.052), 'longitude': getRandom(37.1311, 37.1317)});
 }

or if you want I made a series of points where some real points of my app will be located

const pointsPIXI = [
            {latitude: 0.05198656799356911, longitude: 37.13110685348511},
            {latitude: 0.05192755941950185, longitude: 37.131171226501465},
            {latitude: 0.05188196188496641, longitude: 37.13123291730881},
            {latitude: 0.05184441097413735, longitude: 37.131291925907135},
            {latitude: 0.051785402399930146, longitude: 37.13135898113251},
            {latitude: 0.05171834720191478, longitude: 37.13142067193985},
            {latitude: 0.051643245380053104, longitude: 37.13149040937424},
            {latitude: 0.052117996181070075, longitude: 37.131198048591614},
            {latitude: 0.052058987607130035, longitude: 37.13127851486206},
            {latitude: 0.05209217992996972, longitude: 37.131233252584934},
            {latitude: 0.05209217992996972, longitude: 37.13125504553318},
            {latitude: 0.052225284497184755, longitude: 37.131654024124146},
            {latitude: 0.05221254400965814, longitude: 37.131669111549854},
            {latitude: 0.05220047407409858, longitude: 37.13168419897556},
            {latitude: 0.05217331671908956, longitude: 37.131714038550854},
            {latitude: 0.05220047407409858, longitude: 37.13168419897556},
            {latitude: 0.05217331671908956, longitude: 37.131714038550854},
            {latitude: 0.0521488415719742, longitude: 37.131746895611286},
            {latitude: 0.05224674216038479, longitude: 37.131757624447346},
            {latitude: 0.05217331671908956, longitude: 37.131714038550854},
            {latitude: 0.0521488415719742, longitude: 37.131746895611286},
            {latitude: 0.05224674216038479, longitude: 37.131757624447346},
            {latitude: 0.05214045967227157, longitude: 37.13180758059025},
            {latitude: 0.05221790842545815, longitude: 37.13177405297756},
            {latitude: 0.052234672224825224, longitude: 37.13176432996988},
            {latitude: 0.05222930780902522, longitude: 37.13174622505903},
            {latitude: 0.052121348940943495, longitude: 37.13179148733616}
];

And this is the route that I already do with what I need

markers.forEach(function(marker, pos) {
       const coords = project([marker.latitude, marker.longitude]);
       const circleSprite = new PIXI.Sprite(that.texturePixi);
       circleSprite.x = coords.x;
       circleSprite.y = coords.y;
       circleSprite.tint = '0xef0a0a';
       circleSprite.anchor.set(0.5);
       innerContainer.addChild(circleSprite);
       cirlceSprites.push(circleSprite);
 });

And for change scale

if (firstDraw || prevZoom !== zoom) {
     cirlceSprites.forEach(function (circle) {
          circle.scale.set(invScale);
     });
 }

I tried with markers instead of points and I get the same result. Do you have any idea what may be happening?