Low FPS and can't find a reason

[threader]

Hi, a lil prototype im working on (1st time trying out pixijs) has been running kinda low on FPS lately. I know I can git bisect the repo and find out the first offending commit, but the problem is I'm pretty sure I'm handling few enough instances and sprites to not have to be worried of this kind of issues. 

Attached are a few profiling images to give anybody who's willing to help an idea.

 

[ivan.popelyshev]

You use something like vuejs that affects whole tree? Any browser plugins?

[threader]

No fancy stuff here. I'm writing straight TypeScript pixiJS code using webpack to transpile it into JS and bundle my stuff.
I think the slowdown might have been caused by some expensive piece of logic I introduced, but I'm pretty sure I can get away with it (I'm porting this same game from other 2 platforms where it runs smoothly), if I work on getting pixi to run smoother in some way.

I'm pretty convinced there's something wrong I'm doing on the pixiJS side, since I'm seeing a lot of time spent by `Application.render`, and I'm also seeing an inexplicable (even if relatively small) amount of time spent by `TreeSearch.recursiveFindHit`, which I don't even know how and why is getting triggered.

More screenshots to give y'all an idea. Not that there's also an heap screenshot to let you see if maybe there's some issue on my side, trying to render too much stuff at once.

Edited August 11, 2021 by threader

[ivan.popelyshev]

I also need the gauge from "summary"

btw sometimes its about transpiler. Babel produces very bad god in some configurations

Edited August 11, 2021 by ivan.popelyshev

[threader]

Here's the "summary" section.

Here's the whole profiling snapshot in case you'd like to inspect it: https://ufile.io/1qce891a.

[ivan.popelyshev]

All looks fine, your scene has about 4k sprites in it, right?

[threader]

Yep, mostly of them are the sprites for each cell in the current level's map (either floor or wall sprites). I've tried not registering the sprites (basically only rendering the player plus a handful of other sprites) and the perf issues are still there.

[ivan.popelyshev]

https://github.com/pixijs/pixi-tilemap can help you with sprites. Unless you need scaling, but even that is possible to make by cloning the project.

Though you'll have to make your own interaction, detect which cell was clicked by x,y relative to tilemap e.t.c.

Alternative: just use ParticleContainer or several, with sprites from same atlas 

 

Edited August 11, 2021 by ivan.popelyshev

[threader]

One of the main things which seems to affect performance (other than the high number of tile sprites being registered) looks like the 2 shaders I'm registering as filters for my camera's viewport. Is it normal for two, basic, shaders to be such resource hogs?

 

[threader]

3 minutes ago, ivan.popelyshev said:

https://github.com/pixijs/pixi-tilemap can help you with sprites. Unless you need scaling, but even that is possible to make by cloning the project.

Though you'll have to make your own interaction, detect which cell was clicked by x,y relative to tilemap e.t.c.

Alternative: just use ParticleContainer or several, with sprites from same atlas 

 

Concerning this part: Basically my floor/wall tiles NEVER  interact with anything, so I don't need any type of interaction control actually. I guess I can try out `pixi-tilemap` and hope it improves my performance.

I think I may be something wrong right here, where the tiles' sprites get instantiated when a new Map is loaded:
 

[ivan.popelyshev]

just .. why do you need BaseTexture.from() there if there's already "resources[...].texture.baseTexture" ?

Just put those in ParticleContainer, or add coords to tilemap. You even can omit creation of texture, just add UV's there, and make sure texture/baseTexture is added in constructor

Edited August 11, 2021 by ivan.popelyshev

[threader]

Oh I'll look into that. I'm actually 10 days max into PixiJS, and I confess I'm having a hard time with its documentation. I'm improvising most of the time, hence I guess 90% of my codebase will get refactored sooner or later.

[ivan.popelyshev]

> I'm having a hard time with its documentation.

