Texture Image Missing when I leave app tab

Questions
,
1

I’m working on creating a 3d Map model which contains a plane geometry and MeshPongMaterial on threejs. This Material takes two texture images: one for displacementMap(WEBP for DEM) and another for MAP(WEBP).

Here’s the problem. Whenever I move to other tab(I’m using Chrome Broswer) and do some actions, the Map image loaded with THREE.TextureLoader disappears or gets distored when i get back to current tab.

the missing texture
the yellow plane is the mesh placed right under the map Mesh.

what it was & what should be
Only the Map mesh’s texture missing or distorted i guessed (the brown-white plane is map-mesh)

I want to know what would be the main problem or Cause for this.

Thanks for Read this :slight_smile:

  • I tried updating material and mesh when i re-focused on tab with EventListener ‘focus’.

  • Plus, I am trying to avoid using reload code everytime I return to current tab.

2

What is the resolution of both textures that you’re loading?

3

It’s 4404 * 2642, 72 DPI for ‘height map’, 4713 * 2825 72 DPI for ‘map’.
Could it be a matter of image file itself or those size?

4

If the images are huge and the device running the app has limited memory - chrome will drop the memory allocation from other tabs to let new tabs run. Try reducing the size of images and see if it fixes the issue.

2 Likes
5

Okay, Thanks a lot.
I will try it. :grinning:

6

Also I think this is usually associated with a “webgl context loss”
which you can actually watch for and respond to by reloading your stuff.

1 Like
7

I really Appreciate for your help :slight_smile:

1 Like