Latest Pixi not compatible with Angular 9

[Oshri]

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

[Oshri]

@ivan.popelyshev i see you have experience with angular and PixiJS, did you have that issue ?

[ivan.popelyshev]

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 April 22, 2020 by ivan.popelyshev

[ivan.popelyshev]

Oh, wait you have a demo... let me try

[ivan.popelyshev]

Nope, I dont see a problem, all 120FPS for me on discrete nvidia 2070 , and profile shows almost nothing on JS side

Need more details on your system config

[ivan.popelyshev]

	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 April 22, 2020 by ivan.popelyshev

[Oshri]

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.shared.stop();

});

 

PIXI.Ticker.system.add(() => {

   console.log('system tick');

   PIXI.Ticker.system.stop();

});

pixi-viewport

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

 

 

[ivan.popelyshev]

Honestly, it all should work. Its just a few lines, right? Try to use another device.

 

Edited April 22, 2020 by ivan.popelyshev

[ivan.popelyshev]

I'm used to debug 10.000 bunnies, not 10 lines on a unknown device. 10 lines 100% GPU means that you have problem with HTML5/WebGL on your device. Try ThreeJS just to check that its WebGL/browser/webpack fault and not pixi devs.

[Oshri]

@ivan.popelyshev After investigation i found that Angular NgZone asynchronous API monkey patching  RequestAnimationFrame. 

2 days ego Angular publish new version 9.1.3, And after upgrade NgCli. i get good results.

Thanks.

 

P.s: If i need to preset loading until first render, there is nice trick for that?

[ivan.popelyshev]

Holy cow!

Yeah, "prepare" plugin, packaged with pixijs. What it does - goes recursively through tree and calls "renderer.texture.bind()" for each testure it finds. You can do it yourself.