OpenGL初识之OpenGL渲染基础概念传送门https://www.jianshu.com/p/d26879a736af
接着上一节我们学习了OpenGL渲染基础，现在我们来综合使用一下，练习一下绘制OpenGL图元并组合图元：
一、绘制图元点
二、绘制图元线段/连续线段/线环
三、绘制金字塔
四、图元渲染三角形带/三角形扇
一、绘制图元点
先上绘制的总结思路图
OpenGL渲染业务介绍.png
开始准备环境和对应的函数(详细介绍请移步我之前的文章,传送门:基本函数解释https://www.jianshu.com/p/b98be0925051)
这里主要说明有区别的地方
1、设置全局变量
GLShaderManager shaderManager;//着色器管理
GLMatrixStack modelViewMatrix;//模型视图矩阵堆栈
GLMatrixStack projectViewMatrix;//投影矩阵堆栈
GLFrame cameraFrame;//观察者
GLFrame objectFrame;
GLFrustum viewFrustum;//投影矩阵
//批次类（7种不同的图元，对应7种容器对象）
GLBatch pointBatch;//点
GLBatch lineBatch;//线
GLBatch lineStripBatch;//连线
GLBatch lineLoopBatch;//线环
GLBatch triangleBatch;//三级形
GLBatch triangleStripBatch;//三角形带
GLBatch triangleFanBatch;//三角形扇
//几何变换管道
GLGeometryTransform transformPipeline;
//颜色RGBA
GLfloat vGreen[] = {0.0f, 1.0f, 0.0f, 1.0f};
GLfloat vYellow[] = {1.0f,1.0f, 0.0f, 1.0f};
//设置按空格键来切换不同图元展示
//记录按了几次空格
int nStep = 0;
2、设置main函数
int main(int argc,char* argv[]){
gltSetWorkingDirectory(argv[0]);
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGBA|GLUT_DEPTH|GLUT_STENCIL);
glutInitWindowSize(800,600);
glutCreateWindow("Triangle");
glutReshapeFunc(ChangeSize);
glutDisplayFunc(RenderScene);
glutSpecialFunc(SpecialKeys);
//注册点击空格会调用的函数
glutKeyboardFunc(KeyPressFunc);
GLenum err = glewInit();
if(GLEW_OK != err) {
fprintf(stderr,"glew error:%s\n",glewGetErrorString(err));
return 1;
}
SetupRC();
glutMainLoop();
return 0;
}
3、设置SetupRC函数,注释我都写在里面了
//1、设置背景颜色
glClearColor(0.7f, 0.7f, 0.7f,1.0);
//2、初始化着色器管理器
shaderManager.InitializeStockShaders();
//3、开启深度测试
glEnable(GL_DEPTH_TEST);
//4、设置变换管道
transformPipeline.SetMatrixStacks(modelViewMatrix, projectViewMatrix);
//5、设置观察者位置，便于观察效果
cameraFrame.MoveForward(-15);
//6、设置一些点
//创建一维的六个点的数组
GLfloat vCoast[18] = {
3,3,0,
-3,3,0,
3,0,0,
-3,0,0,
3,-3,0,
-3,-3,0
};
//设置图元渲染方式，点
pointBatch.Begin(GL_POINTS, 6);
pointBatch.CopyVertexData3f(vCoast);
pointBatch.End();
4、设置ChangeSize函数,需要注意的是，这个函数的调用时机，就是窗口已更改大小，或刚刚创建，无论是那种情况，我们都需要使用窗口维度设置视口和设置投影矩阵
//1、设置视口
glViewport(0, 0, w, h);
//2、投影矩阵： 需要设置纵横比
viewFrustum.SetPerspective(35, floorf(w) / floorf(h), 1.0, 500);
//3、设置投影矩阵,加载投影矩阵
projectViewMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());
//4、模型视图视图矩阵堆栈，加载单元矩阵
modelViewMatrix.LoadIdentity();
5、设置渲染RenderScence函数
//1、清除缓冲区
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//2、模型视图矩阵---压栈
modelViewMatrix.PushMatrix();
M3DMatrix44f mCamera;
cameraFrame.GetCameraMatrix(mCamera);
modelViewMatrix.MultMatrix(mCamera);//矩阵相乘，得到变换后的新矩阵
M3DMatrix44f mObjectFrame;
objectFrame.GetMatrix(mObjectFrame);
modelViewMatrix.MultMatrix(mObjectFrame);//矩阵相乘，得到变换后的新矩阵
//3、挑选平面着色器渲染
shaderManager.UseStockShader(GLT_SHADER_FLAT, transformPipeline.GetModelViewProjectionMatrix(), vGreen);
//4、容器类提交绘制
switch (nStep) {
case 0:
//设置点的大小
glPointSize(20.0f);
pointBatch.Draw();
glPointSize(1.0f);
break;
default:
break;
}
//5、模型视图矩阵---出栈，还原到以前的模型视图矩阵
modelViewMatrix.PopMatrix();
//6、交换缓冲区
glutSwapBuffers();
6、设置特殊键位函数
void SpecialKeys (int key , int x, int y){
//点击键盘上的上下左右键
if (key == GLUT_KEY_UP) {
//往上移动，围绕X轴，是顺时针方向，由于逆时针为正，所以是-5.0
//m3dDegToRad() 角度转弧度函数
objectFrame.RotateWorld(m3dDegToRad(-5.0), 1.0, 0, 0);//其中的1.0表示YES，0.0表示NO
}else if (key == GLUT_KEY_DOWN) {
//往下移动，围绕X轴，是逆时针方向，由于逆时针为正，所以是5.0
objectFrame.RotateWorld(m3dDegToRad(5.0), 1.0, 0, 0);
}else if (key == GLUT_KEY_LEFT) {
//往左移动，围绕Y轴，是顺时针方向，由于逆时针为正，所以是-5.0
objectFrame.RotateWorld(m3dDegToRad(-5.0), 0.0, 1.0, 0);
}else if (key == GLUT_KEY_RIGHT) {
//往右移动，围绕Y轴，是逆时针方向，由于逆时针为正，所以是5.0
objectFrame.RotateWorld(m3dDegToRad(5.0), 0.0, 1.0, 0);
}
//发生变化需要重新渲染
glutPostRedisplay();
}
7、设置空格切换函数KeyPressFunc(这个主要是用来切换不同图元)
void KeyPressFunc(unsigned char key, int x, int y){
//不断点击空格修改nStep记录步数
if(key == 32){
nStep++;
if(nStep > 6){
nStep = 0;
}
}
//修改窗口名称
switch(nStep)
{
case 0:
glutSetWindowTitle("GL_POINTS");
break;
case 1:
glutSetWindowTitle("GL_LINES");
break;
case 2:
glutSetWindowTitle("GL_LINE_STRIP");
break;
case 3:
glutSetWindowTitle("GL_LINE_LOOP");
break;
case 4:
glutSetWindowTitle("GL_TRIANGLES");
break;
case 5:
glutSetWindowTitle("GL_TRIANGLE_STRIP");
break;
case 6:
glutSetWindowTitle("GL_TRIANGLE_FAN");
break;
}
glutPostRedisplay();
}
二、绘制图元线段/连续线段/线环
绘制图元点的写完后，设置绘制图元线段/连续线段/线环 ，只需要配置SetupRC里面设置对应图元，然后再RenderScence修改图元绘制就行了，对应修改的位置如下
1、修改SetupRC部分代码
//1/设置图元渲染方式，点
pointBatch.Begin(GL_POINTS, 6);
pointBatch.CopyVertexData3f(vCoast);
pointBatch.End();
//2/设置图元渲染方式,线段
lineBatch.Begin(GL_LINES, 6);
lineBatch.CopyVertexData3f(vCoast);
lineBatch.End();
//3/设置图元渲染方式，连续线段
lineStripBatch.Begin(GL_LINE_STRIP, 6);
lineStripBatch.CopyVertexData3f(vCoast);
lineStripBatch.End();
//4/设置图元渲染方式,线环
lineLoopBatch.Begin(GL_LINE_LOOP, 6);
lineLoopBatch.CopyVertexData3f(vCoast);
lineLoopBatch.End();
2、修改RenderScence对应部分代码
switch (nStep) {
case 0:
//设置点的大小
glPointSize(20.0f);
pointBatch.Draw();
glPointSize(1.0f);
break;
case 1:
//设置线段宽度
glLineWidth(5.0f);
lineBatch.Draw();
glLineWidth(1.0f);
break;
case 2:
//
glLineWidth(5.0f);
lineStripBatch.Draw();
glLineWidth(1.0f);
break;
case 3:
glLineWidth(5.0f);
lineLoopBatch.Draw();
glLineWidth(1.0f);
break;
default:
break;
}
三、渲染图元金字塔
接下来我们绘制金字塔，金字塔是由一个底面和四个侧面组成，金字塔没有底面的话，其实侧面是由4个三角形组成的，如果有底面的话，底面是两个三角形组成的，和上面不同图元绘制的方式类似，只需要修改SetupRC和RenderScene对应的代码就行了
1、SetupRC函数中设置金字塔四个顶点坐标数据和图元装配方式
//设置金字塔的顶点数据
//通过三角形创建金字塔
GLfloat vPyramid[12][3] = {
-2.0f, 0.0f, -2.0f,
2.0f, 0.0f, -2.0f,
0.0f, 4.0f, 0.0f,
2.0f, 0.0f, -2.0f,
2.0f, 0.0f, 2.0f,
0.0f, 4.0f, 0.0f,
2.0f, 0.0f, 2.0f,
-2.0f, 0.0f, 2.0f,
0.0f, 4.0f, 0.0f,
-2.0f, 0.0f, 2.0f,
-2.0f, 0.0f, -2.0f,
0.0f, 4.0f, 0.0f};
//GL_TRIANGLES 每3个顶点定义一个新的三角形
triangleBatch.Begin(GL_TRIANGLES, 12);
triangleBatch.CopyVertexData3f(vPyramid);
triangleBatch.End();
2、RenderScence绘制金字塔
case 4:
triangleBatch.Draw();
break;
四、图元渲染三角形扇/图元渲染三角形带
1、绘制六边形三角形扇
修改SetupRC，设置顶点数据，该顶点的坐标数据是通过半径和角度求来的，下面这段代码的循环，就是为了求六边形七个顶点的位置坐标，六个顶点和一个中心点
// 三角形扇形--六边形
GLfloat vPoints[100][3];
int nVerts = 0;
//半径
GLfloat r = 3.0f;
//原点(x,y,z) = (0,0,0);
vPoints[nVerts][0] = 0.0f;
vPoints[nVerts][1] = 0.0f;
vPoints[nVerts][2] = 0.0f;
//M3D_2PI 就是2Pi 的意思，就一个圆的意思。 绘制圆形
for(GLfloat angle = 0; angle < M3D_2PI; angle += M3D_2PI / 6.0f) {
//数组下标自增（每自增1次就表示一个顶点）
nVerts++;
/*
弧长=半径*角度,这里的角度是弧度制,不是平时的角度制
既然知道了cos值,那么角度=arccos,求一个反三角函数就行了
*/
//x点坐标 cos(angle) * 半径
vPoints[nVerts][0] = float(cos(angle)) * r;
//y点坐标 sin(angle) * 半径
vPoints[nVerts][1] = float(sin(angle)) * r;
//z点的坐标
vPoints[nVerts][2] = -0.5f;
}
// 结束扇形 前面一共绘制7个顶点（包括圆心）
//添加闭合的终点
//如果屏蔽173-177行代码，并把绘制节点改为7.则三角形扇形是无法闭合的。
nVerts++;
vPoints[nVerts][0] = r;
vPoints[nVerts][1] = 0;
vPoints[nVerts][2] = 0.0f;
// 加载！
//GL_TRIANGLE_FAN 以一个圆心为中心呈扇形排列，共用相邻顶点的一组三角形
triangleFanBatch.Begin(GL_TRIANGLE_FAN, 8);
triangleFanBatch.CopyVertexData3f(vPoints);
triangleFanBatch.End();
2、绘制六边形三角形扇,修改RenderScence
case 6:
triangleFanBatch.Draw();
break;
3、绘制三角形带，配置顶点坐标以及图元装配方式
//三角形条带，一个小环或圆柱段
//顶点下标
int iCounter = 0;
//半径
GLfloat radius = 3.0f;
//从0度~360度，以0.3弧度为步长
for(GLfloat angle = 0.0f; angle <= (2.0f*M3D_PI); angle += 0.3f)
{
//或许圆形的顶点的X,Y
GLfloat x = radius * sin(angle);
GLfloat y = radius * cos(angle);
//绘制2个三角形（他们的x,y顶点一样，只是z点不一样）
vPoints[iCounter][0] = x;
vPoints[iCounter][1] = y;
vPoints[iCounter][2] = -0.5;
iCounter++;
vPoints[iCounter][0] = x;
vPoints[iCounter][1] = y;
vPoints[iCounter][2] = 0.5;
iCounter++;
}
// 关闭循环
//结束循环，在循环位置生成2个三角形
vPoints[iCounter][0] = vPoints[0][0];
vPoints[iCounter][1] = vPoints[0][1];
vPoints[iCounter][2] = -0.5;
iCounter++;
vPoints[iCounter][0] = vPoints[1][0];
vPoints[iCounter][1] = vPoints[1][1];
vPoints[iCounter][2] = 0.5;
iCounter++;
// GL_TRIANGLE_STRIP 共用一个条带（strip）上的顶点的一组三角形
triangleStripBatch.Begin(GL_TRIANGLE_STRIP, iCounter);
triangleStripBatch.CopyVertexData3f(vPoints);
triangleStripBatch.End();
4、绘制三角形带,修改RenderScence
case 5:
triangleStripBatch.Draw();
break;
运行得到所有的样式，如下图：
图元绘制实战.png
溪浣双鲤的技术摸爬滚打之路