OpenGL ES入门-02

本节的目的是画一个三角形


三角形.png

写在最前

在iOS中使用OpenGL ES2.0画图主要有两种方法:

  • GLKViewController 和 GLKView
  • CAEAGLLayer + EAGLContext
    第一种方法比较要求比较简单,主要调用系统提供的API就可以画图; 第二种方法需要自己写顶点着色器和片元着色器程序,对开发者有一定的基础要求。本节内容使用 GLKViewController 和 GLKView来实现。

前期准备

  1. iOS中控制器主要是继承UIViewController,在OpenGL ES中我们使用的是GLKViewController。


    继承GLKViewController.png
  2. OC中视图主要是继承UIView, 在OpenGL ES中我们使用的是GLKView, 我们将MainStoryBoard的类改为GLKView。


    继承GLKView.png
  3. 由于OpenGL是跨平台的,所以我们每次使用前都需要设置使用环境和图像显示的窗口。
    // 1. OpenGL 环境
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    // 2. OpenGL 窗口
    GLKView *opglView = (GLKView*)self.view;
    
    opglView.context = context;
    opglView.drawableColorFormat = GLKViewDrawableColorFormatRGB565;
    
    [EAGLContext setCurrentContext:context];
  1. OpenGL ES是将三维坐标转换为屏幕上的二维像素,所以我们需要准备一个顶点数据组。
static GLfloat vertex[] = {
        0,0.5,0,
        0.5,0,0,
        -0.5,0,0,
    };
  1. 有了数据之后,如何将数据从CPU拷贝到GPU中,以及GPU如何去读取这些数据,这时需要启用顶点属性。
GLuint buffer;
    glGenBuffers(1, // 指定要生成的缓存标示符的数量
                 &buffer); // 缓存标示符的地址
    glBindBuffer(GL_ARRAY_BUFFER, //绑定什么类型的缓存,顶点属性数组
                 buffer); // 需要绑定的缓存标示符,标示为0表示满意缓存
    glBufferData(GL_ARRAY_BUFFER, // 初始化缓存信息
                 sizeof(vertex), // 缓存需要拷贝的大小
                 vertex, // 需要拷贝的数据
                 GL_STATIC_DRAW); // 放到GPU内存中,申明存放的类型。
    
    // 启用顶点数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    // 告诉ES顶点数据在哪里,以及如何解释每个顶点保存的数据
    glVertexAttribPointer(GLKVertexAttribPosition, // 顶点数据
                          3, // 每个顶点包含3个数据
                          GL_FLOAT, // 顶点数据类型
                          GL_FALSE, // 固定数据。 是否归一化
                          sizeof(GLfloat) *3, // 步幅:每个顶点数据之间的跨度,取每个顶点数据所占的字节大小
                          NULL); // 告诉ES从当前绑定的顶点缓存的开始位置访问顶点数据
  1. 有顶点数据后我们还需要一个着色器才能开始画图。
// 5. 着色器
    GLKBaseEffect *baseEffect = [[GLKBaseEffect alloc] init];
    baseEffect.useConstantColor = GL_TRUE;
    baseEffect.constantColor = GLKVector4Make(1, 0, 0, 1); // 设置片元着色器的颜色的,为红色
  1. 开始画三角形。
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // 6. 开始画三角形
    //准备画图
    [self.effect prepareToDraw];
    // 绘制三角形
    glDrawArrays(GL_TRIANGLES, // 渲染顶点数据类型
                 0, // 第一个需要渲染的顶点位置
                 3); // 渲染的顶点数量
}

我将代码放在gitHub, 有需要的可以看看。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容