Extreme FPS dropoff after upgrading to 3.0 alpha

[thrice]

After updating my project to use 3.0 last night, I am seeing a huge FPS dropoff. My (less powerfull) laptop is currently using my 2.5 version, iMac using 3.0 , to compare the two side by side to look for issues. Basically:

2.5 version renders at 30ish FPS on laptop

3.0, 0.6 FPS, consistently

The only thing different I noticed in the engine info, is the currentBufferPointers in the 3.0 version has 15 null objects, whereas in 2.5, it's all filled out with actual objects. Could this somehow be related?

Additional info:

I'm building a card game, and rendering a large amount of planes/materials (700ish ATM), however, having no issues in 2.5

One thing I am doing that may be related (but I'm not sure what would have changed to cause the issue), is rendering all the hover states of the cards off the screen, in advance. When I comment out the hover states portion of my application, I can get FPS up to 20. I'm not exactly sure, but it almost seems like in 2.5 version, Babylon is being smart about not rendering the objects outside of the field of view? Also, I've noticed that when I enable the camera within my app and start to look around (so the whole stack of the hover states comes into view for instance), things start to get laggy.

My other suspicion is: I am building an angular library wrapper which I am using within my project, which requires me to lazy load objects as it parses the dom structure. So point is, when iterating through the 120+ cards on application load, it's doing quite a bit of work the first time it renders. Was there anything added or changed in 3.0 related to how the FPS gets measured, or related to controlling how often the render loop fires? (pardon my ignorance if that isn't how the render loop works at all). So to clarify: I'm wondering if somehow the framework is detecting that the scene is busy, and since it is always busy on first load, it uses that as a benchmark as to how often it thinks it will be able to render, and then throttles the render loop accordingly?

[JCPalmer]

Do not really know, but would be interesting to know what is reported for _glVersion.  3.0 uses WebGL 2.0 if available.  Not showing in first due to currentEffect being expanded. 

Perhaps AMD has issues with WebGL 2.  Try on a machine with NVidia hardware.

[GameMonetize]

Can you share a repro somewhere?

[thrice]

22 hours ago, Deltakosh said:

Can you share a repro somewhere?

Not really ATM sorry :/ - I can paste relevant code in question if that's helpful (in order to see if I'm doing anything stupid), but even then it's a bit tangled with my angular library wrapper, along with the larger scene, so I'm not sure how helpful that would be, but if you think it would help I can. Or I can add you as a collaborator on GH if you want to look at the client code, however, you won't be able to run it to debug as there is a rails server with all the card data, and a nodejs server which handles game events/game state updates

[thrice]

Ok think I figured out the issue, though still not sure why performance is so much worse in 3.0 - but:

Appears to be a Canvas2D issue - I isolated it to the card hovers (well, cards in hand also share the same code but since there are less cards in hand than hovers wasn't as obvious). By lazy loading a couple of child planes within the hover, I can render at 20FPS ish. (the -40 FPS being caused by the 10ish cards in each players starting hand)

Basically, In each card hover (which is a plane), I have 2 additional planes which are causing issues.

1. I create a card-attributes plane, which I overlay on top of the card, then I create a canvas2D world space canvas, and attach it to the card-attributes plane (because I want to set the attributes at the top left, top right, bottom right, bottom left

2. I create a card-keywords plane, which describes all the keywords on the card, which I offset by the width of the card, to the left. I create a canvas2D world space here as well. (I can't use the same world space, since these keyword descriptions appear to the left of the card when hovered.)

^ just to explain why I am creating so many WorldSpaceCanvas objects - also I just barely got the text to be readable in all circumstances last weekend, and I have to basically do a lot of calculations of the size of the plane (on screen), which is linked to the WorldSpaceCanvas, in order to make things appear in the right place, with the right size ratios. To further try to justify my reasoning for needing so many

-- Also worth noting, previously (2.5), I copy and pasted the Canvas2D dist into my codebase - After upgrading, the existing canvas2D library would not play nice  with project, same issue as listed below 

 

tl;dr;

it seems that as of upgrading, and/or switching the Canvas2D library to use the version in the repo,each WorldSpaceCanvas2D object allocation is adding about a 0.5 FPS tax on the render loop.

Not sure if this is a bug in a newer version of Canvas2D that got included in the package (I need to go see if I can pull version numbers out to compare now), or if it's a bug in 3.0 no longer playing nice with WorldSpaceCanvas2D, but my 2.5 version was able to handle all of the hover states with the excessive WorldSpaceCanvas2D object allocations without problems.

[thrice]

Looks like there were def a lot of changes between the version of Canvas2D I had in my project, and the version which is included in the 3.0 package (wanted to confirm it wasn't the same file), but not sure exactly the version numbers of either, or whether it's for sure the newer version of Canvas2D that is the issue, versus 3.0 not playing nice with it (probably the former if I had to guess but)

https://github.com/jasonayre/babylon_canvas2d_diffing/pull/1/files

 

[GameMonetize]

Can you try to use Babylon.GUI instead?

http://doc.babylonjs.com/overviews/gui

[thrice]

12 minutes ago, Deltakosh said:

Can you try to use Babylon.GUI instead?

http://doc.babylonjs.com/overviews/gui

That was actually my reason for upgrading to 3.0 alpha, but after looking at it, not sure it's far enough along to support all the features from Canvas2D that I am using. But I suppose I should give debugging this a break and explore if I can replace

[GameMonetize]

Please let me know what could be missing

[aWeirdo]

-40 FPS from displaying 10 "cards" seems Very extreme,

Can you share some code of how you are creating them and/or a screenshot of how it looks?

Also, please check this PG and report back your FPS ,

http://www.babylonjs-playground.com/#1ALQPZ#26 (takes a few seconds to load, if on low-end device, SAVE anything you don't want to lose in-case of JS crash.)

and last,
If possible, screenshot's of Memory profiles. (on Chrome, CTRL + SHIFT + i -> Memory Tab -> Record Allocation Profile -> click Start -> reload page and leave for 60+ sec -> click Stop, expand Console as high as it will go and grab a screenshot  )

[adam]

@thrice Please try the latest version of Canvas2d.  The version you point to here:

https://github.com/jasonayre/babylon_canvas2d_diffing/pull/1/commits/2ff4c5a6932c0ef6aae9fe9ae10868f8ebe71d4a

doesn't include a fix that I added a few days ago that increased the fps considerably when a lot of prims are moving on the screen.

This is the fix:

https://github.com/BabylonJS/Babylon.js/commit/a929e7df71d04f8ffc0c98b7a138863d78abe8ab

[thrice]

1 minute ago, adam said:

@thrice Please try the latest version of Canvas2d.  The version you point to here:

https://github.com/jasonayre/babylon_canvas2d_diffing/pull/1/commits/2ff4c5a6932c0ef6aae9fe9ae10868f8ebe71d4a

doesn't include a fix that I added a few days ago that increased the fps considerably when a lot of prims are moving on the screen.

This is the fix:

https://github.com/BabylonJS/Babylon.js/commit/a929e7df71d04f8ffc0c98b7a138863d78abe8ab

@adam thanks, actually was about to update this. - I'm still working through it, but I think it may be caused by an out of date version (the NPM alpha package) - I actually pasted in the libs from the preview release into my lib in my node_modules and it seemed to be fixed as far as I can tell. But then didn't see the GUI lib included, so panicked thinking I had installed v2.5 again, so started from scratch this time trying to link to preview release directly in the git repo locally, and current status stuck in node package/webpack hell

Would be great if there was an easier way to install the preview releases for us who are using webpack/build systems

[GameMonetize]

Quote

 if there was an easier way to install the preview releases for us who are using webpack/build systems

If you can tell me what you need to ease the install, I'll be pleased to add it to the repo

[thrice]

@Deltakosh I think the issue is more related to how the lib is structured, i.e. with the whole separation of the preview_release directory, and it having the latest version of the compiled code. I think it may make more sense to have the master branch contain the latest version, and when there is a stable release done, then there is just a branch/tag for the stable release.

That way if someone wants to use master, they can just:

yarn add https://github.com/BabylonJS/babylon.js.git#master

Or if patches are made to stable and a build hasn't been released, and they want to point to the patched version with the fixes:

yarn add https://github.com/BabylonJS/babylon.js.git#2.5-stable

(or npm equivalent)

All of this of course is reliant upon having a package.json at the root of the repo as well

 

[GameMonetize]

For the packages at root I see no problem

But I won't change our way of working (with preview folder): This has too many implication with all our build chain and tooling

[thrice]

On 6/4/2017 at 6:46 PM, Deltakosh said:

For the packages at root I see no problem

But I won't change our way of working (with preview folder): This has too many implication with all our build chain and tooling

@Deltakosh Ya, I get that, I figured it was likely somehow due to the build process, but it is still a pretty big deal IMO to be able to point directly to the master version of the code at any point in time, which can't really happen without the package.json at the root referencing the master version of the code (as far as I know at least). - Unless there is a preview release branch, and its package.json points to the preview release files, IDK.

Related (and to illustrate the importance of being able to point local project at master): This mysterious issue I opened on Saturday, https://github.com/BabylonJS/Babylon.js/issues/2231 - ended up being an issue caused by me adding the repos manually to my project, and webpack compiling them because there were outside of my normally ignored node_modules folder (it compiled mostly correctly, this was the only error I was running into, but burned a day trying to figure out what the issue was). The next day when I saw you pushed a build I removed repo from local, and it magically worked.

--- also:

Just wanted to say THANK YOU for the GUI stuff. I started porting some areas of my project over to GUI lib from canvas2D, and it seems a much easier/better fit for my use case (which is extremely text heavy card game, so text being legible and not looking bad is important). Having a couple issues I'll open another thread about, but they seem pretty minor in comparison to the headaches I was having before, and all the manual size calculations I was having to do in order to render text at a consistent size. Also FPS improved from consistent 30-40, to 50-60, so thanks again!

 

 

[GameMonetize]

Thanks for the feedback

I'll move the package at root today