OpenGL ES into the first -OpenGL ES exploration

OpenGL ES introduction

OpenGL ES (OpenGL for Embedded Systems) is an advanced 3D graphics application programming interface (API) for handheld and Embedded Systems. OpenGL ES is the dominant graphics API in smart phones at present. iOS, Andriod , BlackBerry ,bada ,Linux ,Windows.

On the other hand, as iOS developers we certainly have to look at the official Apple documentation for OpenGL ES.

The Open Graphics Library (OpenGL) is used for visualizing 2D and 3D data. It is a multipurpose open- standard graphics library that supports applications for 2D and 3D digital content creation, mechanical and architectural design, virtual prototyping, flight simulation, video games, and more. You use OpenGL to configure a 3D graphics pipeline and submit data to it. Vertices are transformed and lit, assembled into primitives, and rasterized to create a 2D image. OpenGL is designed to translate function calls into graphics commands that can be sent to underlying graphics hardware. Because this underlying hardware is dedicated to processing graphics commands, OpenGL drawing is typically very fast. OpenGL for Embedded Systems (OpenGL ES) is a simplified version of OpenGL that eliminates redundant functionality to provide a library that is both easier to learn and easier to implement in mobile graphics hardware

Open Graphics Library (OpenGL) for visualization of 2d and 3D data. It is a versatile open standard graphics library that supports 2D and 3D digital content creation, mechanical and architectural design, virtual prototyping, flight simulation, video games and other applications. You can use OpenGL to configure and submit data to a 3D graphics pipeline. Vertices are transformed and lit, grouped into primitives, and rasterized to create 2D images. OpenGL aims to convert function calls into graphical commands that can be sent to the underlying graphics hardware. Because this underlying hardware is dedicated to processing graphics commands, OpenGL drawing is typically very fast.

OpenGL for Embedded Systems(OpenGL ES) is a simplified version of OpenGL that eliminates redundancy and provides a library that is both easy to learn and easier to implement in mobile graphics hardware.

Since OpenGL ES is a simplified version of OpenGL, it is necessary to understand the basic knowledge of OpenGL before learning OpenGL ES. Therefore, it is recommended that you first read the previous article on OpenGL.

OpenGL ES rendering process analysis

As shown above, the entire rendering process should be

1. Graph metadata (vertex coordinates, texture coordinates, transformation matrices, and so on) and image data (textures) are passed to the vertex shader through channels like Attribute or Uniform via the client
2. Vertex shaders make various transformations using the passed vertex coordinates and transformation matrix to generate the final vertex position, and if there is light, can also generate per-vertex light color through the light calculation formula
3. Note that the vertex shader does not immediately enter the pixel shader, but first goes through the pixel assembly; At this stage, clipping, perspective segmentation, and Viewport transformation are performed. And then it goes through rasterization to the chip shader
4. Rasterization is the process of converting primions into a set of two-dimensional fragments. These transformed fragments are processed by the slice shader. These two-dimensional fragments are the pixels that can be drawn on the screen. The task of the pixel shader is to fill these pixels with color, which can be the color passed in through the attribute channel, or the texture element extracted from the texture image (the texture color corresponding to a texture coordinate). It can also be a self-calculated color (mix, etc.)
5. Finally, the frame buffer is reached for transparency, templating, depth testing, blending, and so on. Note that blending here is a bit different from blending in the fragment shader, in that it combines the newly generated fragment color with the corresponding color value stored in the frame cache.

   
   

EGL and EAGL

The OpenGL ES command requires a rendering context and a drawing surface to complete the drawing of a graphic image. Rendering context is used to store the state of OpenGL ES. Draw surface is the surface used to draw primitives, specifying the type of cache required for rendering, such as color buffer depth buffer and template buffer.

However, OpenGL ES does not provide an API for how to create a rendering context or how the context is connected to the native windowed system. EGL is the interface between Khronos rendering apis (such as OpenGL ES) and the native window system. Because each window-system has a different definition, EGL provides a basic opaque type, EGLDisplay, that encapsulates all system dependencies and interfaces to native window-systems. But our iOS platform is the only one that supports OpenGL ES but not EGL. Apple provides its own implementation of the EGL API, called EAGL.

