字节流动

因为在工作中频繁使用 OpenGL ES 做一些特效、滤镜之类的效果，加上平时学到的的知识点也比较细碎，就想着去系统地学习下 OpenGL ES 相关开发知识，并将学习过程记录下来。

最近知识星球的一位同学，面试时被问到：纹理贴图必须要输入顶点坐标或纹理坐标吗？他一下子被这个问题问蒙了，虽然他知道正确答案是否定的，但是说不上来理由。这个就引出了文本提到的这种方法通常用于后处理效果，例如屏幕空间效果（屏幕空间反射、屏幕空间环境光遮蔽等），其中整个屏幕的片段都需要处理。通过生成全屏三角形，可以避免显式地传递顶点数据，从而简化管线配置。

EGL 是 OpenGL ES 和本地窗口系统（Native Window System）之间的通信接口与设备的原生窗口系统通信；查询绘图表面的可用类型和配置；创建绘图表面；在OpenGL ES 和其他图形渲染API之间同步渲染；管理纹理贴图等渲染资源。OpenGL ES 的平台无关性正是借助 EGL 实现的，EGL 屏蔽了不同平台的差异（Apple 提供了自己的 EGL API 的 iOS 实现，自称 EAGL）。

**OpenGL PBO（Pixel Buffer Object），被称为像素缓冲区对象，主要被用于异步像素传输操作。PBO 仅用于执行像素传输，不连接到纹理，且与 FBO （帧缓冲区对象）无关。**

多重采样抗锯齿（MSAA，Multisample Anti-Aliasing）是一种用于减少图形渲染中锯齿（aliasing）效应的技术。

VBO（Vertex Buffer Object）是指顶点缓冲区对象，VAO（Vertex Array Object）是指顶点数组对象。OpenGL ES 2.0 编程中，用于绘制的顶点数组数据首先保存在 CPU 内存，在调用 glDrawArrays 或者 glDrawElements 等进行绘制时，需要将顶点数组数据从 CPU 内存拷贝到显存。但是很多时候我们没必要每次绘制的时候都去进行内存拷贝，如果可以在显存中缓存这些数据，就可以在很大程度上降低内存拷贝带来的开销。

手机上的人像模式，也被人们称作“背景虚化”或 ”双摄虚化“ 模式，也称为 Bokeh 模式，能够在保持画面中指定的人或物体清晰的同时，将其他的背景模糊掉。突出画面的主体部分，主观上美感更强烈。，例如美颜、肤色优化以及基于深度信息的虚化等，最终提供清晰突出的人像照片。所以，人像模式的实现对于软件层面来说，关键还是有能精确输出带有深度（景深）信息的图像分割算法。

OpenGL ES (OpenGL) Compute Shader 是怎么用的？Compute Shader 是 OpenGL ES（以及 OpenGL ）中的一种 Shader 程序类型，用于在GPU上执行通用计算任务。与传统的顶点着色器和片段着色器不同，Compute Shader 被设计用于在 GPU 上执行各种通用计算任务，而不是仅仅处理图形渲染。Compute Shader 使用场景广泛，除了图像处理之外，还可以用于物理模拟计算、数据加密解密、机器学习、光线追踪等。

本文主要讲解常见的 YUV 格式图像渲染方式，如果对 YUV 格式不是很熟悉的同学可以翻看旧文，YUV 格式的介绍这里不再展开。

前文提到，分别用于保存 Y plane 和 UV plane 的数据，然后在片段着色器中分别对 2 个纹理进行采样，转换成 RGB 数据。，其中 GL_LUMINANCE 纹理用来加载 NV21 Y Plane 的数据，GL_LUMINANCE_ALPHA 纹理用来加载 UV Plane 的数据。OpenGLES 常用纹理的格式类型GL_LUMINANCE 纹理在着色器中采样的纹理像素格式是（L，L，L，1），L 表示亮度。

用于识别图像中物体之间的边界。常用于目标检测、图像分割和计算机视觉任务。常见的边缘检测算法包括Sobel、Prewitt、Canny等。（Image Erosion）：用于缩小或消除图像中物体的边界。主要用于去除图像中的小细节、噪声或不规则物体。，本文再介绍一下图像基本处理之腐蚀、膨胀和边缘检测，它们在图像处理和计算机视觉领域有着广泛的应用。：用于增大或突出图像中物体的边界。主要用于连接图像中的物体，填充小孔或缝隙，以及强调物体的边缘。

