Memory usage keeps increasing while changing page

[thomasc]

Hello,

I'm currently working on a Google Street View like in-browser app : I use pictures projected on a sphere with back face culling and an ArcCamera located at the center to allow the user to scroll the view around, and in every such sphere, I put a few arrow billboards that send the user to another view when clicked on (a parameter in the url holds a view id, and clicking such a link changes the document.location.href with the correspoding id in parameter). Very similar to https://www.simplicity.be/article/vr-photo-sphere-webgl/

My problem is that the memory usage of my browser keeps growing when I'm changing view (in fact only when I'm clicking on point not visited before, i.e. whose picture have not been loaded yet). I'm using Firefox, and the pictures used weight between 500 kb and 1 Mo size, but every new view visited adds several Mo to my computer memory, as seen on the Task Manager for the Firefox process. I've tryed things like calls to engine.dispose or engine.resetTextureCache before page changing, but nothing changed. Before using babylon.js to correct projection, pictures where simply rendered on a canvas and this problem was not encountered.

I'm guessing that babylon is holding some data in memory / cache even if the webpage has changed, so how can I rmove this ?

Thanks

[aWeirdo]

Hi, without any code, we can only guess,

it could be because babylon caches..

try:

engine.enableOfflineSupport : false; 

[thomasc]

Thank you for your reply aWeirdo

The method I used initially was pretty bad I think, since changing document.location.href implied the engine, scene, textures... to be destroyed and recreated for the new point of view each time. I've swtched to a more efficient approach where only the texture mapped on the sphere is changed (and the associated material updated) when the user want to change his point of view.

I have another question yet on textures, because I don't understand how the engine is managing them :

Let say that the place for which I wan't to create a street view like experience is made of 10 points of view, i.e. i have 10 * 360° pictures, one being mapped on my sphere at a time, depending on the point of view currently visited by the user.

Initially, I used the following piece of code for updating my sphere texture :

materialPicture.diffuseTexture.dispose;
pictureTexture = new BABYLON.Texture(picturesPathnames[i], scene, false, true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
materialPicture.diffuseTexture = pictureTexture;

Textures where not loaded in advance (because there can be an important number of point of views), so this code resulted in the texture being loaded from the corresponding file each time the user changed location, even if the point of view has already been visited, and took quite some time each time (~1 s. with 1MB files). Note that I'm only working with local file (enabling the access to local file in my browser parameter to perform test). Inspecting the task manager on windows shown that changin the view point increased significatively the memory consumption of the web browser (Firefox) for a few seconds, due to the texture loading apparently, before diminishing.

But I relalized that if the instruction 'materialPicture.diffuseTexture.dispose;' is removed, then visiting a new point of view still takes a bit of time in order to load the associated texture, but once a view point has already been seen, then the texture loading (call to 'new BABYLON.Texture) is instant and the memory consumption shown on the task manager remain constant and low (memory usage being the same after visiting a few points than at startup on the first point of view being loaded).

It seems like some sort of caching is being performed internally (I'l not keeping track of textured loaded on my side), but why doesn't it increase the amount of memory being used by the browser ?

When I keep textures by hand in an array as they are loaded, or when I load every textures at the launch of the webpage before allowing the user to travel (which does not require to access the files after the loading then), the amount of memory used by the webbrowser is significatly more important.

What is going on here ?

[aWeirdo]

Hi @thomasc 

If i was you, i would load all textures at once, and then switch between them as needed,

An edit of the materials PG as example:

http://www.babylonjs-playground.com/#29DGQU#1

on-the-go loading of stuff is rarely a good idea

you could store them in an array or something and and find them depending on where the user is going.

 

As for why cached textures doesn't increase the memory when "reloaded" is because it's already there ^^

[thomasc]

Hello aWeirdo,

I'm now loading my 10 textures at application launch so it's efficient once everything is loaded (on task manager, memory foot-print for Firefox is ~200 MB). But during textures loading, the memory consumption rise up to more than 1 Go (for 10 * 1 MB textures being loaded), and when executed on a weaker computer, this results in a memory shortage with errors like this :

texImage2D : Ran out of memory when allocating a buffer for doing format conversion

Apparently loading my *.jpeg texture implies conversions which require a lot of memory to be performed.

What's the best way to deal with this ? Should I encode my textures in a different file format to avoid conversion ? It's seems also that babylon is loading the 10 textures in parallel, or at least memory allocated to perform loading is not liberated immediately an remains for a short time if this is sequential, because the memory footprint of Firefox during loading time is proportionnal to the number of textures being loaded.

[thomasc]

This thing is driving me crazy

On the laptop I'm using at work with Firefox, loading those 10 jpeg of roughly 1 MB of size each, with the code you've posted on playground wWeirdo, results in an increase of several hundred of MB of memory usage for a few seconds (as seen on Task Manager) before decreasing back to the standard Firefox memory usage of ~200-300 Mo. In this loading process, between 1/3 and 1/2 of the textures are not loaded due to lack of memory, and displayed black on the rotation.

When I used to load the images one at a time, I was not facing this problem unless switching view rapidly, meaning that if I "pause" the loading process between each texture loading a few seconds, this problem is not encountered (and the material are all present in memory in the end).

What surprises me is that I've searched the web for similar problem and couldn't find another topic, whereas some demos are far more complex and heavy than what I'm trying to do here. I mean nobody else as been facing such an issue for now ?

[aWeirdo]

Hi @thomasc something is clearly wrong..

in firefox, on my pc, at start-up it takes about 100MB of memory, loading the PG i provided above increases it to about 138Mb and then after loading it is running smoothly, going up and down between 135Mb and 138Mb.

there are two textures on that PG, around 320Kb in total, and opening the PG on the basic scene example uses around 134-135Mb, 

not a big difference tbh..

But even with 10Mb of textures, it shouldn't jump that high..

I'm loading roughly 75Mb of assets (both 3d models, animations & textures) on my project and firefox jumps to 435Mb on a clean start.. and that 435Mb also includes roughly 3Mb of html, css, Ui textures, fonts & js files.

 

If possible, please try to re-create an example of your scene in the PG, or host a live demo somewhere, so we see what is happening.

[Nabroski]

Hello

you have to debug your code

something is wrong