OpenGL 学习笔记 01 —— macOS 上 OpenGL 环境的搭建及简单图形的绘制-CSDN博客

初识 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	单个简单的凸多边形