Welcome back followers of the fearsome!
This week we get another tech post from our very own Nick! He’ll be covering how he’s managed to get our game running super smooth and displaying tons of stuff! Take it away Nick.
This week I’ll talk about an optimization that increased the framerate significantly on older iPad and iPod touch models.
One of the main performance bottlenecks of the iPad 1 is alpha blended triangles (or pixels, really). This is mentioned in the apple documentation, and they recommend drawing opaque triangles as much as possible. We tested this, and the difference between rendering opaque and alpha blended pixels is HUGE. The PowerVR chip handles opaque triangles very nicely, effectively eliminating any overdraw. Alpha blended triangles, not so much.
In our game we draw a ton of sprites, which use large textures with alpha. On the iPad 1 we had a bit of a performance problem when we drew a lot of them, so something had to be done. The solution is simple: draw less alpha blended pixels! The way I implemented this in the engine is to attach a ‘texture polygon’ to each texture. (Texture Polygon is actually a wrong name for it, it’s more of a texture mesh). Whenever we want to draw the texture on screen, instead of drawing a quad, we draw the mesh instead.
Here’s a screenshot of our game with our alpha blended debugging shader enabled. This screenshot is the ‘before Texture Polygons’ picture. The red parts are pixels that were drawn using alphablending.
The texture polygon has opaque and transparent triangles. This allows us to batch up all opaque triangles, and all alpha triangles. We draw the opaque ones in one big batch first, and then the alpha blended ones. The cool thing is that the alpha blended triangles have a zbuffer that allows quick pixel rejection.
Here is the same location, this time with texture polygons. As you can see there’s a lot more green areas, which is good! There’s still that big red block at the bottom, but we want that part to be transparent, so there really isn’t any other way to do this but alpha blending.
To edit the texture polygons, I created a little tool that allows us to place points and add opaque and alpha blended triangles. The goal is to create a large a surface as possible using opaque triangles (so for areas where the alpha value of the texture is 1), and put skirts of alpha blended triangles around the edges to keep the nice alpha blended edges.
All in all, this technique is VERY effective. We’ve more than doubled our framerate in general, and on some screens we’ve seen a speed increase of over 400%!
Alright, that’s all for this week. The game is really coming together now! It won’t be long before you can play it for yourself!