OpenGLES入门 3 -- 绘制圆形

步骤

1、初始化上下文;
2、设置缓冲区
3、设置着色器
4、确定顶点坐标，绘制

1、初始化

_eaglContext =[[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:_eaglContext];

_glLayer = (CAEAGLLayer*) self.layer;
// CALayer 默认是透明的，必须将它设为不透明才能让其可见
_glLayer.opaque = YES;
// 设置描绘属性，在这里设置不维持渲染内容以及颜色格式为 RGBA8
_glLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
                                     [NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];

kEAGLColorFormatRGBA8:使用8位来保存RGBA的值;
kEAGLDrawablePropertyRetainedBacking:设置NO不保留之前绘制的图像以用来重用;

2、绑定渲染缓冲及帧缓冲区

glGenRenderbuffers(1, &_colorRenderBuffer);
glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
[_eaglContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:_glLayer];
    
glGenFramebuffers(1,&_frameBuffer);
glBindFramebuffer(GL_FRAMEBUFFER,_frameBuffer);
glFramebufferRenderbuffer(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _frameBuffer);

渲染缓存:存储绘制结果的缓冲区
帧缓存:接收渲染结果的缓冲区，为GPU指定存储渲染结果的区域。

3、设置着色器

//shader
GLuint vertext  =[self compileWithShaderName:@"Vertex" shaderType:GL_VERTEX_SHADER];
GLuint fragment =[self compileWithShaderName:@"Fragment" shaderType:GL_FRAGMENT_SHADER];
    
_glProgram =glCreateProgram();
glAttachShader(_glProgram, vertext);
glAttachShader(_glProgram, fragment);

//操作产生最后的可执行程序，它包含最后可以在硬件上执行的硬件指令。
glLinkProgram(_glProgram);
    
GLint linkSuccess = GL_TRUE;
glGetProgramiv(_glProgram, GL_LINK_STATUS,&linkSuccess);
if (linkSuccess ==GL_FALSE) {
     GLchar glMessage[256];
     glGetProgramInfoLog(_glProgram, sizeof(glMessage), 0, &glMessage[0]);
     NSString *messageString = [NSString stringWithUTF8String:glMessage];
     NSLog(@"program error %@", messageString);
     exit(1);
}
    
//绑定着色器参数
glUseProgram(_glProgram);
_glPosition = glGetAttribLocation(_glProgram,"Position");

-(GLuint)compileWithShaderName:(NSString*)name shaderType:(GLenum)shaderType
{
    //获取着色器文件
    NSString *shaderPath =[[NSBundle mainBundle]pathForResource:name ofType:@"glsl"];
    NSError *error;
    NSString *strShader =[NSString stringWithContentsOfFile:shaderPath encoding:NSUTF8StringEncoding error:&error];
    NSLog(@"strShader %@",strShader);
    if (!strShader) {
        NSLog(@"shader error %@",error.localizedDescription);
        exit(1);
    }
    
    // 2 创建一个代表shader的OpenGL对象, 指定vertex或fragment shader
    GLuint shaderHandler = glCreateShader(shaderType);
    
    // 3 获取shader的source
    const char* shaderString = [strShader UTF8String];
    int shaderStringLength = (int)[strShader length];
    glShaderSource(shaderHandler, 1, &shaderString, &shaderStringLength);
    
    // 4 编译shader
    glCompileShader(shaderHandler);
    
    // 5 查询shader对象的信息
    GLint compileSuccess;
    glGetShaderiv(shaderHandler, GL_COMPILE_STATUS, &compileSuccess);
    if (compileSuccess == GL_FALSE) {
        GLchar messages[256];
        glGetShaderInfoLog(shaderHandler, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"%@", messageString);
        exit(1);
    }
    return shaderHandler;
}

着色器: 分为Vertex Shader 和Fragment Shader

• 顶点着色器(Vertex Shader):用于确定图形形状

attribute vec3 position;
attribute vec3 color;

varying vec3 outColor;

void main()
{
    gl_Position = vec4(position, 1.0);
    outColor = color;
}

• 片段着色器(Fragment Shader):用于确定图像绘制渲染的颜色

precision mediump float;

varying vec3 outColor;

void main()
{
    gl_FragColor = vec4(outColor, 1.0);
}

这里推荐一个介绍GLSL语言的博客，讲的还是比较详细的

4、渲染绘制

• 确定顶点(构成绘制区域的连接点)

圆顶点主要运用圆弧的计算公式获得，已知圆心坐标(a,b)，半径为r
x=a+r * cosθ
y=b+r * sinθ

typedef struct {
    GLfloat x,y,z;
    GLfloat r,g,b;
} Vertex;

int  segCount = 10000; // 分割份数
Vertex *vertext = (Vertex *)malloc(sizeof(Vertex) * segCount);
memset(vertext, 0x00, sizeof(Vertex) * segCount);
    
float a = 0.8; // 水平方向的半径
float b = a * self.frame.size.width / self.frame.size.height;
    
float delta = 2.0*M_PI/segCount;
for (int i = 0; i < segCount; i++) {
      GLfloat x = a * cos(delta * i);
      GLfloat y = b * sin(delta * i);
      GLfloat z = 0.0;
      vertext[i] = (Vertex){x, y, z, x, y, x+y};
      printf("%f , %f\n", x, y);
}

• 绘制

//清屏
glClearColor(1.0, 1.0, 1.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
glLineWidth(2.0);
    
//设置绘制区域
glViewport(0,0,self.frame.size.width,self.frame.size.height);

/**
  *void glVertexAttribPointer(GLuint index,GLint size,GLenum type,GLboolean normalized,GLsizei
  *                            stride,const void *ptr)
  *     index: 着色器脚本对应变量ID
  *     size : 此类型数据的个数
  *     type : 此类型的sizeof值
  *     normalized : 是否对非float类型数据转化到float时候进行归一化处理
  *     stride : 此类型数据在数组中的重复间隔宽度，byte类型计数
  *     ptr    : 数据指针， 这个值受到VBO的影响
  */
glEnableVertexAttribArray(glGetAttribLocation(_glProgram, "position"));
glVertexAttribPointer(glGetAttribLocation(_glProgram, "position"), 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), vertext);
    
glEnableVertexAttribArray(glGetAttribLocation(_glProgram, "color"));
glVertexAttribPointer(glGetAttribLocation(_glProgram, "color"), 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), vertext+sizeof(GLfloat)*3);
    
glDrawArrays(GL_TRIANGLE_FAN, 0, segCount);
    
//将指定 renderbuffer 呈现在屏幕上，在这里我们指定的是前面已经绑定为当前 renderbuffer 的那个，在 renderbuffer 可以被呈现之前，必须调用renderbufferStorage:fromDrawable: 为之分配存储空间。
[_eaglContext presentRenderbuffer:GL_RENDERBUFFER];
    
free(vertext);
vertext = NULL;

效果如下:

效果图.png

具体代码详见OpenGLES