Issue with loading materials

Is there a way to know when the mesh has completed rendering?
This is the [](https://game link)
you can check in this link that ball and the 3 cylinder are rendered first and then the ground is rendered later.

And I’m using this code

CreatePitchMaterial(): StandardMaterial {
    const pitchMat = new StandardMaterial("pitchMat", this.scene);
    const uvScale = 4;
    const texArray: Texture[] = [];

    const diffuseTex = new Texture("./textures/pitch/pitch_diff.jpeg", this.scene);
    pitchMat.diffuseTexture = diffuseTex;

    const normalTex = new Texture("./textures/pitch/pitch_nor.jpeg", this.scene);
    pitchMat.bumpTexture = normalTex;

    const aoTex = new Texture("./textures/pitch/pitch_ao.jpeg", this.scene);
    pitchMat.ambientTexture = aoTex;

    texArray.forEach((tex) => {
        tex.uScale = uvScale
        tex.vScale = uvScale

    return pitchMat
this.pitch = MeshBuilder.CreateGround("pitch", { width: gameConfig.playArea.width, height: gameConfig.playArea.dist }, this.scene);
this.pitch.physicsImpostor = new PhysicsImpostor(this.pitch, PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0, friction: 1 }, this.scene);
this.pitch.material = this.CreatePitchMaterial();

I want to know if the pitch is rendered so that I can add other object or maybe stop loading screen.

Hi and Welcome to the Community :smiley:
You wouldn’t happen to have a PG to share?
It’s the easiest way for us to look at a case and provide fixes or suggestions.
Else, you could use a promise, await or then depending on how it’s organized.
You could also use an onReady observable or a manager. I guess there are many ways.

Maybe adding an observer to this.pitch.onAfterRenderObservable will do it?

Thanks for the reply. I don’t have it on PG as I don’t know how to load images, you can check this [link] though( Can I use executeWhenReady? Is there something I need to keep in mind?
I want to add loading scene and first add these 2 ground then add ball and wickets. So I check executeWhenReady and in callback I run code to render ball and the wicket. Is it right? I feel like there is better way of doing it though

Thanks for the reply.
Is it feasible incase I have multiple pitch loading?

There’s the method from @Evgeni_Popov above that should work. Basically any method would work. It’s just a matter of organizing it.

scene.executeWhenReady will let you know when everything is ready for rendering (materials compiled, textures used by materials loaded, etc).

If what you need is to know that a mesh has been rendered, then you should use mesh.onAfterRenderObservable.

Using External Assets In the Playground | Babylon.js Documentation should help you set up a playground that uses external resources.

1 Like

Thanks a lot @mawa and @Evgeni_Popov.