GUI design guidelines

Last update: 2018-07-30 by EGE3D

shaders behind the scene

brief shaders description - the core of display

In general, shaders are programs that are written in the program, or loaded from files and compiled at runtime and sent to GPU where are executed. Them are the basis for video cards display and everything that has to be shown in GC under OpenGL must pass through shaders. For our case we have two shaders programmed. First is Vertex shader and the other is Fragment shader.
Vertex shader keeps and process all 3d model's vertices and it's relevant indices. Fragment shader keeps and process informations concerning painting the objects, in our case , it places our image frontal to viewer.

Tip:I invite you to read some more specific concerning 3d graphics, for the moment we concentrate on our gui implementation and we refer to shaders in order to give an overview of the mechanism underneath the gui.

Source code: You can DOWNLOAD source code from Github following the links on this page and looking for download. On the same page there are also some Video tutorial on YouTube sections that explanes how to download, prepare the system and compile the library and the samples for different destination platforms.

Brief shaders description - shader for the GUI

As said before, vertex shader permits models vertices to be drawn onto the screen. Models are composed of vertices and vertices are joined by triangles. This is the common way a graphic engine handles vertices. Here is a description on how Poligonal Meshes are constructed. Vertices are described as an array of xyz coordinates and triangles are composed by a list of indices that as triplets describes the index to be joined and in wich order to create an oriented triangle. There are different ways to handle indices in OpenGL but we focus on our only.
The idea is to make a flat sheet located in front of the user using maximum window extensions. Over this sheet then, with fragment shader we want to go to put out texture image to display.
To do this we have created an array with four vertices that corresponds to the vertices of out imaginary sheet and another list of six indices wich describe the order of the indices to create two adiacenti triangles forming a displayable surface.
vertex shader
In our code, in EGE3dGraphicContext are declared "GLfloat vertices[]" as an array of four vertices(position of V0 to position of V3) for our ideal frame sheet and relevant indices as "elements[0,3,2]" for second triangle definition, "elements[0,2,1]" for first triangle definition as array of indices of vertices to join.
I want to draw your attention to the indices in elements array that have an orientation to dispose the triangles front faces to the viewer following OpenGL right hand rules. There is then the definition of vertex and fragment shaders programs sources. As you can see in vertex shader there is only one line of code that brings just x and y cordinates of the sheed (forcing z to zero) and 1.0 at the and that means vertex full visible.(zero means hided).
Fragment shader also execute just one instruction that is to place a texture over the extensions of our imaginary sheet. As much as simple as possible.
"::OpenGLES2Initialize()" makes a lot of stuff but mainly it compiles the shaders and make them available in the GPU till the end of the program.
While program executed the "::beginRendering()" method clear the graphic context before new "draw()" and "::executeRendering(fbo)" makes the "glDrawElements();" call to actually act refresh.


Just before we have described how to play with OpenGL shaders. The arguments are huge.
We suggest to look into the code yourself and we suggest to keep as reference "OpenGL ES 2.0 Programming Guide from Addison Wesley" as basis.