[jimmyzhouj 翻译]  Nehe iOS OpenGL ES 2.0教程

使用OpenGL将几何图形(geometry)绘制到屏幕上需要完成几个步骤。首先我们需要告诉OpenGL绘制什么几何图形。通常是一系列的三角形，每个三角形用三个顶点来指定。OpenGL为每个顶点调用顶点着色器(vertex shader)，它可以通过旋转和移动来执行几何变换，或者是简单的光照(lighting)。得到的平面被光栅化(rasterized)，意思是OpenGL会计算出被各平面覆盖的所有像素点。对每一个被覆盖的像素点，OpenGL会调用片段着色器(fragment shader,如果我们使用多重抽样,每个像素会运行不止一次，所以总的来说这是片段而不是像素)。片段着色器的任务是根据颜色，光照来决定片段的颜色，或者是将图像映射到几何图形上。

几何图形可以被指定为几种几何图元：GL_POINT, GL_LINES或者GL_TRIANGLES，其中直线和三角形都有一些变体，可以绘制chain的或者strip的。所有这些几何图元都是由一组顶点组成的。一个顶点是三维空间的一个点，参照坐标系是x轴指向正右方，y轴指向正上方，z轴垂直于屏幕指向读者。

1. //create a triangle
2. std::vector<float> geometryData;
3. //4 floats define one vertex (x, y, z and w), first one is lower left
4. geometryData.push_back(-0.5); geometryData.push_back(-0.5); geometryData.push_back(0.0); geometryData.push_back(1.0);
5. //we go counter clockwise, so lower right vertex next
6. geometryData.push_back( 0.5); geometryData.push_back(-0.5); geometryData.push_back(0.0); geometryData.push_back(1.0);
7. //top vertex is last
8. geometryData.push_back( 0.0); geometryData.push_back( 0.5); geometryData.push_back(0.0); geometryData.push_back(1.0);

1. //generate an ID for our geometry buffer in the video memory and make it the active one
2. glGenBuffers(1, &m_geometryBuffer);
3. glBindBuffer(GL_ARRAY_BUFFER, m_geometryBuffer);
4. //send the data to the video memory
5. glBufferData(GL_ARRAY_BUFFER, geometryData.size() * sizeof(float), &geometryData[0], GL_STATIC_DRAW);

1. //create a color buffer, to make our triangle look pretty
2. std::vector<float> colorData;
3. //3 floats define one color value (red, green and blue) with 0 no intensity and 1 full intensity
4. //each color triplet is assigned to the vertex at the same position in the buffer, so first color -> first vertex
5. //first vertex is red
6. colorData.push_back(1.0); colorData.push_back(0.0); colorData.push_back(0.0);
7. //lower right vertex is green
8. colorData.push_back(0.0); colorData.push_back(1.0); colorData.push_back(0.0);
9. //top vertex is blue
10. colorData.push_back(0.0); colorData.push_back(0.0); colorData.push_back(1.0);
11. //generate an ID for the color buffer in the video memory and make it the active one
12. glGenBuffers(1, &m_colorBuffer);
13. glBindBuffer(GL_ARRAY_BUFFER, m_colorBuffer);
14. //send the data to the video memory
15. glBufferData(GL_ARRAY_BUFFER, colorData.size() * sizeof(float), &colorData[0], GL_STATIC_DRAW);

1. //load our shader
2. m_shader = new Shader("shader.vert", "shader.frag");
3. if(!m_shader->compileAndLink())
4. {
5. NSLog(@"Encountered problems when loading shader, application will crash...");
6. }
7. //tell OpenGL to use this shader for all coming rendering
8. glUseProgram(m_shader->getProgram());

1. //get the attachment points for the attributes position and color
2. m_positionLocation = glGetAttribLocation(m_shader->getProgram(), "position");
3. m_colorLocation = glGetAttribLocation(m_shader->getProgram(), "color");
4. //check that the locations are valid, negative value means invalid
5. if(m_positionLocation < 0 || m_colorLocation < 0)
6. {
7. NSLog(@"Could not query attribute locations");
8. }
9. //enable these attributes
10. glEnableVertexAttribArray(m_positionLocation);
11. glEnableVertexAttribArray(m_colorLocation);

1. //bind the geometry VBO
2. glBindBuffer(GL_ARRAY_BUFFER, m_geometryBuffer);
3. //point the position attribute to this buffer, being tuples of 4 floats for each vertex
4. glVertexAttribPointer(m_positionLocation, 4, GL_FLOAT, GL_FALSE, 0, NULL);

1. //bint the color VBO
2. glBindBuffer(GL_ARRAY_BUFFER, m_colorBuffer);
3. //this attribute is only 3 floats per vertex
4. glVertexAttribPointer(m_colorLocation, 3, GL_FLOAT, GL_FALSE, 0, NULL);

1. //initiate the drawing process, we want a triangle, start at index 0 and draw 3 vertices
2. glDrawArrays(GL_TRIANGLES, 0, 3);

函数glDrawArrays需要三个参数：我们要画的图元(可以是GL_POINTS,GL_LINE_STRIP,GL_LINE_LOOP, GL_LINES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, GL_TRIANGLES之一)，离缓冲区首个元素的偏移量，和需要画多少个顶点。

OpenGL Shading Language

1. //the incoming vertex' position
2. attribute vec4 position;
3. //and its color
4. attribute vec3 color;

1. //the varying statement tells the shader pipeline that this variable
2. //has to be passed on to the next stage (so the fragment shader)
3. varying lowp vec3 colorVarying;

1. //the shader entry point is the main method
2. void main()
3. {
4. colorVarying = color; //save the color for the fragment shader
5. gl_Position = position; //copy the position
6. }

1. //incoming values from the vertex shader stage.
2. //if the vertices of a primitive have different values, they are interpolated!
3. varying lowp vec3 colorVarying;
4. void main()
5. {
6. //create a vec4 from the vec3 by padding a 1.0 for alpha
7. //and assign that color to be this fragment's color
8. gl_FragColor = vec4(colorVarying, 1.0);
9. }