How to know a 3d model is rendered on the screen

Hi, I just added some loaders while the model is loading. Once all the model is loaded on the screen, I just remove the loader. I am using the callback method of the BABYLON.SceneLoader.ImportMesh to know whether the model is loaded or not. But this is not correct, the material of some models required some textures. So before that textures get loaded the model won’t get rendered on the scene. Because of it, even after removing the loader also some models not get rendered properly. How to solve this issue, How to know whether the model is rendered or not?

Perhaps Asset Manager | Babylon.js Documentation can help.

Thanks for your reply @JohnK . I think it can solve my issue. But I am facing some trouble while execute this. I am having bunch of models and each models having some textures as well. I just add the addMeshTask to load models within a for loop to load all models. and once the for loop gets completed, I called the assetManager.load() . Inside of the onSuccess of addmeshtask, I just called another method called assignMaterial(LoadedMeshes). In that function I added addTextureTask to load textures. So this is the flow of my script. Now, all the models get loaded. But not all textures get loaded. I think, the assetmanager.load() function gets called before the addTextureTask is gets assigned. How to solve this?

At this stage a simplified playground repro would be helpful Using External Assets In the Playground | Babylon.js Documentation

1 Like

I have given below my sample script. Please have a look into this

let material_data = [{"name":"mat1","albedoTexture":"sample.jpg","bumpTexture":"samplebump.jpg"},{"name":"mat2","albedoTexture":"sample2.jpg","bumpTexture":"samplebump2.jpg"},{"name":"mat3","albedoTexture":"sample3.jpg","bumpTexture":"samplebump3.jpg"},{"name":"mat4","albedoTexture":"sample4.jpg","bumpTexture":"samplebump4.jpg"}]
let assetManager = new BABYLON.AssetsManager(scene);
base_models = [
     {"file_name":"abc"},{"file_name":"cde"},{"file_name":"ghi"}]
base_models.forEach((model) => {
        load_model(model);
 });
assetManager.load(); 
function load_model(model_data){
     let meshTask = assetsManager.addMeshTask("mesh task", "", "assets/models/", model_data.file_name + '.glb');
      meshTask.onSuccess = function (task) {
        task.loadedMeshes.forEach((mesh) => {
          if (mesh.material) {
            assign_material(mesh);
          }
        });
      }	     
}
function assign_material(mesh){
     let current_material_data = material_data.find((mat)=>{return mat.name ==mesh.name});
     let current_material = new BABYLON.PBRMaterial(current_material_data.name,scene);
     let textureTask = assetsManager.addTextureTask("image task", 'assets/textures/'+current_material_data.albedoTexture);
         textureTask.onSuccess = function(task) {
                current_material.albedoTexture = task.texture;
          } 
let textureTask2 = assetsManager.addTextureTask("image task", 'assets/textures/'+current_material_data.bumpTexture);
         textureTask2.onSuccess = function(task) {
                current_material.bumpTexture= task.texture;
          } 
     mesh.material = current_material;
}


You could use the isReady function of the mesh ???

1 Like

Thanks for your reply @sebavan . I tried this. But the isReady() return true when just the model is loaded. So still I am facing same issue. the code is given below.

function modelLoadedCallback() {
      
      if (loadedMesh_count >= models_to_load ) {
        let allMeshes = scene.meshes;
        allMeshes.forEach((element)=>{
          console.log(element.isReady());
        })
       }
}

this is the function called on every model import.

/////////////////////////////////////////////////////////////////////
UPDATED
////////////////////////////////////////////////////////////////////

Issue solved, We need to pass true as parameter for isReady () method to verify the textures and material status…

1 Like