字节流动

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

OpenGL 上下文是 OpenGL 运行的基础环境，包含了所有状态信息和资源，如纹理、缓冲对象、着色器程序等。它是一个状态机，所有 OpenGL 命令必须在已激活的上下文中执行。一个线程可以拥有多个上下文，但同一时间只能绑定一个。上下文之间可以通过共享方式创建，共享的资源包括纹理、着色器、程序等，但 FBO 和 VAO 不可共享。上下文销毁时，相关资源通常会被回收，但在共享上下文中，只要至少有一个上下文存在，资源就不会被销毁。

几何着色器（Geometry Shader）是 OpenGL 管线中的可选着色器阶段，位于顶点着色器（Vertex Shader） 和光栅化阶段 之间。其核心功能是基于输入的图元（如点、线或三角形），生成新的图元，或对输入的图元进行修改。

几何着色器（Geometry Shader） OpenGL 管线中的可选着色器阶段，位于顶点着色器（Vertex Shader） 和光栅化阶段 之间。其核心功能是基于输入的图元（如点、线或三角形），生成新的图元，或对输入的图元进行修改。输入是一个图元（例如一个点、线段或三角形）；输出可以是零个、一个或多个新的图元。几何着色器处理后，输出的是一个或多个新的图元将会被传递到光栅化阶段。光栅化负责将几何图形（如三角形）转换为片段（即潜在的像素），并为每个片段计算属性（如颜色、纹理坐标、深度等）。

每个 2D 方块需要 6 个顶点，每个顶点又是由一个 4 维向量（一个纹理坐标和一个顶点坐标）组成，因此我们将VBO 的内存分配为 6*4 个 float 的大小。片段着色器有两个 uniform 变量：一个是单颜色通道的字形位图纹理，另一个是文字的颜色，我们可以同调整它来改变最终输出的字体颜色。使用 FreeType 渲染中文和英文字符在流程上基本一致，都是根据字符的编码值来加载位图，然后上传纹理。，它小巧、高效、高度可定制，主要用于加载字体并将其渲染到位图，支持多种字体的相关操作。

在音视频或 OpenGL 开发中，文字渲染是一个高频使用的功能，比如制作一些酷炫的字幕、为视频添加水印、设置特殊字体等等。实际上 OpenGL 并没有定义渲染文字的方式，所以我们最能想到的办法是：将带有文字的图像上传到纹理，然后进行纹理贴图。本文分别介绍下在应用层和 C++ 层常用的文字渲染方式。

OpenGL ES 共享上下文时，可以共享哪些资源？

OpenGL ES 共享上下文时，可以共享哪些资源？共享上下文实现多线程渲染EGL 概念回顾查询绘图表面的可用类型和配置；，EGL 屏蔽了不同平台的差异（Apple 提供了自己的 EGL API 的 iOS 实现，自称 EAGL）。本地窗口相关的 API 提供了访问本地窗口系统的接口，而 E，接下来 OpenGL ES 就可以在这个渲染表面上绘制。egl、opengles 和设备之间的关系图片中：Display (EGLDisplay) 是对实际显示设备的抽象；

（应用程序编程接口）。它是标准 OpenGL 3D 图形库的一个子集，专门为资源受限的环境（如手机、平板电脑、游戏机和其他便携式设备）进行了优化。由于其在移动设备上的广泛适用性，OpenGL ES是学习移动3D图形编程的重要工具之一。随着技术的发展，新的图形 API（如 Vulkan 和 Metal ）也开始在移动平台上获得关注，但 OpenGL ES 仍然是一个重要的基准和学习起点。

OpenGL中的 glViewport 函数用于定义视口（Viewport），即确定窗口中显示的区域。

可能代表了一个空间坐标(x,y,z,w),或者代表了一个颜色(r,g,b,a),再或者代表一个纹理坐标(s,t,p,q)。下文中的 类型 T可以是 float, vec2, vec3, vec4,且可以逐分量操作.下文中的 类型 T可以是 float, vec2, vec3, vec4,且可以逐分量操作.下文中的 类型 T可以是 float, vec2, vec3, vec4,且可以逐分量操作.下文中的 类型 T可以是 float, vec2, vec3, vec4,且可以逐分量操作.

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）有哪些好处？：使用二进制形式的着色器程序可以更快地加载和解析，因为不需要进行编译和链接的过程。二进制数据可以直接加载到显卡驱动程序中进行处理，节省了编译和链接的时间。：由于二进制形式的着色器程序不包含可读的源代码，因此更难以逆向工程或进行代码分析。。