add notes

CharonChui · CharonChui · commit 6521d4f08861 · 2020-03-19T23:25:48.000+08:00
diff --git a/VideoDevelopment/OpenGL/1.OpenGL简介.md b/VideoDevelopment/OpenGL/1.OpenGL简介.md
@@ -1,13 +1,13 @@
 ## 1.OpenGL简介
 
+最近想要在播放器上做一个效果，需要用到OpenGL，一直以来也没关注学习过，就想着学习学习。在网上已经有很多文章，这里为什么还要写？主要是因为在学的时候发现那些文章看完后还是雨里雾里的不明白。要不就是不连贯，要不就是各种错误，各种理解的不对，导致我稀里糊涂的，干脆我不看了，买了一本书，看了书之后再去看文章就彻底明白了，所以我想写一个简单的，能从入门开始一步步学习的，能简单的学会，文章里面有一些是从下面写的参考链接中拷贝过来的，也有一些是自己从书上看的。
+
 [OpenGL官网](https://www.opengl.org/)
 
 OpenGL(Open Graphics Library开放图形库)是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口。
 
 OpenGL的前身是硅谷图形功能(SGI)公司为其图形工作站开发的IRIS GL,后来因为IRIS GL的移植性不好，所以在其基础上，开发出了OpenGl。OpenGl一般用于在图形工作站，PC端使用，由于性能各方面原因，在移动端使用OpenGl基本带不动。为此，Khronos公司就为OpenGl提供了一个子集，OpenGl ES(OpenGl for Embedded System)。
 
-网上已经有很多文章，这里为什么还要写？主要是因为最近在学的时候发现那些文章看完后还是雨里雾里的不明白。我想写一个简单的，能从入门开始一步步学习的，能简单的学会，文章里面有一些是从下面写的参考链接中拷贝过来的，也有一些是自己从书上看的。
-
 
 ### OpenGL ES
 
diff --git a/VideoDevelopment/OpenGL/10.GLSurfaceView+MediaPlayer播放视频.md b/VideoDevelopment/OpenGL/10.GLSurfaceView+MediaPlayer播放视频.md
@@ -1,12 +1,58 @@
 ## 10.GLSurfaceView+MediaPlayer播放视频
 
+### 相机预览
 
+1. 在GLSurfaceView.Render中创建一个纹理，再使用该纹理创建一个SurfaceTexture。
+2. 使用该SurfaceTexture创建一个Surface传给相机，相机预览数据就会输出到这个纹理上了。
+3. 使用GLSurfaceView.Render将该纹理渲染到GLSurfaceView的窗口上。
+4. 使用SurfaceTexture的setOnFrameAvailableListener方法给SurfaceTexture添加一个数据帧可用的监听器，在监听器中调用GLSurfaceView的requestRender方法渲染该帧数据，这样相机每次输出一帧数据就可以渲染一次，在GLSurfaceView窗口中就可以看到相机的预览数据了。
 
-平时的视频播放都是使用mediaplayer+textureview或者mediaplayer+surfaceview，但是如果我们要对视频进行一些OpenGL的操作，打个比方说我要在视频播放的时候添加一个滤镜，这个时候就需要用都SurfaceTexture了。
+- 顶点着色器
+
+  ```xml
+  #version 300 es
+  
+  layout (location = 0) in vec4 a_Position;
+  layout (location = 1) in vec2 a_texCoord;
+  
+  out vec2 v_texCoord;
+  
+  void main()
+  {
+      gl_Position = a_Position;
+      v_texCoord = a_texCoord;
+  }
+  ```
+
+- 片段着色器
+
+  这里需要注意一下，就是做相机预览的话，纹理的类型需要使用samplerExternalOES，而不是之前渲染图片的sampler2D。
+
+  ```xml
+  #version 300 es
+  #extension GL_OES_EGL_image_external_essl3 : require
+  precision mediump float;
+  
+  in vec2 v_texCoord;
+  out vec4 outColor;
+  uniform samplerExternalOES s_texture;
+  
+  void main(){
+      outColor = texture(s_texture, v_texCoord);
+  }
+  ```
+
+  
 
 
 
-### TextureView+MediaPlayer播放视频
+
+
+
+
+### 视频播放
+
+平时的视频播放都是使用mediaplayer+textureview或者mediaplayer+surfaceview，但是如果我们要对视频进行一些OpenGL的操作，打个比方说我要在视频播放的时候添加一个滤镜，这个时候就需要用都SurfaceTexture了。
 
 ```java
 public class VideoActivity extends Activity {
diff --git a/VideoDevelopment/OpenGL/11.OpenGL ES滤镜.md b/VideoDevelopment/OpenGL/11.OpenGL ES滤镜.md
@@ -1,6 +1,46 @@
 ## 11.OpenGL ES滤镜
 
-滤镜其实就是利用纹理。
+给图像添加滤镜本质就是图片处理，也就是对图片的像素进行计算，简单来说，图像处理的方法可以分为三类:  
+
+- 点算:当前像素的处理只和自身的像素值有关，和其他像素无关，比如灰度处理。
+- 领域算:当前像素的处理需要和相邻的一定范围内的像素有关，比如高斯模糊。
+- 全局算:在全局上对所有像素进行统一变换，比如几何变换。
+
+### 灰色滤镜
+
+和前一篇文章基本一样，只是修改一下片段着色器的代码，原理就是在片段着色器中去处理颜色，让RGB三个通道的颜色取均值:   
+
+```
+#version 300 es
+#extension GL_OES_EGL_image_external_essl3 : require
+precision mediump float;
+
+in vec2 v_texCoord;
+out vec4 outColor;
+uniform samplerExternalOES s_texture;
+
+//灰度滤镜，具体去处理颜色
+void grey(inout vec4 color){
+    float weightMean = color.r * 0.3 + color.g * 0.59 + color.b * 0.11;
+    color.r = color.g = color.b = weightMean;
+}
+
+void main(){
+    //拿到颜色值
+    vec4 tmpColor = texture(s_texture, v_texCoord);
+    //对颜色值进行处理
+    grey(tmpColor);
+    //将处理后的颜色值输出到颜色缓冲区
+    outColor = tmpColor;
+}
+
+```
+
+
+
+
+
+
 
 滤镜的编写主要是靠基类。
 
@@ -16,14 +56,63 @@
 
 RGB三个通道的颜色取反，而alpha通道不变。
 
-### 灰色滤镜
+```gl
+//反向滤镜
+void reverse(inout vec4 color){
+    color.r = 1.0 - color.r;
+    color.g = 1.0 - color.g;
+    color.b = 1.0 - color.b;
+}
+
+```
+
+### 黑白滤镜
+
+```gals
+//黑白滤镜
+void blackAndWhite(inout vec4 color){
+    float threshold = 0.5;
+    float mean = (color.r + color.g + color.b) / 3.0;
+    color.r = color.g = color.b = mean >= threshold ? 1.0 : 0.0;
+}
+```
+
 
-让RGB三个通道的颜色取均值
 
 ### 位移滤镜
 
 纹理默认传入的读取范围是(0,0)到(1,1)内的颜色值。如果对读取的位置进行调整修改，那么就可以做出各种各样的效果，例如缩放动画就是让读取的范围改成(-1,-1)到(2,2)。
 
+## 看完了疯了是不是，要做个滤镜效果，各种计算我实在弄不明白
+
+最简单的方法就是通过LUT方法，通过设计师提供的LUT文件来实现预定的滤镜效果。基本思路如下：  
+
+- 准备LUT文件
+- 加载LUT文件到OpenGL纹理
+- 将纹理传递给片段着色器
+- 根据LUT，在片段着色器中对图像的颜色值进行映射，得到滤镜后的颜色进行输出
+
+
+
+### 离屏渲染
+
+之前已经将相机的预览数据输出到OpenGL的纹理上，渲染的时候OpenGL直接将纹理渲染到屏幕上。但是如果想要对纹理进行进一步的处理，就不能直接渲染到屏幕上，而是需要先渲染到屏幕外的缓冲区(FrameBuffer)处理完后再渲染到屏幕。渲染到缓冲区的操作就是离屏渲染。主要步骤如下:   
+
+- 准备离屏渲染所需要的FrameBuffer和纹理对象。
+- 切换渲染目标(屏幕->缓冲区)
+- 执行渲染
+- 重置渲染目标(缓冲区 -> 屏幕)
+
+
+
+
+
+
+
+
+
+
+
 
 
 
diff --git a/VideoDevelopment/OpenGL/5.OpenGL ES绘制三角形.md b/VideoDevelopment/OpenGL/5.OpenGL ES绘制三角形.md
@@ -113,9 +113,9 @@ Preferences -> Plugins -> 搜GLSL Support安装就可以了。
   ```glsl
   // 声明着色器的版本
   #version 300 es
-  // 顶点着色器的顶点位置，输入一个名为vPosition的4分量向量，layout (location = 0)表示这个变量的位置是顶点属性0。
+  // 顶点着色器的顶点位置，输入一个名为vPosition的4分量向量，layout (location = 0)表示这个变量的位置是顶点属性中的第0个属性。
   layout (location = 0) in vec4 vPosition;
-  // 顶点着色器的顶点颜色数据，输入一个名为aColor的4分量向量，layout (location = 1)表示这个变量的位置是顶点属性1。
+  // 顶点着色器的顶点颜色数据，输入一个名为aColor的4分量向量，layout (location = 1)表示这个变量的位置是顶点属性中的第1个属性。
   layout (location = 1) in vec4 aColor;
   // 输出一个名为vColor的4分量向量，后面输入到片段着色器中。
   out vec4 vColor;
@@ -129,6 +129,8 @@ Preferences -> Plugins -> 搜GLSL Support安装就可以了。
   }
   ```
 
+  大体意思：使用OpenGL ES3.0版本，将图形顶点数据采用4分向量的数据结构绑定到着色器的第0个属性上，属性的名字是vPosition，然后再有一个颜色的4分向量绑定到做色漆的第1个属性上，属性的名字是aColor，另外还会输出一个vColor，着色器执行的时候，会将vPosition的值传递给用来表示顶点最终位置的内建变量gl_Position，将顶点最终大小的gl_PointSize设置为10，并将aColor的值复制给要输出额vColor。
+
 - 片段着色器(fragment_simple_shade.glsl)
 
   ```glsl
