Jump to content

Latest Pixi not compatible with Angular 9


Recommended Posts

Hi, guys

I need your help, i have angular 9 project with lates pixiJs 5.x.

my GPU go up until 100% when i run.

I see nice article About Angulr & Pixi -> https://medium.com/@hazterisk/how-3-lines-of-code-reduced-cpu-and-memory-consumption-by-13-b451de874701

after implement changes still i get 100% GPU :(

I create issues on https://github.com/pixijs/pixi.js/issues/6578 you will find steps to reproduce and repo

Link to comment
Share on other sites

Yes, I have experience with angular 1 :)

But one guy in twitter has a similar problem , bunnymark is slow as hell in webpack production build. 

We can only provide solutions other people who used react/angular figured out. My honest opinion - its a problem of webpack users that they dont understand how webpack works and cant control what it produces. There's no such thing in vanilla javascript or typescript.

I suggest to try ThreeJS or BabylonJS and see if it also consumes 100% GPU or not :)

Edited by ivan.popelyshev
Link to comment
Share on other sites

	private defaults: IPixiApplicationOptions = {
		transparent: true,
		antialias: true,
		resolution: this.devicePixelRatio,
		autoDensity: true

antialias can be very slow on macbooks with retina if said macbooks dont have powerful video. If its your target device, I recommend to add settings for users: antialias on/off, resolution:1/this.devicePixelRatio.

Nothing else can be done with it.

If you want antialias=false and have good lines at the same time - you have to use custom shaders for lines which @eXponeta has: https://www.pixiplayground.com/#/edit/nyhhOobH-Sq1Vh93Q-6E_ Yes, that's advanced stuff. No, we wont teach you how to do it, it will take time before we actually make plugin that people can use without special knowledge.


Edited by ivan.popelyshev
Link to comment
Share on other sites

first @ivan.popelyshev Thanks, dud :)

I changed antialias to false & still get 80% - 100% GPU.

I go to PixiJS docs to search about PIXI.Ticker and i add this

PIXI.Ticker.shared.add(() => {
    console.log('shared tick');
PIXI.Ticker.system.add(() => {
   console.log('system tick');

When i commented out pixi-viewport, i get good results without zoom in /out

may be pixi-viewport have problem, do you know?

I update repo with changes, you can see :)



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