iOS development-opengl es Getting Started Tutorial 1

http://www.jianshu.com/p/750fde1d8b6a

Here is a tutorial for beginners, the environment is xcode7+opengl ES 2.0, the goal is to write an OpenGL es hello world .
OpenGL ES Series tutorials are here.
Code address for OpenGL ES series Tutorials

your star and fork are my source of power, and your opinion can make me go farther .

Core Ideas

By Glkit, it is possible to simply draw a picture to the screen.

Effect Show
Specific details 1, new OpenGL ES context

- (void)setupConfig {    //新建OpenGLES 上下文    self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2]; //2.0，还有1.0和3.0    GLKView* view = (GLKView *)self.view; //storyboard记得添加    view.context = self.mContext;    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;  //颜色缓冲区格式    [EAGLContext setCurrentContext:self.mContext];}

GLKView* view = (GLKView *)self.view;It is necessary to set the view class to Glkview in storyboard, and the other code is the creation of the OpenGL ES context.

2. Vertex arrays and indexed arrays

//顶点数据，前三个是顶点坐标，后面两个是纹理坐标    GLfloat squareVertexData[] =    {        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下        0.5, 0.5, -0.0f,    1.0f, 1.0f, //右上        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上        0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下        -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上        -0.5, -0.5, 0.0f,   0.0f, 0.0f, //左下    };

Vertex arrays include vertex coordinates, Opengles's world coordinate system is [-1, 1], so points (0, 0) are in the middle of the screen.
The value range of the texture coordinate system is [0, 1], and the origin is in the lower left corner. So point (0, 0) in the lower left corner, point (1, 1) in the upper right corner.
The index array is the index of the vertex array, and the squarevertexdata array is treated as 4 vertices, each vertex has 5 glfloat data, and the index starts at 0.

3. Vertex data cache

    //顶点数据缓存    GLuint buffer;    glGenBuffers(1, &buffer);    glBindBuffer(GL_ARRAY_BUFFER, buffer);    glBufferData(GL_ARRAY_BUFFER, sizeof(squareVertexData), squareVertexData, 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(GLfloat) * 5, (GLfloat *)NULL + 3);

This is the core of this chapter.

• Glgenbuffers Request an identifier
• Glbindbuffer bind the identifier to the GL_ARRAY_BUFFER upper
• Glbufferdata copying vertex data from CPU memory to GPU memory
• Glenablevertexattribarray is to open the corresponding vertex property
• Glvertexattribpointer set the appropriate format to read data from buffer

4. Texture Map

- (void)uploadTexture {    //纹理贴图    NSString* filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"jpg"];    NSDictionary* options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];//GLKTextureLoaderOriginBottomLeft 纹理坐标系是相反的    GLKTextureInfo* textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];    //着色器    self.mEffect = [[GLKBaseEffect alloc] init];    self.mEffect.texture2d0.enabled = GL_TRUE;    self.mEffect.texture2d0.name = textureInfo.name;}

• Glktextureloader reading pictures, creating textures glktextureinfo
• Create shader Glkbaseeffect, assign textures to shaders

Basis

The code with a lot of comments, Baidu under the corresponding concept, there will be more explanations.
If you are interested in Openggl es, but have no graphical basis, you can take a look at the Learnopengl tutorial.

Study Questions

• 1, the code has 6 vertex coordinates, can you use fewer vertices to display an image?
• 2, vertex cache array can not glbufferdata, how to implement?
• 3, if this figure into the left and right two symmetrical panda, how to change?

You can download the demo code here.

Study questions Answer

Study Questions 1:
You can use four vertices, 2 of the 6 vertices that draw 2 triangles are duplicated, and using an index can reduce repetition.

Study Questions 2:
The vertex cache array can be implemented without glbufferdata. Vertex arrays can be placed in the cache via Glbufferdata, or directly from the CPU to the GPU directly through the Glvertexattribpointer last parameter. Difference: the vertex cache inside the glbufferdata can be reused, and the glvertexattribpointer will send the vertex array from the CPU to the GPU each time, impacting performance.

Study Questions 3:
How do you change this figure into two symmetrical pandas? Cut the screen into 4 triangles, two triangles on the left, and the X-values of the texture coordinates of the two triangles on the right.

Falling Shadow Loyinglin
Links: http://www.jianshu.com/p/750fde1d8b6a
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

iOS development-opengl es Getting Started Tutorial 1