Render Multiple Animated Flags(or other animated decorations) on Mobile

I'm writing this in answer to a post in the Project Anarchy forum about rendering lot of animated flags but also work for any kind of group of animated decorations.

On mobile generally you want 2 things:

• to limit per frame computation.
• to limit per frame uploading of data from cpu to gpu. 
• batching to reduce draw calls.

Keep read for a list of some possible implementation based on your needs and constraints.

Static and batched implementations.

Animated Textures

A naive yet effective way to render animated flags is to rely on static mesh with animated textures.
This takes more texture space than any other solutions, but you can show beautifully prerender flags and loads of them.Splitting them you can also implement some animation offsetting between instances of the flag.

This doesn't scale well if you have many differently textured flags(variations you cannot just colorize with vertex color) as they require loads of flag prerendering and texure storage(you may use tecnniques to encode many variations and extract them in shader, but this is out of this post scope).

Static Animated per Vertex 

This technique uses predeformed mesh made in your 3d modeling software in whatever way you feel fit.

You have to find carefully a good number of poly and number of frames of animation.You don't need so many frames as they are just decorations and you maybe just doesn't use a reasonable number of poly to be able to render them on mobile in the first place.

At loading time for every batch group of flag(es all the flag of a castle) you want to generate a composite mesh using the frames you have imported merging them using a specific frame for every flag in the group.

In this step you may do almost everything to customize your final static mesh.

 things like offsetting animation frames between flags ,using different source flag models for different flags , or totally different animated decoration.(they have all to use the same shader and texture atlas and share a compatible number of frames).

You have to create a new composite mesh for every frame and decide at runtime what mesh to render at any moment.

If you used the same topology intra souce model's frames and intra composite mesh frames you can share the same index buffer between all composite mesh frames.

For flags the use of indexed triangle strips can be very optimized.

The exact vertex buffer and index buffer setup will depend on your needs so I cannot suggest a good one just a very generic one that uses one mesh for every batching group and for every frame of the group.

Repeat the same composition task for every batching group.

Dividing all flags in groups that can be visible on screen at the same time and that render using the same exact render state.

Dynamic Animated

built in animation and skinning can be used to animate and deform a bone skinned flag very efficiently(especially in multithreading enviroments).

You then may render multiple instances of this exact flag to limit the number of deformation computations and gpu uploads per frame.

You can do this also at slower frame rate (10-15 may be enough)interleaving the update of flags with other decoration things.

This let's you to simulate dynamic flag response to wind and other factors that modify the animation procedurally.

The same considerations apply to whatever kind of cpu realtime vertex deformation and uploading, both physical than procedural one.

Final words

I have not made any kind of performance measurement as I haven't implemented those techniques yet on modern mobile devices and with Project Anarchy.

I don't planned if and when I will implement those tecniques in my own project, so I could possible return on this subject with a working implementation to share.

If you come with some other interesting hint or performance measurement let me know in a comment.

Those hints are far from a real use case where you can exploit some ah hoc opportunities based on your specific needs as employing some tricks in the way you make your assets specific to your own desired results.