[TOOL] Mipmapping

Hi. I prepared simple script components that can help you to understand if resolution of your textures is too high.

Playcanvas project: PlayCanvas 3D HTML5 Game Engine
Github: GitHub - querielo/playcanvas-mipmap

The repo contains the next Typescript ScriptComponents for Playcanvas:

  • mipmap. It is used to visualize pixel mipmap levels with colors. Color of pixel shows the mipmap level of the texture.

Level 0: Red
Level 1: Orange
Level 2: Yellow
Level 3: Green
Level 4: Blue
Level 5: Indigo
Level 6: Violet
Level 7: Black
Level 8: White
Level 9: Pink
Level 10: Brown
Level 11: Gray
Level 12: Purple
Level 13: Teal


The component provides a way to monitor the mipmap levels of textures in real-time and helps to understand how textures are downscaled to improve performance.

A mipmap is a set of lower resolution versions of a texture that are used to improve rendering performance by reducing the number of pixels that need to be processed.

It is important to keep the texture resolution as small as possible because larger textures consume more video memory, which can cause performance issues, especially on lower-end hardware. Additionally, using smaller textures can result in faster load times and improved rendering performance, as the GPU has to process fewer pixels. Mipmaps can also help reduce aliasing artifacts and improve image quality by providing smoothly downscaled versions of the original texture.

The repo is based on the Playcanvas TypeScript Template. I highly recommend you to check it out.

Playcanvas Typescript Template:

The model of Khachkar was taken from here: Khachkars - Lake Sevan, Armenia - Download Free 3D model by Azad Balabanian (@azadbal) [da4d17f] - Sketchfab


fantastic stuff!

What do the colors represent/what should users be aiming for when possible in terms of impact to performance?

Oh, yes. If you don’t see the red color on your target device (Level 0), it means that the resolution of your textures is too high. This is because you are seeing the second, third, or subsequent levels of the mipmap. The resolution can be reduced without significantly affecting quality (less memory usage, network, GPU uploading time and so on).

For example, if you see everywhere the yellow color (Level 2) or the subsequent colors ( Level 3+), then you can downscale texture at least 4 times.

In the demo we have an 8k texture :slight_smile:

The colors also can help to keep the same texel density for different models on your scene.


So red is good in this case? :sweat_smile:

Hm. Yes. I can’t explain that :joy:

1 Like