通俗易懂的 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/
图片来自: 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

感谢阅读!!

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

发布了13 篇原创文章 · 获赞 46 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/a8688555/article/details/82819646