clone pixijs repo locally, and open it in separate IDE window. search classes when you use them, use shortcuts to do that. Documentation is just a part of the source , and pixi is not supposed to be a black box - its a WebGL renderer, and that environment is very harsh, we cant really save you from all the low-level stuff.

[threader]

4 minutes ago, ivan.popelyshev said:

> I'm having a hard time with its documentation.

clone pixijs repo locally, and open it in separate IDE window. search classes when you use them, use shortcuts to do that. Documentation is just a part of the source , and pixi is not supposed to be a black box - its a WebGL renderer, and that environment is very harsh, we cant really save you from all the low-level stuff.

Yep that's exaclty what I'm doing, but I still think the docs need a lot of improvement in their current state. Not criticising tho, the complete opposite, I think PixiJS is great and is suffering from the lack of a few trivial virtues (scarce and sparse docs, no solid community, lack of documentation about best practices) which have made (and can surely make Pixi) other game libraries/frameworks/engines much more widespread and supported. Look at Love2D for example: it's a framework for Lua, a language which is super awkward to use in 2021, but it's still picked up by a lot of gamedevs (I've used it too and it made me single-handedly learn Lua for that purpose) because the docs and community are super helpful. 

Ofc I'm not trying to tell you how to handle your business, it's  just a few thoughts off the top of my head. I really think a simple Discord channel and a bit more documentation is all it's needed for Pixi to really shine.
Heck, I'm thinking of contributing to all this personally if I manage to get proficient enough with it. I just hope I don't get frustrated too much. 

[ivan.popelyshev]

yes, our docs cover, like, 10% of all the power

there's a discord channel, not official, listed here: https://github.com/pixijs/pixijs/wiki/v6-Resources , many helpful users there. There's official slack , you have to request an invite for it.

[threader]

4 minutes ago, ivan.popelyshev said:

yes, our docs cover, like, 10% of all the power

there's a discord channel, not official, listed here: https://github.com/pixijs/pixijs/wiki/v6-Resources , many helpful users there. There's official slack , you have to request an invite for it.

Well I think Pixi is a great enough tool to need its own Discord server. I can take care of that if you haven't got time to set it up. As I just said, when I'll feel confident enough I can and will work on documenting this stuff. It's too great to still be so underdocumented.

Also, please invite me to the official Slack, if possible. Thanks.


As for the tilemap stuff, I'm trying to use it, but I'm getting an awkward `Uncaught TypeError: Cannot read property 'getShader' of undefined (at CompositeTilemap.render)`

[ivan.popelyshev]

Done.

hm, strange. Most probably something was tree-shaken away. See this? https://github.com/pixijs/tilemap/blob/66dd8925593d1251e145aa6cb4ab5e8d3c0d12a8/src/TileRenderer.ts#L201 its where TileRenderer is being registered. Try to add the same line in your files before you create a renderer. Just import TileRenderer and add a line.

[threader]

Tried it. Nothing changed.

[ivan.popelyshev]

ok, share minimal demo please. Because my demos with pixi-tilemap work fine

[ivan.popelyshev]

Alternative: you have two pixies in your node_modules. looking at https://github.com/pixijs/tilemap/blob/66dd8925593d1251e145aa6cb4ab5e8d3c0d12a8/package.json#L57  I dont know , maybe plugin installs extra pixi 6.0.0-rc3 , somehow? if so, i have to repair it

[threader]

2 hours ago, ivan.popelyshev said:

ok, share minimal demo please. Because my demos with pixi-tilemap work fine

It's a bit a problem setting up a reproduction of the whole thing. If you're up for it and give me an e-mail address, I can invite you to the repo so you can take a look. I can then pinpoint the areas where I think the problematic code resides.

 

EDIT:
Looks like I got it working somehow. But the performance issues are still there.

 

EDIT #2:
No, the issue is still there. It happens when I try to add the tilemap to my viewport:

Camera.viewport.addChild(this.compositeTileMap);

 

Edited August 11, 2021 by threader