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
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
There are so many ways to solve this. Cache them first maybe?
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.
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?
creating a cache of textures would be one way to go, setting the texture only after the texture was loaded is the second.