一看就懂的OpenGL ES教程——这或许是你遇过最难画的三角形(四)
你知不知道
你知不知道
我等到花儿也谢了
绘制三角形已经到了第四篇了，然而三角形还是等不到踪影，不少读者已经开始按耐不住内心的躁动了，好消息来了，本文就将完成绘制三角形的任务～
通过阅读本文，你将获得以下收获：
1.如何使用OpenGL es基本图元绘制点、线、三角形
2.如何使用OpenGL es更高级的图元绘制更复杂的图形
上篇回顾
上一篇博文一看就懂的OpenGL ES教程——这或许是你遇过最难画的三角形（三）重点介绍了图元和片段着色器以及OpenGL渲染指令，憋了这么久，今天开始，让我们一起体验渲染的快感～～
绘制图形
回顾下前几篇真正执行渲染的代码：
/** 此处开始将数据传入图形渲染管线 **/
static float triangleVer[] = {
0.8f, -0.8f, 0.0f,
-0.8f, -0.8f, 0.0f,
0.0f, 0.8f, 0.0f,
};
GLuint apos = static_cast(glGetAttribLocation(program, "aPosition"));
glEnableVertexAttribArray(apos);
glVertexAttribPointer(apos, 3, GL_FLOAT, GL_FALSE, 0, triangleVer);
/** 此处结束将数据传入图形渲染管线 **/
/** 此处开始将图像渲染到屏幕 **/
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 3);
eglSwapBuffers(display, winSurface);
/** 此处结束图像渲染 **/ 这里是渲染三角形的代码，glDrawArrays方法传入的图元类型是GL_TRIANGLE_STRIP，但是路要一步一步走，我们就先从最基本的点绘制开始吧。
在前几篇给的代码中，使用的都是直接获取着色器变量名的方式： GLuint apos = static_cast
还记得在一看就懂的OpenGL ES教程——这或许是你遇过最难画的三角形（二） 中GLSL一章节中曾经提到过layout修饰符：
layout是GLSL的几个修饰符中的一个，一般用来指定变量布局的，可以说是着色器和客户端程序或者其他阶段着色器的通信接口
何为变量的位置？你可以想象每一个着色器程序是一层楼，每个需要对接外部的变量住在一个个房间中，假如你现在是客户端的C++程序，你想给着色器里面某个变量传参，然后你又不知道变量名字，如果此时你知道变量所在的房间编号，那你照样还是可以将数据传给变量，就像一个蹑手蹑脚的间谍，偷偷打开对应location的房门，偷偷将一份机密文件交给里面的人（location对应变量）。所以layout加location的作用已经很明显了，你不需要房间里面住着谁（不用知道变量名称），只需要知道房间号（location），也能按成变量数值的传递。
（直到今日，我依旧想为我当初的比喻点赞）
于是在今天的例子，我们统一使用这个新特性吧～
C++音视频学习资料免费获取方法：关注音视频开发T哥，+「链接」即可免费获取2023年最新C++音视频开发进阶独家免费学习大礼包！
绘制点
点的图元类型为：
GL_POINTS表示每个顶点在屏幕上都是单独的点（想想一个点确实也玩不出其他花了）
于是渲染代码变为：
//三个点坐标
static float pointsVer[] = {
0.8f, -0.8f, 0.0f,
-0.8f, -0.8f, 0.0f,
0.0f, 0.8f, 0.0f,
};
//旧的传输数据方式，已经out了
// GLuint apos = static_cast(glGetAttribLocation(program, "aPosition"));
//通过layout传输数据，传给了着色器中layout为0的变量
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, pointsVer);
//打开layout为0的变量传输开关
glEnableVertexAttribArray(0);
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
//从第0个顶点开始，取三个顶点，绘制成三个点到后备缓冲区
glDrawArrays(GL_POINTS, 0, 3);
//窗口显示，交换后备缓冲区到前台
eglSwapBuffers(display, winSurface); 这里顶点属性数组传入的是6个浮点数，然后通过glVertexAttribPointer方法告知OpenGL如何解析这个顶点属性数组（如有不清楚，请看一看就懂的OpenGL ES教程——这或许是你遇过最难画的三角形（二）中的叙述），在这里，就是将三个顶点属性依次传给顶点着色器中layout为0的变量，那么顶点着色器现在是什么样子的呢：
#version 300 es
layout (location = 0)
in vec4 aPosition;//输入的顶点坐标，会在程序指定layout将数据输入到该字段
void main() {
//直接把传入的坐标值作为传入渲染管线。gl_Position是OpenGL内置的表示坐标的变量
gl_Position = aPosition;
//点的尺寸
gl_PointSize = 50.0;
}"注意这里需要指定点的尺寸，点在这里以正方形呈现，所以指定的就是正方形的边长。
片段着色器和上一篇一摸一样，只是给当前片段赋颜色值：
#version 300 es
precision mediump float;
out vec4 FragColor;
void main() {
//给当前片段赋颜色值
FragColor = vec4(1.0,0.5,0.5,1.0);
}于是乎顶点着色器执行3次，得到三个顶点的最终坐标，传到图形渲染管线中，执行完图元装配，光栅化之后，每个片段都执行一次片段着色器，于是乎再执行完渲染程序，三个小红点便跃然纸上：
那么绘制4个点呢？只要传入的顶点属性数组为4*3个，并通过glVertexAttribPointer方法告知OpenGL有4个顶点属性即可。以此类推～
绘制线段
说起绘制线段，OpenGL就开始展现他武器库之丰富了。
绘制线段的图元类型有3种，分别为：
GL_LINES
GL_LINE_LOOP
GL_LINE_STRIP 三者的区别在上一篇文章图元装配一章已经有所提及：
如果现在传入顶点着色器的顶点数组的元素分别为：v0,v1,v2,v3,v4,v5,v6,v7，那么对应的图元效果图如下所示：
相信在做列位看官都能理解它们的区别了，接下来就实践分别瞥一瞥它们各自的风采。
这次传4个点，依次每种图元看看效果：
//四个点坐标
static float lineVer[] = {
0.8f, -0.8f, 0.0f,
-0.8f, -0.8f, 0.0f,
0.0f, 0.8f, 0.0f,
0.4f, 0.8f, 0.0f,
};不过画线之前，别忘了要指定线段的宽度，不然宽度就是0，即一条抽象到看不见的线段。
//设置线段宽度
glLineWidth(20);GL_LINES：
glDrawArrays(GL_LINES, 0, 4);从第0个顶点开始，读取4个顶点，每两个组成一对连成线。
是屏幕下方两条红色横线，下面一条的顶点分别为0.8f, -0.8f, 0.0f和-0.8f, -0.8f, 0.0f,上面的线段顶点分别为0.0f, 0.8f, 0.0f和0.4f, 0.8f, 0.0f。
GL_LINE_STRIP:
glDrawArrays(GL_LINE_STRIP, 0, 4);这种是从第一个顶点开始一路连到到最后一个顶点。
GL_LINE_LOOP：
glDrawArrays(GL_LINE_LOOP, 0, 4);还是这种给力，一路连成闭环。
绘制三角形
画完线段，接下来就是开始令人兴奋的三角形了。而三角形，就更能体现OpenGL就开始展现他武器库之丰富，简直是东风快递、民兵、白杨皆有之。
顶点属性数组改为传入3个顶点属性（当然你要传4个也行，在后面读取的时候指定读取几个就可以了）：
static float triangleVer[] = {
0.8f, -0.8f, 0.0f,
-0.8f, -0.8f, 0.0f,
0.0f, 0.8f, 0.0f,
};三角形的图元类型也是三种，我们也来一一领略一番：
三角形的就比较复杂了：
这是官网的解释：
第一种GL_TRIANGLES是每三个顶点就分别连成一个三角形，也就是说把顶点数组每三个为一组分，互相之间没有瓜葛。
第二种GL_TRIANGLE_STRIP就比较牛逼了，从第0个顶点开始，每3个顶点连在一起形成三角形， v0,v1,v2为一个三角形，v1,v2，v3为一个三角形,v2，v3，v4为一个三角形依此类推。
如果顶点个数为n，则可以生成n-2个三角形。
第三种GL_TRIANGLE_FAN是谁是第一个顶点谁就拥有优先的绘图权（排在第一位的果真是大佬），第一个顶点会和后面每2个顶点为一组绘制三角形。v0,v1,v2为一个三角形，v0,v2，v3为一个三角形,v0，v3，v4为一个三角形依此类推。最后形成一个扇形形状。
用代码一一感受它们的风采吧：
首先用最简单的三个点绘制：
static float triangleVer[] = {
0.8f, -0.8f, 0.0f,
-0.8f, -0.8f, 0.0f,
0.0f, 0.8f, 0.0f,
};
//对于三个点来说，GL_TRIANGLES，GL_TRIANGLE_STRIP和GL_TRIANGLE_FAN绘制结果都一样
glDrawArrays(GL_TRIANGLES, 0, 3);开始玩点好玩的了。
将传入的顶点属性数组改为6个元素：
static float triangleVer[] = {
0.8f, 0.8f, 0.0f,
0.0f, 0.8f, 0.0f,
0.4f, 0.4f, 0.0f,
-0.8f, 0.5f, 0.0f,
-0.4f, 0.8f, 0.0f,
-0.8f, 0.8f, 0.0f,
};绘制顶点数目也改为6:
glDrawArrays(GL_TRIANGLES, 0, 6);尝试下GL_TRIANGLE_STRIP：
惊奇发现已经面目全非了，几乎看不到三角形的痕迹了。
再看下GL_TRIANGLE_FAN：
更加没有三角形痕迹了，v5还被抛弃了什么鬼。
为什么呢？按照前面对GL_TRIANGLE_FAN的讲解，v0，v4，v5会连成一个三角形，不过仔细看坐标就会发现，它们三个点是在一条直线上的，连不了三角形，索性直接抛弃了v5。
其实OpenGL之前是有四边形的图元类型的，但是在OpenGL3.1之后就被移除了，那这次就不讲了，那么问题来了，四边形要怎么绘制呢？
C++音视频学习资料免费获取方法：关注音视频开发T哥，+正在跳转即可免费获取2023年最新C++音视频开发进阶独家免费学习大礼包！
其实答案已经在上面了，通过GL_TRIANGLE_STRIP或者GL_TRIANGLE_FAN，只要给四个任何三个点不共线的点，就可以绘制出来。
三角形是最基本的图形，三角形三个点必然是共面的，所以在OpenGL的世界里，任何图形都可以通过三角形来构建。举个例子，画个正方形瞧瞧？
static float triangleVer[] = {
0.8f, 0.8f, 0.0f,
0.8f, -0.8f, 0.0f,
-0.8f, 0.8f, 0.0f,
-0.8f, -0.8f, 0.0f,
};使用GL_TRIANGLE_STRIP绘制：
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);show you the rectangle:
嗯？说好的正方形怎么变成长方形了。坐标上确实是正方形，但是因为坐标是按照比例系数传的并且手机屏幕是长方形的，所以无奈被拉长。不过也是有办法解决的，后面讲矩阵的博文就告诉你们答案。
总结
本文主要详细介绍了OpenGL es各种基本图元的绘制，通过本文的学习，各种基本图图元的绘制相信不在话下了，而且通过一些图元类型还可以玩出一些花了。现在距离一看就懂的OpenGL ES教程——这或许是你遇过最难画的三角形（一）中绘制三角形的终极任务只差那种看起来酷毙的绚烂的渐变色彩了，别急，还是那句话，*欲知后事如何*，*且听下回分解* 哈哈。下一篇文章一看就懂的OpenGL ES教程——这或许是你遇过最难画的三角形（五）
代码地址
opengl-es-study-demo （不断更新中）
参考
OpenGL官网Primitives Learn OpenGL
作者：半岛铁盒里的猫 链接：
https://juejin.cn/post/7144335420644392991 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
在开发的路上你不是一个人，欢迎加入C++音视频开发交流群「链接」大家庭讨论交流！