@@ -211,12 +213,12 @@ class MyGLRenderer implements GLSurfaceView.Renderer {
     /*****************1.声明绘制图形的坐标和颜色数据 end**************/
     public MyGLRenderer() {
         /****************2.为顶点位置及颜色申请本地内存 start************/
-        //顶点位置相关
+        //将顶点数据拷贝映射到native内存中，以便OpenGL能够访问
         //分配本地内存空间,每个浮点型占4字节空间；将坐标数据转换为FloatBuffer，用以传入给OpenGL ES程序
-        vertexBuffer = ByteBuffer.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
-                .order(ByteOrder.nativeOrder())
-                .asFloatBuffer();
-        vertexBuffer.put(triangleCoords);
+        vertexBuffer = ByteBuffer.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT) // 直接分配native内存
+                .order(ByteOrder.nativeOrder()) // 和本地平台保持一致的字节序
+                .asFloatBuffer(); // 将底层字节映射到FloatBuffer实例，方便使用
+        vertexBuffer.put(triangleCoords); // 将顶点数据拷贝到native内存中
         // 将数组数据put进buffer之后，指针并不是在首位，所以一定要position到0，至关重要！否则会有很多奇妙的错误！将缓冲区的指针移动到头部，保证数据是从最开始处读取
         vertexBuffer.position(0);
 
@@ -258,9 +260,10 @@ class MyGLRenderer implements GLSurfaceView.Renderer {
         //把颜色缓冲区设置为我们预设的颜色，绘图设计到多种缓冲区类型:颜色、深度和模板。这里只是向颜色缓冲区中绘制图形
         GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT);
 
-        //绑定vertex坐标数据，告诉OpenGL可以在缓冲区vertextBuffer中获取数据
+        //0是上面着色器中写的vPosition的变量位置(location = 0)。意思就是绑定vertex坐标数据，然后将在vertextBuffer中的顶点数据传给vPosition变量。
+        // 你肯定会想，如果我在着色器中不写呢？int vposition = glGetAttribLocation(program, "vPosition");就可以获得他的属性位置了
         GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 0, vertexBuffer);
