OpenGL 环境搭建及三角形渲染解析

OpenGL环境搭建及三角形渲染解析.png

一、准备工作

电脑配置安装 Xcode 环境
下载环境需要的资源文件 CLTools、glew、libGLTools.a

二、开始配置环境

2.1、用 Xcode 创建文件

打开 Xcode->New->Project->macOS->App
如下图：

NewApp.png

2.2、删除不用文件类

删除不用文件类.png

2.3、添加准备工作中的资源文件及配置路径

资源文件拖到项目目录或者粘贴复制进来都可以。

添加资源文件及配置路径.png

2.4、添加系统库 GLUT.framework、OpenGL.framework

添加系统库.png

2.5、将 main.m 文件更改为 main.cpp 或者删除新建 .cpp 文件

新建 .cpp 文件如下：

NewFile.png

main.cpp.png

此时，OpenGL 环境搭建完成，接下来通过一个案例来实现一个三角形。

三、案例渲染三角形

接下来的代码在 main.cpp 文件中编写,如果 main.cpp 里面有内容，先清空。

3.1、引入着色器头文件及辅助类头文件

#include "GLShaderManager.h"
#include "GLTools.h"
#include <GLUT/GLUT.h>

OpenGL 的渲染是依靠着色器的，因此，需要引入着色器管理类头文件 #include "GLShaderManager.h"。GLTools.h 头文件包含独立函数，提供给不同平台调用。GLUT.h 作为辅助类，提供一些帮助，比如提供循环调用，类似 runloop。

3.2、定义一个着色器和三角形的容器类

GLShaderManager  shaderManager;
GLBatch  triangleBatch;

整个过程离不开着色器，所以着色器管理类是少不了的。另外，渲染三角形需要一个容器，就好比制作东西需要一个模具一样，GLBatch 可以理解为一个容器类，只是这次我们要制作一个三角形。

3.3、main 函数

头文件和管理类及容器定义完之后，我们需要从 main 函数为入口开始初始化。

int main(int argc, char *argv[]) {
    //初始化GLUT
    glutInit(&argc, argv);
    //初始化不同类型
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    //初始化窗口大小
    glutInitWindowSize(800, 600);
    //创建窗口标题
    glutCreateWindow("Triangle");
    
    //辅助类 GLUT 提供的消息循环，调用的2个回调函数
    glutReshapeFunc(changeSize);
    glutDisplayFunc(RanderScene);
    
    //检测
    GLenum status = glewInit();
    if (GLEW_OK != status) {
        //打印错误信息
        printf("GLEW Error:%s\n",glewGetErrorString(status));
        return 1;
    }
    //设置渲染环境
    setupRC();
    
    //加入loop循环
    glutMainLoop();
    
    return 0;
}

main 函数作为程序的入口，需要初始化辅助类并创建窗口信息

//初始化GLUT
glutInit(&argc, argv);
//初始化不同类型
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
//初始化窗口大小
glutInitWindowSize(800, 600);
//创建窗口标题
glutCreateWindow("Triangle");

另外主要的是辅助类提供的函数回调的2个方法:

glutReshapeFunc(changeSize)
此函数在改变窗口大小时，可以实时回调新窗口的大小信息，回调方法 changeSize 的实现如下：

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

首次进入程序或者每次改变窗口时，都会触发这个方法。此方法要放在 main 函数之前调用。

glutDisplayFunc(RanderScene)
此函数为显示函数，专门来绘制图形的，回调方法 ** RanderScene** 的实现如下：

void RanderScene (void) {
    //清理缓冲区
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
    //调配颜色
    GLfloat vGreen[] = {0.0,1.0,0.0,1.0};
    //调用固定着色器
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vGreen);
    //绘制
    triangleBatch.Draw();
    //缓冲区互换
    glutSwapBuffers();
}

此函数回调是用着色器绘制图形的，根据双缓冲区原理，那么绘制前要先清理缓存区，然后加入本次绘制需要的颜料，调用加入颜料后的着色器，拥有三角形的容器开始绘制，完成后，通过缓冲区互换，显示在窗口上。

那么，着色器只是着色，三角形是从何而来呢？接下来解析三角形容器环境的配置，也就是 setupRC() 方法的实现：

void setupRC () {
    //背景颜色
    glClearColor(0.9, 0.2, 0.7, 1);
    //初始化着色器
    shaderManager.InitializeStockShaders();
    //确定三角形的三个顶点
    GLfloat vVerts[] = {
        -1.0f,0.0f,0.0f,
        0.5f,0.0f,0.0f,
        0.0f,0.5f,0.0f,
    };
    //开始建立三角形
    triangleBatch.Begin(GL_TRIANGLES, 3);
    //copy 顶点数据
    triangleBatch.CopyVertexData3f(vVerts);
    //建立完成
    triangleBatch.End();
}

此方法用来建立一个三角形容器的环境，首先确定整个环境的背景颜色，然后初始化着色器（着色器没有初始化之前，是不能调用着色器上颜料的，因此这个方法完成后才会去调用前面 changeSize 和 RanderScene函数），然后确定三个顶点的坐标，建立三角形容器，复制坐标数据，最后建立完成。

至此，调用 glutMainLoop() 加入循环。

特别注意：

changeSize、RanderScene、setupRC 这三个方法是要写在 main 函数之前的，因为 OpenGL 是面向过程编程，否则编译报错。
changeSize、RanderScene、setupRC 这三个方法的名称是可以自定义的。

综上所述，简化过程大概如下：

三角形渲染过程.png