Material swapping disappearing issue

[simon_bg]

Hello guys,

I have a problem related with material swapping and asynchronous texture loading.

I have a tiled map, and when zooming in the visible tiles swap to a material with a higher resolution image texture. The thing is, the tiled map I have is pretty huge, it has lots of tiles and the images are heavy. What I did until now is just initializing all the materials and textures during the loading screen, loading both the low and the high resolution tile images. Then, the tile swapping works really smooth and is practically unnoticeable. The problem is, for big scenes it takes just too much time loading all these images at the start.

So lurking around the babylon.js source code, I've found the flag useDelayedTextureLoading in the Scene class.
I use scene.useDelayedTextureLoading = true, and still initialize the textures at the beginning (which is really fast now, of course), but the images are actually loaded when they are really needed (when swapping the tiles), which is cool.

The thing is, the swapping is not that smooth now, the tile material "disappears" for a fraction of second and then appears with a new, higher resolution. Having multiple tiles disappearing almost at the same time is very noticeable.

I've set up a demo here. It's a very simplified version of what I have, but you should see the tiles disappearing for a moment when zooming in the camera for the first time:

http://www.babylonjs-playground.com/#1XBLWB#116

So I tried to solve this in this way:
Create a "buffer" mesh, hidden somewhere under the map and when it's time to switch a tile with a higher resolution image I apply the material on the buffer mesh first, so the "special effect" of the disappearing material takes place there. Then, once the texture is fully loaded, I would use the texture.onLoad() method and apply the loaded texture on the right tile. But... it looks like when scene.useDelayedTextureLoading flag is set to true, the Texture constructor callbacks onLoad and onError are ignored?..

So.. I thought it was time to ask you for advice . Maybe you have an idea of how can I fix my solution, or you can come up with a different solution, anything would help. Maybe I'm just complicating the whole thing too much.

Thanks!!

[GameMonetize]

This seems smart but if the mesh is hidden it will never trigger the texture load

[simon_bg]

Oh shoot!  You're right.

Some other ideas I had is having a "placeholder" for my texture, like when the right texture is loading it just would show the placeholder texture instead of disappearing.
Would it be possible to implement?

Or even having two textures overlapping, so when one texture disappears the other is still there, if it makes any sense.

Also, what does the "buffer" in the texture constructor means?

new Texture(url, scene, noMipmap, invertY, samplingMode, onLoad, onError, buffer, deleteBuffer)

Could it help me using it in any way?

The best solution I think would be still to just leave the current texture until the new texture is fully loaded, but again, I don't know how to do it

[simon_bg]

15 hours ago, Deltakosh said:

if the mesh is hidden it will never trigger the texture load

And also... if instead of hiding it under the map, I place it somewhere the camera can see it, but make it very, very small, so it would be undetectable? Kind of a nasty solution, but desperate times call for desperate measures haha

[julien-moreau]

Hi simon !

The buffer is used (and optional) to load a texture from an array buffer (DDS or TGA) or a base 64 string (PNG, JPG). The url must begin with "data:" like "data:myTextureName"

The last parameter tells if the buffer (array buffer or base64 string) should be deleted after the texture was initialized

[simon_bg]

Oh ok, got it. So I think it wouldn't help in my case, but thanks anyway for your response, Luaacro!

[GameMonetize]

Here are some ideas:

- You can have a mesh with a material where alpha = 0 (so not visible BUT rendered) which can host your texture

- You can also think about using diffuseTexture AND ambientTexture to alternate between your layers

[simon_bg]

Okay, thanks! I'll try this out

[simon_bg]

I still don't get why when scene.useDelayedTextureLoading flag is activated, the Texture onLoad() callback is never triggered though

Like here,
http://www.babylonjs-playground.com/#1XBLWB#119

the onLoad() never gets called, but if I delete the line 37 with  scene.useDelayedTextureLoading = true; it does get triggered.

[GameMonetize]

Hum this is because we don't call it when using delayed flag. I'll fix it for next commit

[GameMonetize]

https://github.com/BabylonJS/Babylon.js/commit/72305fd782512917b610be8ed75f3dc16a4ce2dd

[simon_bg]

Great! Thanks, Deltakosh!