图像锐化是一种图像处理技术，其目的是增强图像中的细节和边缘，使图像看起来更加清晰。这一过程通常涉及到突出图像中的高频信息，特别是强调像素之间的灰度变化。通过增强图像的高频细节，图像锐化可以改善图像在人类视觉系统和计算机视觉系统中的感知效果。图像锐化处理的目的是为了使图像的边缘、轮廓线以及图像的细节变得清晰，经过平滑的图像变得模糊的根本原因是因为图像受到了平均或积分运算，因此可以对其进行逆运算(如微分运算,其实这里用的是差分)就可以使图像变得清晰。

P010 最早是微软定义的格式，表示的是 YUV 4:2:0 的采样方式，也就是说 P010 表示的是一类 YUV 格式，它的内存排布方式可能是 NV21、NV12、YU12、YV12。P016 也表示的是 YUV 4:2:0 的采样方式，与 P010 的差异只是有效位不同，P010 的有效位是 10bit , P016 有效位为 16bit。，在 Shader 中采样的时候，把 RG 通道当成 v 分量数据，把 BA 通道当成 u 分量数据，分别转成 16bit 数据，然后在进行归一化。

既然直接使用 16bit 的格式不行，也不能直接使用 CPU 转换成 8bit 的图像（性能过慢），要想 GPU 直接处理 16bit 图像，我觉得可以利用 2 个通道 8bit 格式如 GL_LUMINANCE_ALPHA 或者 GL_RG8 完成加载 16bit 图像数据到纹理，然后采样的时候再将 2 个 8bit 数据转换成 16bit .我们在 shader 采样之后，每一个通道的值都会被归一化，8bit 归一化之前的范围是 0~255，16bit 归一化之前的范围是。文章首发于公众号：字节流动。

如果绑定了帧缓冲区对象，则附件可能包含 GL_COLOR_ATTACHMENTi、GL_DEPTH_ATTACHMENT、GL_STENCIL_ATTACHMENT 或 GL_DEPTH_STENCIL_ATTACHMENT。有这个例子它的使用场景就比较好理解了，上述多重采样场景结束之后就用不到多重采样缓冲区 mMSAAFramebuffer 绑定的深度缓冲区了，可以将其内容设置为无效。有了帧缓冲区失效机制，GPU 就可以删除不再需要的顿缓冲区内容，以减少每个帧保留的内容数量。

很早之前的 demo 被翻出来了，最近有读者在知识星球上提问关于“传送带”特效性能的优化。这位读者按照这篇文章的思路，实现了“传送带”效果，但是遇到了性能问题。在优化性能之前先回顾下“传送带”效果的实现原理。

未经作者（微信ID：Byte-Flow）允许，禁止转载文章首发于公众号：字节流动之前转载过知乎上面的一篇文章：作者：这是上帝的杰作链接：https://zhuanlan.zhihu.com/p/344110917文章详细讲解了 Shader 实现“热成像”效果的思路，但是并没有给出完整的实现代码，后台有读者多次催促，希望我能实现下并给出完整的代码，于是，今天晚上就花了一点时间简单实现了下这个效果。，其中发光这一步不大重要。

Bokeh 效果是指照片中背景模糊而主体清晰的一种摄影效果。这种效果是通过使用大光圈的镜头来实现的，使得光圈外的景物失去焦点，呈现出一种柔和、虚化的效果。

未经作者（微信ID：Byte-Flow）允许，禁止转载文章首发于公众号：字节流动早上知识星球里的一位同学，遇到 yuv2rgb 偏色问题，这个问题比较典型，今天展开说一下。

该原创文章首发于微信公众号：字节流动未经作者（微信ID：Byte-Flow）允许，禁止转载。

玩过 P 图软件的朋友一定对这个功能有所了解，P 图我们可以简单地看做，基于这个原理，我们可以手动实现瘦脸、长腿、瘦腰、大眼、丰胸等等一系列效果，从而达到美颜、美型的目的。我们将一个区域的像素移走以后，那么用什么来填充这个被"掏空"的区域呢？

前面文章中我们实现了抖音传送带特效，发现大家普遍对抖音视频特效感兴趣，那么本文将继续这个抖音特效实现系列，后面也将带来更多的关于抖音视频特效分析和实现的文章。本文带给大家的是抖音的经典视频特效“蓝线挑战”实现，为啥选择“蓝线挑战”？之前这个特效没太在意，知道看到老罗直播团队用这个特效拍了一个短视频，发现挺有意思的。之前“蓝线挑战”特效有人实现过它的变种，但是看起来搞的有点复杂了，本文的实现思路就非常简单，抖音“蓝线挑战”和“传送带”实现原理基本相同：每次更新预览帧图像的特定区域进行渲染。抖音“蓝线挑战”特效

