Jump to content

PIXI canvas freezing 0.2 second every 10 seconds


Recommended Posts

Hello,

I recently noticed every 10 sec my PIXI canvas is freezing 0.2 second, and I don’t have any clue why.

CONTEXT

dependencies

"@types/pixi.js": "^5.0.0"

"pixi.js": "^5.3.9",

"preact": "^10.4.8",

 

PIXI.JS canvas is contained in PREACT component

I refresh the canvas this way

    private GameLoop(): void {

        if (this._stop) {

            return;

        }

        this._updater.Update();

        requestAnimationFrame(() => this.GameLoop());

    }

the updater contains 200 items which have more or less 3 sprites each, the updater iterates items in order to update the position of each sprite.

	public Update(): void {
		if (!GameSettings.IsPause) {
			this.Items = this.Items.filter((item) => item.IsUpdatable);
			this.Items.forEach((item) => {
				item.Update(this.ViewContext.GetX(), this.ViewContext.GetY());
			});
		}
	}

available environment:

https://kimchistudio.tech/DEV

I add some logs to know how much time it took for the updater to iterate all items. 

 [ALL] 12 ms
main.js:679 -> Cn 1 ms
main.js:679 -> Pi 1 ms
main.js:679 -> hn 1 ms
main.js:679 -> hi 0 ms

I haven't noticed anything in chromium profiler, There is no heavy calculation, the script in this environment only handles the display (no IA whatsoever). I have used PREACT for a while and I don't think these freezing are due to it.

Thank you very much for your helps

 

Edited by freddyInKorea
Link to post
Share on other sites
  • freddyInKorea changed the title to PIXI canvas freezing 0.2 second every 10 seconds

Probably, you call this a lot and it spawns many objects that clog GC: https://www.npmjs.com/package/luxon

Dont put heavy things that spawn many objects in render/update loops.

Spawning objects in render is ok only if you know that there aren't many or if you can prove amortization, like, "this objects is spawned once per this action, but this action is heavy itself so it doesnt matter" or "it actually cant be spawned more than 30 times per minute because reasons"

Edited by ivan.popelyshev
Link to post
Share on other sites
Posted (edited)

Hello ivan.popelyshev,

helpful as always :), even before I added these luxon variables for monitoring the updater I had these tiny freezes every 10 seconds more or less . However I like the idea that these freezes happen because the GC is collecting. I keep investigating

EDIT: Alright, I re-publish it :) need two minutes to dockerize and push keep in touch

Edited by freddyInKorea
reply
Link to post
Share on other sites
Posted (edited)

alright it's deployed :) meanwhile I am looking the profiler too  hehe 

EDIT: From my understanding,

- orange blocks are the execution time of the game's script,

- blue curve is the JS heap, each time the curve collapses it means GC did collect unused variables.

- red blocks are the frame rate.

jsHeap.thumb.png.f2863e8bc65caf4ee95bd63f6d73cfbe.png

 

From what I see:

The execution time of the game's script looks pretty stable, it generally takes around 5ms to be executed. Despite this stability, the frame rate seems to change from 10 to 30ms. When the fame rate is bad, JS heap is not collapsing. It means for me, I still can have a bad frame rate even if GC is not collecting. So this behavior remains a mystery 😥

EDIT 2: it's a bit confusing, the profiler did record the tiny freeze,  but it's not obvious to spot when it occurs from the data.

When I am experiencing it, it feels more a freeze of 100 or 200 ms, it doesn't match the frame rate of the profiler

Second thought: Let's assume that the frame rate is good. So it means for some reasons,  there are loops in which sprite don't update 

well I think I see the same behavior in this example:

https://pixijs.io/examples/#/demos-basic/tinting.js

Every 10 seconds, it s possible to notice a micro freeze, I am starting to wonder if it doesn't come from my computer.

EDIT 3: the issue is from my computer, I used other devices and I don't have any tiny freezes, I am sorry for the inconvenience and thank you for your help Ivan

Edited by freddyInKorea
Link to post
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.

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

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...