Changing texture crash on mobile - context lost

Questions
,
1

I have been working on a tree.js project, with a simple model.
I try to change the colors by changing the map texture.

on mobile phones, especially iPhones, the WebGL crashes after 3-4 colors (map texture) changes.
on the PC browser, it works well (although if you change the texture many times fast enough it will also crash).

please see the model here: https://combie-web.herokuapp.com/ (you can change colors with the color icon BTN on the right)

the only error I get after a crash is: (on the PC)

webgl: context_lost_webgl: losecontext: context lost

the model build by 6 objects that all has the same map (each object knows what part of the map to use).

I am changing the texture of only one of the objects by using TextureLoader:

//g_Body declare on scene load
var g_Body = scene.getObjectByName("Body");

...

var loader = new THREE.TextureLoader();
// load a resource
loader.load(
	// resource URL
	`static/Color/${color}/Combie_Combie_Diffuse.png`,
	// Function when resource is loaded
	function ( texture ) {
	  // apply the new texture to the model body map
	  g_Body.material.map = texture;
	  g_Body.material.needsUpdate = true;
	},
	// Function called when download progresses
	function ( xhr ) {
	  console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},
	// Function called when download errors
	function ( xhr ) {
	  console.log( 'An error happened' );
	}
);
2

Maybe it would help to load the textures once and swap them out as needed, instead of using a TextureLoader over and over again?

3

I tried to do what you suggested but unfortunately, it didn’t help. (although it did make the texture change faster)
any other ideas?

4

I noticed that the memory used by the GPU process in Chrome is increasing every time I change the color. So, I’m guessing it’s a memory management issue of some kind?

5

Yes I think so as well,
but I can’t find a way to clear the last texture after (or before) I change color (texture).
any suggestion on how to handle the memory?

6

I would suggest trying to narrow it down to which lines are actually causing the memory to increase. For example, does the memory still increase if you comment out these lines?:

    g_Body.material.map.dispose();
    g_Body.material.map = this.textures[color.toLowerCase()];
    g_Body.material.needsUpdate = true;

If not, then you know it is caused by the texture/color change. If yes, then it is probably caused by something else.

7

thanks for the input bill =)
the crashes are definitely caused by texture changes. I think that the GPU get memory overflow.
I recently added the lines that you refer to:
g_Body.material.map.dispose();
which helped a lot with most mobile crashes.
but still, I have some rare crashes on iPhones with older versions, on specifics devices (tested on 2 similar iPhone 6+ with same ios version and on was working perfect and one crashing after texture change…)
any ideas on how to debug or solve this?

8

Can you post more specs on the texture? Whatever it is though, it should be able to handle one texture.

9

the texture is made by a .png file and is attached to specifics objects in the model. each object knows which part of the texture to use
I load it with THREE.TextureLoader() (as you can see in the code in my first post). I load ALL the texture when the app is loading and then only change the texture like this:

g_Body.material.map.dispose();
g_Body.material.map = this.textures[color.toLowerCase()];
g_Body.material.needsUpdate = true;

what other specs of the texture can I provide?

10

This might be a bit late but I am experiencing the same thing.