通俗易懂的 OpenGL ES 3.0（一）入门必备知识！！

前言

opengl的入门是个难点,因为在绘制出图形之前,你必须要学习一大堆的概念，以及部分图形知识。以至于在代码中不迷路-v-!!.接下来就通俗的讲解下部分概念知识。希望大家取其精华去其糟粕

温馨提示: blog阅读体验会好点
https://laishujie.coding.me/2018/09/23/通俗易懂的 OpenGL ES （一）入门必备知识/

顶点（Vertex）

     opengl物体图形都由点、线和多边形组成。而组成他们的关键就在于我们的顶点数据。就像画画在开始前会先画出大概的位置，opengl在绘制的时候也需要准备绘制的位置，而这些位置就是顶点，当顶点组合起来就是顶点坐标

举个例子：看下面的的蓝色小球就是我们说的顶点，而这些小球组合起来就是一组顶点坐标，从而组成我们的图形物体

坐标系

     opengl是一个3d的世界，由 x,y,z 坐标组成顶点坐标。画了一张图，应该会就比较好理解了

上面的图片也说的比较详细。就不详细解释了

着色器

     OpenGL编程语言是GLSL，就是我们说的着色器语言。语法上比较像c/c++。但是在这一基础上加上了许多适合图形处理的一些东西,比如一些针对向量和矩阵操作等。我们要图形渲染，就一定需要顶点着色器和一个简单的片元着色器

渲染基本过程

图片来自： https://learnopengl-cn.github.io/

对于上面的图形渲染管线的每个阶段。我们只需要编写这个顶点着色器和片段着色器。

确定位置与渲染的颜色

1.顶点着色器

     这个东西的主要作用是接受顶点数据，也是说通常是用来接受定义的顶点坐标，或者是一些关于矩阵变换，纹理生成和坐标变换等…。总的来说就是处理顶点数据

     简单的顶点着色器

#version 300 es

layout (location = 0) in vec3 aPos;

 // 为片段着色器指定一个颜色输出
out vec4 color;
void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
    color = vec4(0.5, 0.0, 0.0, 1.0);
}

aPos确定了位置之后，通过out字段输出渲染颜色了。这就要说到片段着色器

2.片段着色器

     最主要是确定渲染的颜色。就像画家调色板。

很多滤镜、美颜、图片处理。或者说抖音的一些特效，都可以用片元着色器编写。

最简单的片元着色器

//指定版本号和精度
#version 300 es
precision mediump float;
out vec4 fragColor;

//从顶点着色器传来的输入变量（名称相同、类型相同）
in vec4 color;
void main()
{
    //在通过out字段将颜色输出
    fragColor = color;
}

这样就可以通过顶点着色器为中介，接受颜色值在通过片段着色器输出了

实践的话，可以看看这篇文章，不过是用opengl2.0写的，与3.0差别不算很大，改改就好了

手把手带你实现抖音短视频特效

最后在说下2.0和3.0的不同的之处 (-V-!!

1. VAO (顶点数组对象：Vertex Array Object)

不知道你们2.0有没有用过这个vbo的东西，就是这个把顶点数据保存在显存中，绘制时直接从显存中取数据，减少了数据传输的开销，因为顶点数据多了，就是坐标的数据多了很多的很多组，切换的时候很麻烦，就出现了这个VAO，绑定对应的顶点数据

有空会出个文章说说这个vao和vbo是啥0v0.

2.语法方面的不同

1. attribute和varying。 取而代之的是 in和out
2. 头文件多了个#version 300 es
3. 还有纹理 texture2D和texture3D统统改为 texture
4. 内置函数gl_FragColor和gl_FragData删除，如果片段着色器要输出用out声明字段输出。不过保留了gl_Position
5. 还有的是layout的作用：可以直接指定位置

opengl 2.0
uniform  float intensity;
 // 代码 赋值
GLES20.glUniform1f(GLES20.glGetAttribLocation(program, "intensity"), 1f)

opengl 3.0
layout (location = 1) uniform  float intensity;

//直接写上对应的layout的值就可以赋值
GLES30.glUniform1f(1,1f) 

暂时就这些，有遗漏的可以补充！！-v-!

参考资料：
https://learnopengl-cn.github.io/
https://blog.csdn.net/junzia/article/details/52793354
https://blog.csdn.net/yanyan19880509/article/details/58325322

感谢阅读！！

知道了上面这这几个知识算是入门。当然还有许多都没有涉及到，比如,：矩阵变换、投影、光照、纹理…等等。有时间会像大家介绍更多的知识，希望大家看完有所收获吧！【完】