OpenGL ES 实现抖音传送带特效

最新推荐文章于 2024-04-28 22:15:05 发布
最新推荐文章于 2024-04-28 22:15:05 发布
阅读量3.1w 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： OpenGL ES 3.0 文章标签： 算法 OpenGLES 图形渲染 着色器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Kennethdroid/article/details/132656992
本文介绍了抖音传送带特效的原理和实现方法。通过分析，发现特效是通过不断拷贝预览图像形成传送效果，利用OpenGL进行渲染。文章提供了详细的实现思路，并提到了Android相机YUV到RGBA的转换，以及涉及的着色器程序。完整代码可在作者的GitHub项目中找到。

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

抖音 APP 真是个好东西，不过也容易上瘾，老实说你的抖音是不是反复卸载又反复安装了，后来我也发现我的几个 leader 都不刷抖音，这令我挺吃惊的。

我刷抖音主要是为了看新闻，听一些大 V 讲历史，研究抖音的一些算法特效，最重要的是抖音提供了一个年轻人的视角去观察世界。另外，自己感兴趣的内容看多了，反而训练抖音推送更多类似的优质内容，大家可以反向利用抖音的这一特点。

至于我的 leader 老是强调刷抖音不好，对此我并不完全认同。

实现抖音传送带特效
传送带

抖音传送带特效原理

抖音传送带特效推出已经很长一段时间了，前面也实现了下，最近把它整理出来了，如果你有仔细观测传送带特效，就会发现它的实现原理其实很简单。

传送带原理.png

通过