Android 相机出图是 YUV 格式的，这里为了拷贝处理方便，先使用 OpenCV 将 YUV 图像转换为 RGBA 格式，当然为了追求性能直接使用 YUV 格式的图像问题也不大。

未经作者（微信ID：Byte-Flow）允许，禁止转载使用 OpenGL 做图像的转场效果或者图片轮播器，可以实现很多令人惊艳的效果。

FBO（Frame Buffer Object）即帧缓冲区对象，实际上是一个可添加缓冲区的容器，可以为其添加纹理或渲染缓冲区对象（RBO）。FBO 本身不能用于渲染，只有添加了纹理或者渲染缓冲区之后才能作为渲染目标，它仅且提供了 3 种附着（Attachment），分别是颜色附着、深度附着和模板附着。RBO（Render Buffer Object）即渲染缓冲区对象，是一个由应用程序分配的 2D 图像缓冲区。渲染缓冲区可以用于分配和存储颜色、深度或者模板值，可以用作 FBO 中的颜色、深度或者模板附着。

OpenGL PBO（Pixel Buffer Object）被称为像素缓冲区对象，主要被用于异步像素传输操作。PBO 仅用于执行像素传输，不连接到纹理，且与 FBO （帧缓冲区对象）无关。**

OpenGL ES 利用抠图算法实现人像留色。

之前写过一篇 OpenGL 使用 shader 实现 RGBA 转 YUYV 的文章，有几位读者大人在后台建议写一篇 shader 实现 RGBA 转 NV21 的文章，因为在实践中 NV21 格式用的比较多，于是我今天把这篇文章放出来。关于 YUV 图像的知识和看图工具，可以参考下面的推送，本文不再赘述。一文掌握 YUV 图像的基本处理OpenGL 完成图像的渲染后，很多情况下需要将渲染后的图像读取到内存进行下一步处理，这个时候使用 glReadPixels 直接读高分辨率的图像（RGBA）往往会带来性能

关于 YUV 图像的相关知识这里也贴出来一些链接，供不熟悉的同学查阅。

前面文章，我们介绍了利用人像抠图算法生成的 mask 图，然后结合 OpenGL 可以产生一些有趣的效果。抠图技术应用很广泛，比如很多手机的相机自带“人像留色”滤镜：人体区域保留彩色，人体区域之外灰度化。所以人像留色的关键技术在于高精度高性能的分割算法。本文将基于开源的人像抠图算法模型和 OpenGL 做一个实时的人像分割 app , 该 app 目前已开源，感兴趣的同学可以参考该项目利用matting算法做一些有趣的特效。。模型类封装的非常简单，Process 执行分割输出分割结果和 mask 图。

之前有位读者提问：C++ 如何将 OpenGL ES 的着色器程序二进制（保存），然后在其他地方加载使用？现在写篇文章介绍下。将着色器程序二进制化（Shader Program Binary）有哪些好处？：使用二进制形式的着色器程序可以更快地加载和解析，因为不需要进行编译和链接的过程。二进制数据可以直接加载到显卡驱动程序中进行处理，节省了编译和链接的时间。：由于二进制形式的着色器程序不包含可读的源代码，因此更难以逆向工程或进行代码分析。。

最近，有位读者大人在后台反馈：在参加一场面试的时候，面试官要求他用 shader 实现图像格式 RGB 转 YUV ，他听了之后一脸懵，然后悻悻地对面试官说，他只用 shader 做过 YUV 转 RGB，不知道 RGB 转 YUV 是个什么思路。针对他的这个疑惑，今天专门写文章介绍一下如何使用 OpenGL 实现 RGB 到 YUV 的图像格式转换，帮助读者大人化解此类问题。YUV 看图工具推荐有读者大人让推荐一个 YUV 看图软件，由于手头的工具没法分享出来，又在 Github 上找了一圈发现这.

