How to render 10 000 optimized rectangles on stage / Weird problem with rendering borders

[Stiffler]

Hi,

In my application in need to draw from 1 to 10 000 rectangles on stage.

When I was using graphics I have no problem with rendering, but I had a problem with performance.

I found out that if I would like to put more then 3000 objects on stage I should use sprites, and I did.

 

However, I have a weird problem with rendering. Borders of spite not always appear.

I recorded quick video what shows how it looks with spirits and then on video I switched to the old version of app where I was using "graphics".

On the video, I am zooming in and out by mouse wheel what change the scale of stage and center stage to the cursor position.

https://www.youtube.com/watch?v=TxzfKsvAGvs&feature=youtu.be

Here how I create the model:

 

function panelModel({ x, y, id, height, width, groupId, roofZone }): any {
  const { settings: { canvasCenter } } = state();
  const texture = getTexture('panel', width, height, roofZone);
  const panel = new PIXI.Sprite(texture);
  panel.hitArea = new PIXI.Rectangle(0, 0, width, height);
  panel.id = id;
  panel.groupId = groupId;
  panel.interactive = true;
  panel.defaultCursor = 'crosshair';
  panel.pivot.x = width / 2;
  panel.pivot.y = height / 2;
  panel.x = x + canvasCenter.x;
  panel.y = y + canvasCenter.y;
  panel.width = width;
  panel.height = height; 
  return panel;
}

export function panelTexture(width: number, height: number, roofZone: number) {
//  const panelTexture = new PIXI.Graphics();
  // panelTexture.beginFill(5872089);
  // panelTexture.drawRect(0, 0, width, height);

  // const outline = new PIXI.Graphics();
  // outline.lineStyle(1, 0x00000);
  // outline.drawRect(0, 0, width - 0.5, height - 0.5);
  // panelTexture.addChild(outline);
  // panelTexture.endFill();
  // return getRenderer().generateTexture(panelTexture);
  const base = PIXI.BaseTexture.fromImage(require('assets/media/textures/spriteTexture.png'));
  const texture =  new PIXI.Texture(base);
  texture.noFrame = true;
  return texture;
  // return you the texture
}

Before I decided to use sprite I tried to use texture made from graphics. However, I didn't know how to make a correct outline so I ended up with the effect like this:
 

My texture is just PNG image (1920 x 1080) with 20px border inside of it.

So the question is how to render 10 0000 completely the same rectangles but in different positions. (width and height are not going to change)

PS.

Also, I forgot to mention that width and heigh in scale 1:1 is from 1px to 15px with some decimal points.

I cannot change it because rectangles have to reflect the real world sizes on google static map

Best regards

Artur