Jump to content

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


Recommended Posts


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.


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)


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


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...