Log utility to identify unoptimised assets

Tutorials and tips
1

Hey Babylon Forum,

Whilst the inspector is excellent for looking at texture sizes and mesh vertex count, it can be a little tedious to click through every object in the hierarchy and view its size/vertex count.

Here’s a function that traverses the scene and outputs info about meshes and textures. I added a little colour to highlight assets that I felt needed further attention:

logMeshAndTextureInfo() {
    this.scene.meshes.forEach(mesh => {
      const countColour = mesh.getTotalVertices() > 30000 ? "color:red" : "color:default";
      console.log(`Mesh: ${mesh.name}, VertexCount: %c${mesh.getTotalVertices()}`, countColour);
    });

    this.scene.textures.forEach(texture => {
      const size = texture.getSize();
      const widthColour = size.width > 1024 ? "color:red" : "color:default";
      const heightColour = size.height > 1024 ? "color:red" : "color:default";
      console.log(`Texture: ${texture.name.substring(0, 70)}, Width: %c${size.width}, %cHeight: ${size.height}`, widthColour, heightColour);
    });
}

Console.log output:
image

image
image926×165 10.1 KB

5 Likes
2

Thanks!!!

3

Nice! Just FYI we have the performance profiler too, but it opens on a popup window: The Performance Profiler | Babylon.js Documentation (babylonjs.com) :smiley:

2 Likes
4

Thanks! Cannot wait to use this :slight_smile: