Object Flickers while changing the material of the mesh

Questions
1

Hi
I am trying to change the PBR Material of the mesh.
Material is coming from the server.
So when I am change the base texture of the pbr material the object vanishes from the screen and then again appears with the new textures.(Happens only First time)
I want that material should replace without this flickering or vanishing of the object.
How to achieve this?

I am attaching the link of the playground :https://www.babylonjs-playground.com/#Z1VL3V#202

2

Any solution?
@Deltakosh
@brianzinn

3

Maybe try to use the assetManager, to preload the textures and to not use new BABYLON.Texture each time
users click on the button: Load Files with Assets Manager - Babylon.js Documentation

4

Its still flickering

5

There are so many ways to solve this. Cache them first maybe?

https://www.babylonjs-playground.com/#Z1VL3V#203

In this case you just need to show a loading screen until both were loaded. Since they are rather small, i doubt anyone will notice them being downloaded in the background

You can also use the onLoad function callback in the Texture constructor to set the texture.

Another note - don’t recreate textures on each click, this is a waste of good resources. Reuse textures as much as you can.

6

I am creating a congifurator where I am dynamically rendering all models and there textures.
So I can cache them as blob in the index db (client side db).

I tried this code but now everytime I change the texture, Flickering happens.

var url = URL.createObjectURL(modelData.texturePath);
pbrMat.baseTexture = new Texture(url,scene,true,false);

Is there any other way out of using texture as blob or any other way to cache the textures?

7

creating a cache of textures would be one way to go, setting the texture only after the texture was loaded is the second.