Because OpenGL ES is a C-based API, it is very convenient and widely supported. As a C API, it integrates seamlessly with Objective-C Cocoa Touch applications. However, the OpenGL ES specification does not define a window layer; Instead, the managed operating system must provide functions to create an OpenGL ES rendering context that receives commands and a frame buffer to write the results of any drawing commands. So using OpenGL ES on iOS requires using the iOS class to set up and render the drawing surface, and using the corresponding API on the platform to render its content.

EAGLContext 

EAGLContext is apple’s own rendering context for OpenGL, which manages the state information, commands, resources, and so on needed to render graphics using OpenGL. In IOS applications, each thread maintains a current context. When an application calls Opengl ES ‘API, the context of the thread is changed by that API (changing its managed state, commands, resources, and so on).

You can set the currentContext by calling the setCurrentContext: method of the EAGLContext class. You can also get the currentContext of a thread by calling the currentContext method of the EAGLContext class. In addition, you can choose which version of the Opengl ES API to use when creating and initializing the EAGLContext object. To create an Opengl ES 3.0 context, initialize it as follows:

EAGLContext* myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
Copy the code

If the device does not support the OpenGL ES API that you set the lock to, the initWithAPI: method will return nil. To support multiple versions of the OpenGL ES API, you should first try to initialize the render context to the latest version. If the object returned is nil, the context of the old version is initialized. Such as:

EAGLContext* CreateBestEAGLContext()
{
   EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
   if (context == nil) {
      context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
   }
   return context;
}
Copy the code

The API properties of the context indicate the version of OpenGL ES supported by the context. We should first test the API properties of the context and then use it to select the correct render path. A common pattern for implementing this behavior is to create a class for each render path. The application tests the context and creates the renderer once during initialization.

EAGLSharegroup

Although the EAGLContext manages the state of OpenGL, the state of OpenGL is not managed directly by the EAGLContext, but by the EAGLContext. In other words, the state of OpenGL ES is created and maintained by EAGLSharegroup objects; Each EAGLContext contains an EAGLSharegroup object, which delegates OpenGL state maintenance to the EAGLSharegroup. The relationship of 3 is shown as follows:

We all know that resources are scarce on mobile, and creating backups of the same content in multiple contexts is a luxury; The graphical resources of the device can be better utilized if common resources are shared. This is where EAGLSharegroup becomes very useful. When multiple contexts are associated with the same EAGLSharegroup, Opengl ES objects created by any context are available in all contexts. Note: All contexts that share the same shared group must use the same version of the Opengl ES API to initialize the context

When a shared group is shared by multiple contexts, it is incumbent on us to manage changes in Opengl ES object state. Here are the rules:

1. While an application may be accessing an object from multiple contexts, make sure that the object is not being changed simultaneously.
2. When an object is to be changed by a command issued to the context, the object cannot be read or changed by another context.
3. When an object is changed, all contexts of the bound object must be able to see the changes. If a context refers to it before binding, the contents of the object are undefined

GLKit framework Overview

The GLKit framework is designed to simplify application development based on OpenGL/OpenGL ES. Its appearance accelerated the development of OpenGL/OpenGL ES applications. GLKit uses math libraries, background texture loading, pre-created shader effects, and standard views and view controllers to implement the rendering loop.

GLKit basic process of rendering graphics

When using GLKit to render graphics, we first need to create a GLKView as the drawing surface, and at the same time set its basic parameters related to OpenGL ES, such as the configuration of the render cache format, etc. Then we need to call GLKit related API as required to set relevant graphics parameters (such as color, texture, vertex coordinates, etc.) to complete the relevant rendering, and finally render the results on the phone screen. The text description may be a little abstract, as shown below:

