初识 OpenGL

OpenGL, 全称 Open Graphics Library, 即开放式图形库, 是行业领域中最为广泛接纳的 2D/3D 图形 API.

作为一名 iOS 开发人员, 学习 OpenGL 知识后, 可以从事的行业主要有地图底层渲染, 直播, 图片美化等.

在 macOS 上搭建 OpenGL 开发环境

所谓工欲善其事, 必先利其器, 进行 OpenGL 开发之前, 需要先搭建 OpenGL 开发环境. macOS 上搭建 OpenGL 开发环境的方式主要有手动下载代码库和使用 homebrew 安装两种. 这里使用的是手动下载的方法进行搭建.

手动下载代码库

OpenGL 开发中使用到的库主要有 glew 和 GLTools 两个, 代码可以直接从文末的 Demo 中直接下载.

1. 新建项目

打开 Xcode, 选择 Create a new Xcode project(或使用 command+shift+n) -> macOS -> Cocoa App



2. 添加 OpenGL 和 GLUT 库

点击 project, 选择 Build Phases -> Link Binary With Libraries -> +, 分别添加 OpenGL.framework 和 GLUT.framework 两个库



3. 手动添加代码库

右键点击 -> Add Files to ..., 选择事先下载好的代码库中的 include 文件夹(或者直接将include 拖拽到项目中), 同时勾选 Copy items if needed



使用同样的方法将 libGLTools.a 添加到 Frameworks 文件夹中

4. 添加 Header Search Paths

将 GLTools.h 和 glew.h 的路径添加到 Header Search Paths 中



5. 删除系统生成的文件并创建 main.cpp 文件

选中系统自动生成的 AppDelegate.h, AppDelegate.m, ViewController.h, ViewController.m 及 main.m 文件并删除, 然后创建 main.cpp 文件, 创建时取消选中 Also create a header file





6. 编写代码

在 main.cpp 中敲入以下代码, 编译时会报 error, 此时只需将报错信息中的 import 将 <> 改为 "" 即可

#include <stdio.h>

#include "GLTools.h"
#include <glut/glut.h>

GLBatch triangleBatch;
GLShaderManager shaderManager;

void changeSize(int w, int h) {
    glViewport(0, 0, w, h);
}

void renderScene(void) {
    // 清屏
    glClear(GL_COLOR_BUFFER_BIT);
    GLfloat redColor[] = {1.0f, 0.0f, 0.0f, 1.0f};
    // 设置使用的是固定管线
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, redColor);
    triangleBatch.Draw();
    glutSwapBuffers();
}

void setupRC() {
    // 设置清屏颜色
    glClearColor(0.0f,0.0f,1.0f,1.0f);
    // 初始化管线
    shaderManager.InitializeStockShaders();
    // 选择三角形顶点位置
    GLfloat verts[] = {
        -0.5f,0.0f,0.0f,
        0.5f,0.0f,0.0f,
        0.0f,0.5f,0.0f,
    };
    // 开始绘制
    triangleBatch.Begin(GL_TRIANGLES, 3);
    triangleBatch.CopyVertexData3f(verts);
    triangleBatch.End();
}

int main(int argc,char* argv[]){
    gltSetWorkingDirectory(argv[0]);

    // 初始化 glut
    glutInit(&argc, argv);
    // 设置了程序所使用的窗口类型
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    // 设置所需的窗口大小
    glutInitWindowSize(800, 600);
    // 创建窗口并设置标题
    glutCreateWindow("Triangle");

    // 设置窗体大小改变时的回调
    glutReshapeFunc(changeSize);
    // 设置显示回调
    glutDisplayFunc(renderScene);

    GLenum err = glewInit();
    if(GLEW_OK != err) {
        fprintf(stderr,"glew error:%s\n",glewGetErrorString(err));
        return 1;
    }

    // 绘制图形
    setupRC();

    // 一个无限执行的循环
    glutMainLoop();

    return 0;
}
复制代码
7. 运行结果



8. 关于 warning

直接使用上述代码时会出现一堆的 warning, 这是因为 GLUT 这个库从 macOS 10.9 后便被弃用了, 但是不影响学习或正常开发. 如果不想看到一堆 warning 或者想要使用较新的工具, 可以使用 glfw 代替. 因为笔者学习的教材使用的 GLUT, 所以这里也用 GLUT 入门, 后续有机会会学学 glfw 的使用.

Tips

一些术语

  • 顶点: 屏幕中显示出来的一个点, 是 OpenGL 的基础, OpenGL 中的图形就是由大量的顶点以及顶点间的连线构成的
  • 光栅化: 实际绘制或填充每个顶点之间的像素形成线程
  • 着色: 沿着顶点之间改变颜色值, 能够轻松创建光照照射在一个立方体上的效果
  • 纹理贴图: 一个用来贴到三角形或多边形上的图片
  • 混合: 将不同颜色混到一起

OpenGL 的渲染流程



图元的类型



类型

值

说明

GL_POINTS

0x0000

一个个独立的顶点

GL_LINES

0x0001

多条线段

GL_LINE_STRIP

0x0002

不闭合的折现

GL_LINE_LOOP

0x0003

闭合的折现

GL_TRAINGLES

0x0004

多个独立的三角形

GL_TRAINGLE_STRIP

0x0005

多个连续的三角形

GL_TRAINGLE_FAN

0x0006

扇状连续的三角形

GL_QUADS

0x0007

多个独立的四边形

GL_QUAD_STRIP

0x0008

多个连续的四边形

GL_POLYGON

0x0009

单个简单的凸多边形

Talk is cheap, show me the code.

Demo 下载地址