Problem with render sprites in ParticleContainer - leaflet.pixiOverlay

[corvinus15]

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.

Example particles

example particles-patched

 

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 code create of containers

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

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);
});

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

_.forEach(points.features, function (feature, position) {
     if (feature.geometry !== null) {
        _.forEach(feature.geometry.coordinates, function (point, posCoordinate) {
             const projectedCenter = project([point[1], point[0]]);
             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);
        });
     }
});

 

Do you have any idea what may be happening?

 

[ivan.popelyshev]

Hello and Welcome to the forums!

Your case seems difficult. It might be ParticleContainer bug, i recommend to try add more attributes in second param in constructor.

Or it could be some limitation I forgot about  code looks fine, if you want to optimize it in future - making your own Mesh twont spawn 400000 objects - it will help.

[corvinus15]

Hello, thank you very much for your comment.

I really don't know what is happening, I'm going to see if it has to do with the coordinates, but I don't think so. Because when drawing points with a simple 'container' it shows them well, but when passing to 'particleContainer' it fails

[ivan.popelyshev]

Its same texture for all elements, right? That's a requirement for ParticleContainer

[corvinus15]

Yes, Its same texture.

[ivan.popelyshev]

Nope, no idea  More info?

[corvinus15]

sorry that's what i have ...