A frameBuffer is a two-dimensional array of pixels. Each memory cell corresponds to a single pixel on the screen. The entire frameBuffer corresponds to a single image, the current screen image. Frame buffering usually includes: color buffering, depth buffering, template buffering and cumulative buffering. These buffers may be in a memory area, or they may be separate, depending on the hardware. Pixel data (called slices) must pass a series of tests before it can be written to the frame buffer. If the slice fails one of these tests, no further tests or operations are performed. These test or operation processes are: start (slice)- cropping test -alpha test – template test – Depth test – mix – jitter – logical operation – end (write frame buffer), this series of operations are for the output of the slice shader (slice), so it is also called slice by slice operation.

The frame buffer can be simply understood as a place to store the drawing results; After understanding what frame buffer is, it is not difficult to understand the above figure. First, we need to set the format of frame buffer, including color buffer, depth buffer and so on. Different formats may draw different visual effects of graphics. Secondly, you can use code to implement the drawing operation, drawing results will be temporarily stored in the frame buffer; Finally, after an image is drawn, it can be presented on the device screen.

GLKit API introduction

Here we only introduce some common classes and APIS, basic can meet you more than 90% of the development tasks, for a few relatively unpopular API is relatively small, we have relevant requirements to look at the relevant API bar

1. GLKTextureInfo OpenGL texture information abstraction, which encapsulates various texture-related information

           
name
: Texture name in OpenGL context;



          
 target
: the target of the texture binding (indicating that the texture is multi-dimensional)



           
height
: Height of texture



           
width
: Height of texture



           
textureOrigin:
The position of the texture origin



            alphaState
: State of alpha component in texture



            containsMipmaps: Boolean value, whether the texture contains an MIP map
 

2. GLKTextureLoader is a texture loading utility that simplifies loading textures from various resource files

- (EAGLContext *)bestCreateEAGLContext
{
    EAGLContext *temContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    if(! temContext) { temContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2]; }return temContext;
}
- (void)setupConfig 
{
    context = [self bestCreateEAGLContext];
    [EAGLContext setCurrentContext:context]; GLKView *temView = [[GLKView alloc] initWithFrame:self.view.bounds context:context]; temView.delegate = self; GlClearColor (1.0 f, f, 1.0 1.0 f, 1.0 f); [self.view addSubview:temView]; }Copy the code

temView.drawableDepthFormat = GLKViewDrawableDepthFormat16;
temView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;Copy the code

- (void)setupVertexData
{    
    GLfloatVertexData [] = {0.5 f to 0.5 f to 0.0 f to 1.0 f to 0.0 f to 0.5 f to 0.5 f to 0.0 f to 1.0 f to 1.0 f to 0.5 f to 0.5 f to 0.0 f to 0.0 f to 1.0 f to 0.5 f to 0.5 f to 0.0 f, 0.0 f, f, 1.0-0.5 f to 0.5 f to 0.0 f to 0.0 f to 0.0 f to 0.5 f to 0.5 f to 0.0 f to 1.0 f to 0.0 f,}; GLuint bufferId; glGenBuffers(1, &bufferId); glBindBuffer(GL_ARRAY_BUFFER, bufferId); glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW); glEnableVertexAttribArray(GLKVertexAttribPosition); glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GL_FLOAT) * 5, (GLfloat *)NULL + 3);
}Copy the code

-(void)setUpTexture {//1. Get texture image path NSString *filePath = [[NSBundle mainBundle]pathForResource:@"bui" ofType:@"jpg"]; // The origin of the texture coordinates is the lower left corner, but the image shows that the origin should be the upper left corner. NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil]; GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil]; CEffect = [[GLKBaseEffect alloc]init]; GLKBaseEffect alloc = [GLKBaseEffect alloc]init]; cEffect.texture2d0.enabled = GL_TRUE; cEffect.texture2d0.name = textureInfo.name; }Copy the code

-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect 
{
    glClear(GL_COLOR_BUFFER_BIT);
    [mEffect prepareToDraw];
    glDrawArrays(GL_TRIANGLES, 0, 6);
}Copy the code