-        //启用顶点位置句柄
+        //启用顶点变量，这个0也是vPosition在着色器变量中的位置，和上面一样，在着色器文件中的location=0声明的
         GLES30.glEnableVertexAttribArray(0);
 
         //准备颜色数据
diff --git a/VideoDevelopment/OpenGL/9.OpenGL ES纹理.md b/VideoDevelopment/OpenGL/9.OpenGL ES纹理.md
@@ -28,8 +28,6 @@ OpenGL中，2D纹理也有自己的坐标体系，取值范围在(0,0)到(1,1)
 
 纹理上的每个顶点与定点坐标上的顶点一一对应。如下图，左边是顶点坐标，右边是纹理坐标，只要两个坐标的ABCD定义顺序一致，就可以正常地映射出对应的图形。顶点坐标内光栅化后的每个片段，都会在纹理坐标内取得对应的颜色值。
 
-
-
 ![](https://raw.githubusercontent.com/CharonChui/Pictures/master/opengl_es_texture_position.jpg)
 
 ### 纹理尺寸
@@ -38,7 +36,7 @@ OpenGL中，2D纹理也有自己的坐标体系，取值范围在(0,0)到(1,1)
 
 ### 文件读取
 
-OpenGL不能直接加载jpg或者png这类被编码的压缩格式，需要加载原始数据，也就是bitmpa。我们在内置图片到工程中，应该将图片放到drawable-nodpi中，避免读取时被压缩，通过BitmapFactory解码读取图片时，要设置为非缩放的方式，即options.isScaled=false。
+OpenGL不能直接加载jpg或者png这类被编码的压缩格式，需要加载原始数据，也就是bitmap。我们在内置图片到工程中，应该将图片放到drawable-nodpi中，避免读取时被压缩，通过BitmapFactory解码读取图片时，要设置为非缩放的方式，即options.isScaled=false。
 
 ### 纹理过滤
 
@@ -212,7 +210,7 @@ public class TextureHelper {
   in vec2 vTexCoord;
   out vec4 vFragColor;
   void main() {
-  		// texture函数会从纹理贴图中读取
+  		// texture函数会将传进来的纹理和坐标进行差值采样，输出到颜色缓冲区。
       vFragColor = texture(uTextureUnit,vTexCoord);
   }
   ```
@@ -262,6 +260,7 @@ public class TextureHelper {
        * 坐标占用的向量个数
        */
       private static final int POSITION_COMPONENT_COUNT = 2;
+      // 逆时针顺序排列
       private static final float[] POINT_DATA = {
               -0.5f, -0.5f,
               0.5f, -0.5f,
@@ -272,6 +271,7 @@ public class TextureHelper {
        * 颜色占用的向量个数
        */
       private static final int TEXTURE_COMPONENT_COUNT = 2;
+      // 纹理坐标(s, t)，t坐标方向和顶点y坐标反着
       private static final float[] TEXTURE_DATA = {
               0.0f, 1.0f,
               1.0f, 1.0f,
@@ -313,10 +313,11 @@ public class TextureHelper {
           //在OpenGLES环境中使用程序
           GLES30.glUseProgram(mProgram);
   
-  
+  				// 获取这三个属性在着色器中的属性位置
           uMatrixLocation = GLES30.glGetUniformLocation(mProgram, "u_Matrix");
           aPositionLocation = GLES30.glGetAttribLocation(mProgram, "vPosition");
           aTextureLocation = GLES30.glGetAttribLocation(mProgram, "aTextureCoord");
+          // 将图片加载进来生成位图
           textureId = TextureHelper.loadTexture(MyApplication.getInstance(), R.drawable.img).getTextureId();
       }
   
@@ -344,12 +345,12 @@ public class TextureHelper {
   
           //将变换矩阵传入顶点渲染器
           GLES20.glUniformMatrix4fv(uMatrixLocation, 1, false, mProjectionMatrix, 0);
-          //准备坐标数据
+          //传入坐标数据
           GLES30.glVertexAttribPointer(aPositionLocation, POSITION_COMPONENT_COUNT, GLES30.GL_FLOAT, false, 0, vertexBuffer);
           //启用顶点位置句柄
           GLES30.glEnableVertexAttribArray(aPositionLocation);
   
-          //准备颜色数据
+          //传入颜色数据
           GLES30.glVertexAttribPointer(aTextureLocation, TEXTURE_COMPONENT_COUNT, GLES30.GL_FLOAT, false, 0, textureBuffer);
           //启用顶点颜色句柄
           GLES30.glEnableVertexAttribArray(aTextureLocation);
