Issue with loading materials

Questions
1

Hello,
Is there a way to know when the mesh has completed rendering?
This is the [https://courageous-buttercream-a6b0a5.netlify.app/](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;
    texArray.push(diffuseTex);

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

    const aoTex = new Texture("./textures/pitch/pitch_ao.jpeg", this.scene);
    pitchMat.ambientTexture = aoTex;
    texArray.push(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.

2

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.

3

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

4

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(https://courageous-buttercream-a6b0a5.netlify.app/). 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

5

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

6

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

7

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
8

Thanks a lot @mawa and @Evgeni_Popov.