openGL入门案例-绘制三角形

介绍

对于openGL入门者，希望这篇文章能给你带来一定的收获。如果你是openGL进阶者，那么这篇文章对你的参考意义并不大。

环境搭建

首先，搭建前的资源准备：

openGL环境需要的文件.png

以下是openGL环境搭建需要的文件下载地址：链接: https://pan.baidu.com/s/1kmjkx00QozKCJmVD6JQkOA 密码: i6w5

搭建步骤

1.用Xcode创建一个macOS项目，起一个你喜欢的名字，这里我起一个叫FirstOpenGLProject。

1.png

2.添加OpenGL.framework 和 GLUT.framework 两个系统依赖库

2.jpg

3.删除项目自带的文件AppDelegate.h、AppDelegate.m、ViewController.h、ViewController.m、main.m；

3.jpg

4.将环境搭建准备的资源拖入项目；

4.jpg

5.Building Setting->Header Search Paths拖入GLTools.h和glew.h的生成路径；

5.jpg

6.创建一个main.cpp项目；

6.jpg

7.jpg

7.在main.cpp文件中加入main函数；

8.jpg

8、command+B编译，如果编译通过，说明配置成功。否则，检查以上步骤是否有遗漏或者配置有误。

$\color{blue}{至此，环境搭建就已经完成了，整个搭建流程可以参考下图gif动画}$

搭建步骤.gif

9、先画一个三角形试试，将下面的代码复制、粘贴、覆盖main.cpp

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

GLShaderManager shaderManager;
GLBatch batch;

void changeSize(int width, int height){
    glViewport(200, 200, width, height);
}

void renderScene(){
    glClear(GL_COLOR_BUFFER_BIT|GL_STENCIL_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    
    GLfloat vBlue[] = {0,0,1,1};
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlue);
    batch.Draw();
    glutSwapBuffers();
}

void setupRC(){
    glClearColor(0, 1, 0, 0);
    shaderManager.InitializeStockShaders();
    
    GLfloat vVerts[] = {
        -1,0,0,
        1,0,0,
        0,1,0
    };
    batch.Begin(GL_TRIANGLES, 3);
    batch.CopyVertexData3f(vVerts);
    batch.End();
}


int main(int arc, char *argv[]){
    
    glutInit(&arc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB|GLUT_DEPTH|GLUT_STENCIL);
    glutInitWindowSize(400, 400);
    glutCreateWindow("first openGL demo");
    
    glutReshapeFunc(changeSize);
    glutDisplayFunc(renderScene);
    
    GLenum status = glewInit();
    if (status!=GLEW_OK) {
        return 1;
    }
    
    setupRC();
    glutMainLoop();
    
    return 0;
}

9.command+R运行项目，效果如下

demo.jpeg

案例解析

1.导入项目依赖的库

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

2.在main函数进行一些初始化的工作，比如glut的初始化、glew的初始化、设置渲染环境等

int main(int arc, char *argv[]){
    /// glut的初始化工作
    initGlut(arc, argv);
    
    /// 初始化一个GLEW库,确保OpenGL API对程序完全可用。
    ///在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题
    GLenum status = glewInit();
    if (status!=GLEW_OK) {
        return 1;
    }
    
    /// 设置渲染环境
    setupRC();

    /// 类似于iOS runloop 运⾏循环
    glutMainLoop();
    
    return 0;
}

3.glut的初始化工作，主要是GLUT库初始化、设置窗口尺寸、注册回调函数等操作。

/// glut的初始化工作
void initGlut(int arc, char *argv[]){
   //初始化GLUT库,这个函数只是传说命令参数并且初始化glut库
    glutInit(&argc, argv);
    
    /*
     初始化双缓冲窗口，其中标志GLUT_DOUBLE、GLUT_RGBA、GLUT_DEPTH、GLUT_STENCIL分别指
     双缓冲窗口、RGBA颜色模式、深度测试、模板缓冲区
     
     --GLUT_DOUBLE`：双缓存窗口，是指绘图命令实际上是离屏缓存区执行的，然后迅速转换成窗口视图，这种方式，经常用来生成动画效果；
     --GLUT_DEPTH`：标志将一个深度缓存区分配为显示的一部分，因此我们能够执行深度测试；
     --GLUT_STENCIL`：确保我们也会有一个可用的模板缓存区。
     深度、模板测试后面会细致讲到
     */
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
    
    glutInitWindowSize(400, 400); /// GLUT窗口大小
    glutCreateWindow("first openGL demo"); /// 窗口标题

    glutReshapeFunc(changeSize);/// 注册重塑函数
    glutDisplayFunc(RenderScene);/// 注册显示函数
}

$\color{blue}{要点说明：}$
1、重塑函数，glutReshapeFunc需要传入一个无返回值带两个整型形参的自定义函数，先看一下官方定义

glutReshapeFunc(void (*func)(int width, int height))

这个自定义函数的触发条件有两个：新建窗⼝、窗⼝尺⼨发好⽣调整。
这个函数主要处理的业务：设置OpenGL 视⼝、设置OpenGL 投影⽅式等

