Jump to content

Drawing Primitives (Graphics), Makes PIXI.js lag


Recommended Posts



I'm having issues drawing Graphics elements in PIXI.

I'm having major fps problems and i'm not sure why and IF it should lag on the hardware im testing on.


GPU: amd radeon 7500/600m

CPU: A decent quad core cpu



What you see below is a world map generated from a JSON file.

This json file contains X and Y coordinates for each of the Polygon points for specified country.

There are in total 1100 polygons, sice is as you can see varying.

I have made a little function to skip some polygon points in attempts to boost the performance, But no luck (Example skip every 2 point)



Ive tried to remove interactivity from the graphics objects, this did not help either.

All of these countries is inside its own container, and the lag is clear when attempting to move this container.


So is there anything i might be able to do to make this run abit more "lightweight"

Ive been thinking about the possibility to convert each of the graphics elements to a Sprite instead, but i have no way to identify where the sprite should be positioned.

Anyone have an idea?


If you have a semi crap computer laying around: to test yourself




Link to comment
Share on other sites

I belief this will create thousands and thousands of triangles which will totally kill the GPU performance. As you guessed, you should generate a texture from the Graphics object of each country (or the entire thing if you don't need them separately) and then create a new Sprite from this texture and the Sprite to your Container/Stage.


If you rely on the JSON data for the countries positioning, indeed positioning the Sprites may be tricky, but it should probably be a one time effort. One "trick" I like using in such situations is to make the object I want to position easily accessible from the DevTools Console and play with the x/y properties until I get them right and then change them in the code.


Thinking about it, in the JSON data, the leftmost point of each country, should be the x coordinate of the country and the topmost will be the y, so maybe you can extract those values from the data.

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