该原创文章首发于微信公众号：字节流动最后不少朋友问，“OpenGL ES 入门后怎么学习写一些滤镜？”，“怎么学习 shader ？”。最近请教了一些大佬，他们一致认为正确的做法就是“去模仿”。先去模仿别人的滤镜怎么实现的，比如观察抖音的一些简单的滤镜，然后自己琢磨去实现一个。当然，最有效率的方法是研究一些相关的开源项目，比如大名鼎鼎的 android-gpuimage 项目，该项目基本上实现了各种常见滤镜，上手容易，学习 shader 、熟悉 GLSL 或者对 OpenGL 滤镜感兴趣的同学，可.

OpenGL ES 代码：glTexImage2D ( GL_TEXTURE_2D, 0, GL_R16UI, width, height, 0, GL_RED_INTEGER, GL_UNSIGNED_SHORT, data);shader 中使用：uniform highp usampler2D s_texture;float h = float(texture ( s_texture, a_position.xy ).r);参考https://stackoverflow.com/que

面试中经常被问到的 OpenGL ES 对象，你知道的有哪些？该原创文章首发于微信公众号：字节流动VBO 和 EBOVBO（Vertex Buffer Object）是指顶点缓冲区对象，而 EBO（Element Buffer Object）是指图元索引缓冲区对象，VAO 和 EBO 实际上是对同一类 Buffer 按照用途的不同称呼。OpenGL ES 2.0 编程中，用于绘制的顶点数组数据首先保存在 CPU 内存，在调用 glDrawArrays 或者 glDrawElements 等进行绘

该原创文章首发于微信公众号：字节流动如何传输一个超大数组给着色器程序？在 OpenGL ES 图形图像处理中，会经常遇到一种情况：将一个超大的数组传给着色器程序。目前常用的有三种方式：使用将数组加载到 2D 纹理的方式，然后使用 texelFetch 取数据；使用 uniform 缓冲区对象，即 UBO ;使用纹理缓冲区对象，即 TBO 。将数组加载到纹理使用将数组加载到纹理的方式来传输大数组，是最容易想到的一种方式。要想精确地换取每个像素的值，这个时候就不能使用采样函数 text.

该原创文章首发于微信公众号：字节流动glReadPixelsglReadPixels 是 OpenGL ES 的 API ，OpenGL ES 2.0 和 3.0 均支持。 使用非常方便，下面一行代码即可搞定，但是效率也是最低的。glReadPixels(0, 0, outImage.width, outImage.height, GL_RGBA, GL_UNSIGNED_BYTE, buffer);当调用 glReadPixels 时，首先会影响 CPU 时钟周期，同时 GPU 会等待当前帧.

该原创文章首发于微信公众号：字节流动上文 OpenGL ES 多目标渲染（MRT） 中我们了解了利用 MRT 技术可以一次渲染到多个缓冲区，本文将利用帧缓冲区位块传送实现高性能缓冲区之间的像素拷贝。OpenGL ES 帧缓冲区位块传送帧缓冲区位块传送（Blit）也是 OpenGL ES 3.0 的新特性，主要用于帧缓冲区之间的像素拷贝，性能高且使用方便，可以指定缓冲区任意矩形区域的像素拷贝。本文的绘制流程是，新建一个 FBO 绑定纹理作为颜色附着，然后绑定该帧缓冲区进行一次离屏渲染，最后绑定.

该原创文章首发于微信公众号：字节流动OpenGL ES 多目标渲染OpenGL ES 多目标渲染（MRT），即多重渲染目标，是 OpenGL ES 3.0 新特性，它允许应用程序一次渲染到多个缓冲区。利用 MRT 技术，片段着色器可以输出多个颜色，可以用于保存 RGBA 颜色、 法线、 深度信息或者纹理坐标，每个颜色连接一个颜色缓冲区。就目前接触的 MRT 技术，在图形图像算法中比较常用，主要用于获取算法中间结果、底图或者 Mask ，也用于多种高级渲染算法中，例如延迟着色和快速环境遮蔽估算。.

字节流动 OpenGLES 技术交流群之前根据自己学习 OpenGLES　的心路历程，将自己的学习过程和在项目中的简单应用记录下来，形成了一个 Android OpenGLES 系统性的学习专辑。Android OpenGL ES 从入门到精通系统性学习教程很荣幸获得一些大佬的推荐，然后陆陆续续有不少朋友加我好友，强烈要求我建一个相关的技术交流群。刚好最近有精力折腾这个事情，索性就建了一个技术交流群，欢迎扫码进群:技术交流群主要讨论 OpenGL ES 相关技术问题，大家有遇到相关的疑问、难题，