WebGL + Garbage collector = how to make a smooth playback?

[Oldrich Svec]

Take a look at this webpage:

http://piano.musicope.com/game/index.html?c_songUrl=../songs/PianoCrumbs/p3/Friend%20Like%20Me%20from%20Aladdin%20L3.mid&c_idevice=Empty

On my pc, the heap size increase is around 5 kB/second. Interestingly, a major part of it is caused by the requestAnimationFrame itself. In the beginning of the playback the dHeapSize oscilates quite a bit. You can notice periods where the dHeapSize is around -1000 kB/s. This is probably the garbage collector. Whenever this occurs, the playback freezes a little bit.

Is there any way how to limit the garbage collector and freezing of the playback? As you see, I create almost no garbage so I do not see any point why the garbage collector gets called so often... Ideally I would like to have an option to kindly ask the garbage collector to minimize the calls during certain period. Is that possible? Command like: collectAllTheGarbageNowAndMinimizeSuccessiveCallsForAPeriodOf(2 minutes)

[Oldrich Svec]

I forgot to mention that chrome must be run with  --enable-memory-info to see the dHeap changes

[Kenneth Russell]

According to the timeline, the application is allocating and leaking a
DOM node a couple of times a second. I'd suggest tracking down and
fixing why that's happening first.

It's definitely possible to achieve a steady 60 FPS frame rate with
complex WebGL apps. See most of the examples on
http://mrdoob.github.com/three.js/ . Try simplifying your app to the
point where it reaches a steady frame rate, and then add functionality
back in to track down where the problematic code is.

-Ken

> --
> --
> Chromium Discussion mailing list: chromium...@chromium.org
> View archives, change email options, or unsubscribe:
> http://groups.google.com/a/chromium.org/group/chromium-discuss
>
>
>

[Oldrich Svec]

Hi Ken,

thank you for your advice. I have deleted the visual benchmark which was causing the DOM leak.

It is however not the steady FPS that is an issue. If you take a look at the attachment, you will see that the FPS oscillates around 60 FPS which is fine. What is a problem are those three peaks in the middle of the picture. The peaks are almost exclusively caused by the garbage collector. You can experience 5 to 10 such peaks during the song play which disrupts the game play. Therefore I would like to avoid garbage collection as much as possible.

In the enclosed picture, the first peak represents garbage collection of 3 MB of data. The second garbage collection is only 150 kB and the third one only 40 kB! What is the point of collecting 40 kB of data and interrupting the game play?

Any ideas?

[Kenneth Russell]

You'll need to dig deeper using tools like the heap profiler to
understand what is being allocated and collected. You can also pass
--js-flags="--trace_gc" on the command line to see more details about
garbage collection that may not show up in the timeline. Young
generation collections (scavenges) are extremely fast and you should
not have to worry about them. Full GCs on the other hand will cause
your application to drop frames. Most of the time it should be
possible to avoid triggering full GCs by avoiding allocating
medium-lived objects.

http://groups.google.com/group/webgl-dev-list is a better list for
discussing WebGL application issues. You may find other developers
there with concrete advice on tracking down and fixing memory
allocation problems.

-Ken