Jump to content


Recommended Posts

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:


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.


Link to comment
Share on other sites

Oh shoot! :o 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 :huh:

Link to comment
Share on other sites

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? :lol: Kind of a nasty solution, but desperate times call for desperate measures haha

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...