2、同样的，先看看官方注册显示函数glutDisplayFunc的定义

glutDisplayFunc(void (*func)(void))

这个函数需要传入一个无返回值无参的自定义函数地址，其触发条件和iOS的- (void)drawRect:(CGRect)rect方法很相似，回顾一下，drawRect方法的触发条件，要么系统触发，要么开发者主动调用 setNeedsDisplay方法触发。
而这个自定义函数的厨房条件正好要么系统自动触发、要么开发者手动调用 glutPostRedisplay()触发。
这个函数主要处理的业务：清理缓存区(颜⾊,深度,模板缓存区等) 、使⽤存储着⾊器、绘制图形。

4.设置渲染环境

GLShaderManager shaderManager; //定义着色管理器
GLBatch batch; ///定义批次处理容器

/// 设置渲染环境
void setupRC(){
    /// 1.设置窗⼝背景颜⾊
    glClearColor(0, 1.f, 0, 1.f);
    /// 2.初始化存储着⾊器shaderManager
    shaderManager.InitializeStockShaders();
    
    /// 3.设置图形顶点数据
    GLfloat vVerts[] = {
        -1,0,0,
        1,0,0,
        0,1,0
    };
    
    /// 4.利⽤GLBatch 批次类,将数据传递到着⾊器
    batch.Begin(GL_TRIANGLES, 3);
    batch.CopyVertexData3f(vVerts);
    batch.End();
}

$\color{blue}{要点说明：}$
1、这里需要关注一下GLBatch的Begin方法的第一个参数：基本图元连接方式（primitive）

void Begin(GLenum primitive, GLuint nVerts, GLuint nTextureUnits = 0);

网上有一个图可以很形象的看出这个参数的作用效果

基本图片连接方式.png

5.重塑函数glutReshapeFunc回调函数

/// 新建窗口或者窗口大小改变时调用，接收新的宽度、高度。
void changeSize(int width, int height){
    /// 设置视口
    ///  x,y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x,y 都是为0
    glViewport(0, 0, width, height);
}

6.注册显示函数glutDisplayFunc回调函数

void renderScene(){
    //1.清除一个或者一组特定的缓存区
    /*
     缓冲区是一块存在图像信息的储存空间，红色、绿色、蓝色和alpha分量通常一起分量通常一起作为颜色缓存区或像素缓存区引用。
     OpenGL 中不止一种缓冲区（颜色缓存区、深度缓存区和模板缓存区）
      清除缓存区对数值进行预置
     参数：指定将要清除的缓存的
     GL_COLOR_BUFFER_BIT :指示当前激活的用来进行颜色写入缓冲区
     GL_DEPTH_BUFFER_BIT :指示深度缓存区
     GL_STENCIL_BUFFER_BIT:指示模板缓冲区
     */
    glClear(GL_COLOR_BUFFER_BIT|GL_STENCIL_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    
    //2.设置一组浮点数来表示颜色
    GLfloat vBlue[] = {0, 0, 1.f, 1.f};
    
    //传递到存储着色器
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlue);
    //提交着色器
    batch.Draw();
    
    //在开始的设置openGL窗口的时候，我们指定要一个双缓冲区的渲染环境。这就意味着将在后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到可能伴随着动画帧与动画帧之间的闪烁的渲染过程。缓冲区交换平台将以平台特定的方式进行。
    //将后台缓冲区进行渲染，然后结束后交换给前台
    glutSwapBuffers();
}

$\color{blue}{要点说明：}$
了解一下固定着色器

1、单元着色器
GLShaderManager::UserStockShader(GLT_SHADER_IDENTITY,GLfloat vColor[4]);
参数1: 存储着⾊器种类-单元着⾊器；
参数2: 颜⾊；
使⽤场景: 绘制默认OpenGL 坐标系(-1,1)下图形. 图形所有⽚段都会以⼀种颜⾊填充。

2、平面着色器
GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLfloat mvp[16],GLfloat
vColor[4]);
参数1: 存储着⾊器种类-平⾯着⾊器；
参数2: 允许变化的4*4矩阵；
参数3: 颜⾊；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化)。

3、上色着色器
GLShaderManager::UserStockShader(GLT_SHADER_SHADED,GLfloat mvp[16]);
参数1: 存储着⾊器种类-上⾊着⾊器；
参数2: 允许变化的4*4矩阵；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化) 颜⾊将会平滑地插⼊到顶点之间称为平滑着⾊。

4、默认光源着色器
GLShaderManager::UserStockShader(GLT_SHADER_DEFAULT_LIGHT,GLfloat
mvMatrix[16],GLfloat pMatrix[16],GLfloat vColor[4]);
参数1: 存储着⾊器种类-默认光源着⾊器；
参数2: 模型4 * 4矩阵；
参数3: 投影4 * 4矩阵；
参数4: 颜⾊值；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化) 这种着⾊器会使绘制的图形产⽣
阴影和光照的效果。

