some methods to optimized gui rendering.

I thought about gui rendering today and got some ideas. Here is a brief note (but this should be useless since ui rendering is an old topic).

Sometimes we have to render ui with 3d API such as d3d. For example, it`s hard to rendering ui with video without d3d on windows. The generic method to rendering gui is to render many "rectangle", like buttons, checkbox, combobox, etc. Each rectangle need one draw call. When there are too many controls (include text), it may call draw primitive too much times and start to affect the performance. There are some points we can try :

[1]. Sort entire gui rendering by texture. The first issue make us render rectangle one by one is : all images may not on the same texture. For controls that share the same texture we have a chance to draw many "triangle list" to reduce the draw call.

[2]. Separate gui to dynamic & static part. All controls share the same "dynamic" vertex buffer. For dynamic controls, changing vertex position to move their position. For static controls, their position is fixed. So all vertices in the buffer can sort by their state to 2 part, too. Then there is a chance to minimize the vertex update method.

[3]. All controls share the same "dynamic" index buffer. For those hided control, we can just ignore them by not applying index. Sort the index could get better performance, too.

[4]. If there is alpha controls, separate them to another pass......or everything is gone.

[5]. So now you can :

1. get a single texture with all images of controls.
2. update position of dynamic controls by update vertex buffer.
3. update visibility of controls by update index buffer.
4. collect all characters in the same texture (or less textures)
5. pray.

[6]. I am kidding... please inform me if you tried it.