Hi. I prepared simple script components that can help you to understand if your scenes have massive pixel overdraw.
Playcanvas Project: PlayCanvas 3D HTML5 Game Engine
Github: GitHub - querielo/playcanvas-overdraw
Playcanvas Typescript Template:
- Forum topic: PlayCanvas TypeScript template (branch sync, GitHub actions and so on)
- Github: GitHub - querielo/playcanvas-typescript-template
Summary
Pixel overdraw refers to the number of times a pixel is drawn on top of itself. Keeping pixel overdraw as low as possible is important for several reasons:
- Performance: Overdraw can greatly slow down the performance of a game or application, as it requires the GPU to do more work.
- Battery life: Overdraw can also have a significant impact on battery life, as it requires more power to draw more pixels.
- Quality: Overdraw can also lead to visual artifacts, such as flickering or aliasing, which can negatively impact the visual quality of the game or application.
To reduce pixel overdraw, it is important to make sure that objects in the scene are properly sorted, and that objects that are obscured by others are not drawn. Additionally, techniques such as culling and occlusion can be used to further reduce the number of pixels that need to be drawn.
NOTE: reducing overdraw can help only if fragment shaders are your bottleneck. So, always use the Playcanvas profiler for your project before optimizations.
Example:
With enabled UI:
TODO: It appears that it is necessary to consider the issue of baking text into a texture, if it isn’t changed for a long period of time. Because, black means that the pixel has been overdrawn at least 9 times.