5、点光源着色器
GLShaderManager::UserStockShader(GLT_SHADER_POINT_LIGHT_DIEF,GLfloat
mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vColor[4]);
参数1: 存储着⾊器种类-点光源着⾊器；
参数2: 模型4 * 4矩阵；
参数3: 投影4 * 4矩阵；
参数4: 点光源的位置；
参数5: 颜⾊值；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化) 这种着⾊器会使绘制的图形产⽣
阴影和光照的效果.它与默认光源着⾊器⾮常类似,区别只是光源位置可能是特定的。

6、纹理替换矩阵着色器
GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_REPLACE,GLfloat
mvMatrix[16],GLint nTextureUnit);
参数1: 存储着⾊器种类-纹理替换矩阵着⾊器；
参数2: 模型4 * 4矩阵；
参数3: 纹理单元；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化)这种着⾊器通过给定的模
型视图投影矩阵.使⽤纹理单元来进⾏颜⾊填充.其中每个像素点的颜⾊是从纹理中获取。

7、纹理调整着色器
GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_MODULATE,GLfloat
mvMatrix[16],GLfloat vColor[4],GLint nTextureUnit);
参数1: 存储着⾊器种类-纹理调整着⾊器；
参数2: 模型4 * 4矩阵；
参数3: 颜⾊值；
参数4: 纹理单元；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化)这种着⾊器通过给定的模
型视图投影矩阵. 着⾊器将⼀个基本⾊乘以⼀个取⾃纹理单元nTextureUnit 的纹理.将颜⾊与纹理进⾏颜⾊混合后才填充到⽚段中。

8、纹理光源着色器
GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_POINT_LIGHT_DIEF,G
Lfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat
vBaseColor[4],GLint nTextureUnit);

参数1: 存储着⾊器种类-纹理光源着⾊器；
参数2: 模型44矩阵；
参数3: 投影44矩阵；
参数4: 点光源位置；
参数5: 颜⾊值(⼏何图形的基本⾊) ；
参数6: 纹理单元；
使⽤场景: 在绘制图形时, 可以应⽤变换(模型/投影变化)这种着⾊器通过给定的模型视图投影矩阵. 着⾊器将⼀个纹理通过漫反射照明计算进⾏调整(相乘)。

整个源码

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

GLShaderManager shaderManager; //定义着色管理器
GLBatch batch; ///定义批次处理容器

/// 新建窗口或者窗口大小改变时调用，接收新的宽度、高度。
void changeSize(int width, int height){
    /// 设置视口
    ///  x,y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x,y 都是为0
    glViewport(0, 0, width, height);
}

void renderScene(){
    //1.清除一个或者一组特定的缓存区
    /*
     缓冲区是一块存在图像信息的储存空间，红色、绿色、蓝色和alpha分量通常一起分量通常一起作为颜色缓存区或像素缓存区引用。
     OpenGL 中不止一种缓冲区（颜色缓存区、深度缓存区和模板缓存区）
      清除缓存区对数值进行预置
     参数：指定将要清除的缓存的
     GL_COLOR_BUFFER_BIT :指示当前激活的用来进行颜色写入缓冲区
     GL_DEPTH_BUFFER_BIT :指示深度缓存区
     GL_STENCIL_BUFFER_BIT:指示模板缓冲区
     */
    glClear(GL_COLOR_BUFFER_BIT|GL_STENCIL_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    
    //2.设置一组浮点数来表示颜色
    GLfloat vBlue[] = {0, 0, 1.f, 1.f};
    
    //传递到存储着色器
    shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vBlue);
    //提交着色器
    batch.Draw();
    
    //在开始的设置openGL窗口的时候，我们指定要一个双缓冲区的渲染环境。这就意味着将在后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到可能伴随着动画帧与动画帧之间的闪烁的渲染过程。缓冲区交换平台将以平台特定的方式进行。
    //将后台缓冲区进行渲染，然后结束后交换给前台
    glutSwapBuffers();
}

/// 设置渲染环境
void setupRC(){
    /// 1.设置窗⼝背景颜⾊
    glClearColor(0, 1.f, 0, 1.f);
    /// 2.初始化存储着⾊器shaderManager
    shaderManager.InitializeStockShaders();
    
    /// 3.设置图形顶点数据
    GLfloat vVerts[] = {
        -1,0,0,
        1,0,0,
        0,1,0
    };
    
    /// 4.利⽤GLBatch 批次类,将数据传递到着⾊器
    batch.Begin(GL_TRIANGLES, 3);
    batch.CopyVertexData3f(vVerts);
    batch.End();
}

//glut的初始化工作
void initGlut(){
    glutInit(&arc, argv);
    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB|GLUT_DEPTH|GLUT_STENCIL);
    glutInitWindowSize(400, 400);
    glutCreateWindow("first openGL demo");
    
    glutReshapeFunc(changeSize);
    glutDisplayFunc(renderScene);
}

int main(int arc, char *argv[]){
    /// glut的初始化工作
    initGlut();
    
    /// 初始化一个GLEW库,确保OpenGL API对程序完全可用。
    ///在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题
    GLenum status = glewInit();
    if (status!=GLEW_OK) {
        return 1;
    }
    
    /// 设置渲染环境
    setupRC();

    /// 类似于iOS runloop 运⾏循环
    glutMainLoop();
    
    return 0;
}