前言
在学习编程的时候我们总是通过编写demo来加深印象，本篇目的是介绍OpenGL中三角形的绘制，是一个入门级的图形绘制，重点是理解图形是如何绘制的。
环境配置
开发环境的配置是编写代码的前期准备工作，详细操作步骤可参考：Xcode搭建OpenGL环境
工具类
主要讲述三个工具类
-
着色器管理类
#include <GLShaderManager.h> 移入了GLTool 着色器管理器（shader Mananger）类。没有着色器，我们就不能在OpenGL（核心框架）进行着色。着色器管理器不仅允许我们创建并管理着色器，还提供一组“存储着色器”，他们能够进行一些初步䄦基本的渲染操作。
- 创建并管理着色器；
- 提供一组存储着色器；
- 进行基本的渲染操作；
-
GLTools函数
#include<GLTools.h> GLTool.h头文件包含了大部分GLTool中类似C语言的独立函数
-
GLUT静态库
在Mac 系统下，#include <GLUT/GLUT.h>
在Windows 和 Linux上，我们使用freeglut的静态库版本并且需要添加一个宏
方法函数
-
void changeSize(int w,int h)
changeSiz是用于改变窗口大小的自定义函数，glViewport中有4个参数，分别是x, y, w, h。其中x，y表示窗口中视图的左下角坐标，通常都是为0。w，h表示窗口的宽和高，通常用像素位表示。代码如下:
/*
在窗口大小改变时，接收新的宽度&高度。
*/
void changeSize(int w,int h) {
/*
x,y 参数代表窗口中视图的左下角坐标，而宽度、高度是像素为表示，通常x,y 都是为0
*/
glViewport(0, 0, w, h);
}
其触发条件是：
- 新建窗口;
- 窗口尺寸发生调整;
为什么窗口大小发生调整会触发这个函数方法呢？原因就是在main函数方法中我们会使用glutMainLoop，其原理相当于iOS的runloop，当窗口大小改变时，实时调用此方法。需要在main中通过glutReshapeFunc(函数名) 注册为重塑函数，随着窗口大小改变而改变，使用代码如下：
//注册重塑函数
glutReshapeFunc(changeSize);
-
void RenderScene(void)函数
RenderScene函数是将传入的顶点数据、颜色等通过批次容器类提交到着色器中进行绘制渲染。需要在main函数中通过glutDisplayFunc(RenderScene(函数名)) 注册为显示函数。此方法是自定义渲染场景函数，当屏幕屏幕发生变化或者开发者驻主动渲染会调用此函数，具体使用步骤：
- 清除一个或者一组特定的缓存区；
- 设置一组浮点数，传递到存储着色器；
- 绘制图形
实现代码如下:
/// 渲染场景
void RenderScene(void) {
//1.清除一个或者一组特定的缓存区
/*
缓冲区是一块存在图像信息的储存空间，红色、绿色、蓝色和alpha分量通常一起分量通常一起作为颜色缓存区或像素缓存区引用。
OpenGL 中不止一种缓冲区（颜色缓存区、深度缓存区和模板缓存区）
清除缓存区对数值进行预置
参数：指定将要清除的缓存的
GL_COLOR_BUFFER_BIT :指示当前激活的用来进行颜色写入缓冲区
GL_DEPTH_BUFFER_BIT :指示深度缓存区
GL_STENCIL_BUFFER_BIT:指示模板缓冲区
*/
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT|GL_STENCIL_BUFFER_BIT);
//2.设置一组浮点数来表示白色
GLfloat vRed[] = {1.0f,1.0f,1.0f,1.0f};
//传递到存储着色器，即GLT_SHADER_IDENTITY着色器，这个着色器只是使用指定颜色以默认笛卡尔坐标第在屏幕上渲染几何图形
//单元着色器
shaderManager.UseStockShader(GLT_SHADER_IDENTITY,vRed);
//提交着色器 (绘制)
triangleBatch.Draw();
//在开始的设置openGL 窗口的时候，我们指定要一个双缓冲区的渲染环境。这就意味着将在后台缓冲区进行渲染，渲染结束后交换给前台。这种方式可以防止观察者看到可能伴随着动画帧与动画帧之间的闪烁的渲染过程。缓冲区交换平台将以平台特定的方式进行。
//将后台缓冲区进行渲染，然后结束后交换给前台
glutSwapBuffers();
}
-
void setupRC()函数
setupRC()函数主要用于
1.设置图形绘制所需的颜色、顶点数据等并且初始化一个渲染管理器：shaderManager，将这些数据传递到着色管理器中。
2.系统监听到数据已经配置完成，去自动调用OpenGL的渲染回调函数
触发条件:
- 手动main函数出发
具体实现代码如下:
///正方形四个顶点坐标
GLfloat vVerts[] = {
-blockSize,-blockSize,0.0f,
blockSize,-blockSize,0.0f,
blockSize,blockSize,0.0f,
-blockSize,blockSize,0.0f
};
/// 设置
void setupRC()
{
//设置清屏颜色（背景颜色）
glClearColor(0.98f, 0.40f, 0.7f, 1);
//没有着色器，在OpenGL 核心框架中是无法进行任何渲染的。初始化一个渲染管理器。
//在前面的课程，我们会采用固管线渲染，后面会学着用OpenGL着色语言来写着色器
shaderManager.InitializeStockShaders();
//指定顶点
//在OpenGL中，三角形是一种基本的3D图元绘图原素。
// GLfloat vVerts[] = {
// -0.5f,0.0f,0.0f,
// 0.5f,0.0f,0.0f,
// 0.0f,0.5f,0.0f
// };
//连接方式 九种连接方式 GL_TRIANGLE_FAN
//GL_POINTS 每个顶点在屏幕上都是单独点
//GL_LINES 每⼀对顶点定义⼀个线段;
//GL_LINE_STRIP ⼀个从第⼀个顶点依次经过每⼀个后续顶点⽽绘制的线条
//GL_LINE_LOOP 和GL_LINE_STRIP相同,但是最后⼀个顶点和第⼀个顶点连接起来了
//GL_TRIANGLES 每3个顶点定义⼀个新的三⻆形
//GL_TRIANGLE_STRIP 共⽤⼀个条带(strip)上的顶点的⼀组三⻆形
//GL_TRIANGLE_FAN 以⼀个圆点为中⼼呈扇形排列,共⽤相邻顶点的⼀组三⻆形
triangleBatch.Begin(GL_TRIANGLE_FAN, 4);
triangleBatch.CopyVertexData3f(vVerts);
triangleBatch.End();
}
-
int main(int argc,char *argv[])函数
main函数是程序的入口，主要是做绘制前的准备工作，例如：初始化GLUT库、初始化双缓冲窗口，设置窗口大小和窗口标题，设置数据，启动glutMainLoop()类似iOS runloop的运行循环。
实现的运行流程图如下所示：
main函数代码如下所示:
int main(int argc,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);
//GLUT窗口大小、窗口标题
glutInitWindowSize(500, 500);
glutCreateWindow("Square 标题");
/*
GLUT 内部运行一个本地消息循环，拦截适当的消息。然后调用我们不同时间注册的回调函数。我们一共注册2个回调函数：
1）为窗口改变大小而设置的一个回调函数
2）包含OpenGL 渲染的回调函数
*/
//注册重塑函数
glutReshapeFunc(changeSize);
//注册显示函数
glutDisplayFunc(RenderScene);
//注册特殊函数 (键盘调用)
glutSpecialFunc(SpecialKeys);
/*
初始化一个GLEW库,确保OpenGL API对程序完全可用。
在试图做任何渲染之前，要检查确定驱动程序的初始化过程中没有任何问题
*/
GLenum status = glewInit();
if (GLEW_OK != status) {
printf("GLEW Error:%s\n",glewGetErrorString(status));
return 1;
}
//设置我们的渲染环境
setupRC();
glutMainLoop();
return 0;
}
绘制效果
图形绘制后的展示效果如图所示:
