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
WHY?
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:
- Forum topic: PlayCanvas TypeScript template (branch sync, GitHub actions and so on)
- Github: GitHub - querielo/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