了解本专栏 订阅专栏 解锁全文 超级会员免费看
OpenGL ES 抖音“传送带“特效实现终极版
字节流动
12-15 2万+
很早之前的 demo 被翻出来了，最近有读者在知识星球上提问关于“传送带”特效性能的优化。这位读者按照这篇文章的思路，实现了“传送带”效果，但是遇到了性能问题。在优化性能之前先回顾下“传送带”效果的实现原理。
OpenGL ES 实现抖音“蓝线挑战”特效
字节流动
09-03 3万+
前面文章中我们实现了抖音传送带特效，发现大家普遍对抖音视频特效感兴趣，那么本文将继续这个抖音特效实现系列，后面也将带来更多的关于抖音视频特效分析和实现的文章。本文带给大家的是抖音的经典视频特效“蓝线挑战”实现，为啥选择“蓝线挑战”？之前这个特效没太在意，知道看到老罗直播团队用这个特效拍了一个短视频，发现挺有意思的。之前“蓝线挑战”特效有人实现过它的变种，但是看起来搞的有点复杂了，本文的实现思路就非常简单，抖音“蓝线挑战”和“传送带”实现原理基本相同：每次更新预览帧图像的特定区域进行渲染。抖音“蓝线挑战”特效
抖音传送带特效实战
郭霖
08-24 356
/今日科技快讯/近日，vivo内部通知将取消大小周，改为每周5天工作制。以下为vivo方面的内部群通知：经管理委员会研究决定，公司计划取消大小周工作制，改为每周5天工作制。各团...
Android 实现抖音传送带特效
最新发布
2401_84520093的博客
04-28 364
这是因为通过上面，我们可以知道，该特效是从左半部分的边缘区域开始运送的，那么如果我们从对应坐标取，那么不就得不到左半部分区域的坐标了吗，所有得偏移一个小格子的宽度，从而得到对应的数据 这样，每帧渲染时，都取。通过分析特效图，我们知道，图像右半部分是不断地向右边移动，而左半部分是正常预览的，看起来就好像是从左半部分的边缘处不断移动到右边，那么从这里可以得出一个小结论。在渲染的时候，会有两个纹理，一个是相机的正常预览纹理，另一个是保存的上一帧，此时，我们在着色器里就要进行判断。
OpenGL ES 3.0 从入门到精通系统性学习教程
字节流动
02-26 3万+
因为在工作中频繁使用 OpenGL ES 做一些特效、滤镜之类的效果，加上平时学到的的知识点也比较细碎，就想着去系统地学习下 OpenGL ES 相关开发知识，并将学习过程记录下来。
OpenGL ES 如何渲染 16bit 图像？
字节流动
12-28 2万+
既然直接使用 16bit 的格式不行，也不能直接使用 CPU 转换成 8bit 的图像（性能过慢），要想 GPU 直接处理 16bit 图像，我觉得可以利用 2 个通道 8bit 格式如 GL_LUMINANCE_ALPHA 或者 GL_RG8 完成加载 16bit 图像数据到纹理，然后采样的时候再将 2 个 8bit 数据转换成 16bit .我们在 shader 采样之后，每一个通道的值都会被归一化，8bit 归一化之前的范围是 0~255，16bit 归一化之前的范围是。文章首发于公众号：字节流动。
抖音、视频号流行的 Bokeh（虚化） 效果是怎么实现的？
字节流动
11-29 4万+
Bokeh 效果是指照片中背景模糊而主体清晰的一种摄影效果。这种效果是通过使用大光圈的镜头来实现的，使得光圈外的景物失去焦点，呈现出一种柔和、虚化的效果。
精选资源
iOS OpenGLES 实现抖音部分特效
07-09
iOS的一些示例，持续更新中：1、暗黑模式 2、AppleID登录应用 3、AVFoundation 高仿微信相机拍摄和编辑 4、AVFoundation 人脸检测 5、AVFoundation 实时滤镜 6、GPUImage框架的使用 7、音视频编解码 8、OpenGLES 9、...
精选资源
OpenGLCamera2:Android OpenGL Camera 2.0 实现 30 种滤镜和抖音特效
05-02
音视频录制可以参考项目，该项目基于 FFmpeg 和 Android Camera2.0 实现带滤镜的视频录制。 项目编译环境: Android Studio 4.1+ , NDK r21 滤镜展示 相关推荐 Android FFmpeg 音视频开发教程 联系交流 有疑问或技术...
OpenGL ES 3.0 开发（一）：绘制一个三角形
热门推荐
字节流动
07-12 8万+
该原创文章首发于微信公众号：字节流动 什么是 OpenGLES OpenGLES 全称 OpenGL for Embedded Systems ，是三维图形应用程序接口 OpenGL 的子集，本质上是一个跨编程语言、跨平台的编程接口规范，主要应用于嵌入式设备，如手机、平板等。由科纳斯（Khronos）组织定义和推广，科纳斯是一个图形软硬件行业协会，该协会主要关注图形和多媒体方面的开放标准。 O...
OpenGL ES 如何直接渲染 P010、P016 格式图像？
字节流动
01-02 5万+
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 数据，然后在进行归一化。
Android OpenGL ES FFmpeg 从入门到精通系统性学习教程
字节流动
06-19 5万+
为什么要写这个教程 目前这个 OpenGL ES 极简教程的更新暂时告一段落，说是教程，其实自知有种吹嘘的味道，很荣幸获得了阮一峰老师的推荐。 因为在工作中频繁使用 OpenGL ES 做一些特效、滤镜之类的效果，加上平时学到的的知识点也比较细碎，就想着去系统地学习下 OpenGL ES 相关开发知识，并将学习过程记录下来。 另外，这个 Android OpenGL ES 极简教程也是为音视频开发做准备的，它的内容涵盖了 OpenGL ES 3.0 的核心知识点，包含了 GLES3.0 的新特性，如 Tra
OpenGL ES 渲染 NV21、NV12、I420、YV12、YUYV、UYVY、I444（建议收藏）
字节流动
02-21 5万+
本文主要讲解常见的 YUV 格式图像渲染方式，如果对 YUV 格式不是很熟悉的同学可以翻看旧文，YUV 格式的介绍这里不再展开。
Android OpenGL 渲染图像读取哪家强
字节流动
10-28 5万+
该原创文章首发于微信公众号：字节流动 glReadPixels glReadPixels 是 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 (OpenGL) Compute Shader 计算着色器是怎么用的？
字节流动
02-25 5万+
OpenGL ES (OpenGL) Compute Shader 是怎么用的？Compute Shader 是 OpenGL ES（以及 OpenGL ）中的一种 Shader 程序类型，用于在GPU上执行通用计算任务。与传统的顶点着色器和片段着色器不同，Compute Shader 被设计用于在 GPU 上执行各种通用计算任务，而不是仅仅处理图形渲染。Compute Shader 使用场景广泛，除了图像处理之外，还可以用于物理模拟计算、数据加密解密、机器学习、光线追踪等。
OpenGL 实现“人像背景虚化“效果
字节流动
03-28 5万+
手机上的人像模式，也被人们称作“背景虚化”或 ”双摄虚化“ 模式，也称为 Bokeh 模式，能够在保持画面中指定的人或物体清晰的同时，将其他的背景模糊掉。突出画面的主体部分，主观上美感更强烈。，例如美颜、肤色优化以及基于深度信息的虚化等，最终提供清晰突出的人像照片。所以，人像模式的实现对于软件层面来说，关键还是有能精确输出带有深度（景深）信息的图像分割算法。
OpenGL ES 3.0 着色器程序二进制化
字节流动
07-27 4万+
之前有位读者提问：C++ 如何将 OpenGL ES 的着色器程序二进制（保存），然后在其他地方加载使用？现在写篇文章介绍下。将着色器程序二进制化（Shader Program Binary）有哪些好处？：使用二进制形式的着色器程序可以更快地加载和解析，因为不需要进行编译和链接的过程。二进制数据可以直接加载到显卡驱动程序中进行处理，节省了编译和链接的时间。：由于二进制形式的着色器程序不包含可读的源代码，因此更难以逆向工程或进行代码分析。。
OpenGL ES 渲染 NV21、NV12 格式图像有哪些“姿势”？
字节流动
01-29 4万+
前文提到，分别用于保存 Y plane 和 UV plane 的数据，然后在片段着色器中分别对 2 个纹理进行采样，转换成 RGB 数据。，其中 GL_LUMINANCE 纹理用来加载 NV21 Y Plane 的数据，GL_LUMINANCE_ALPHA 纹理用来加载 UV Plane 的数据。OpenGLES 常用纹理的格式类型GL_LUMINANCE 纹理在着色器中采样的纹理像素格式是（L，L，L，1），L 表示亮度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

字节流动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值