ExoPlayer视频滤镜终极实战不写一行着色器也能玩转OpenGL特效的3条捷径【免费下载链接】ExoPlayerAn extensible media player for Android项目地址: https://gitcode.com/gh_mirrors/exop/ExoPlayer在短视频赛道上滤镜就是播放器的化妆师。你想给视频加上怀旧、灰度、高对比这些效果但一看OpenGL着色器语法就头大别急着劝退——作为Android官方推荐的媒体引擎ExoPlayer把视频滤镜这件事拆得足够友好既有开箱即用的官方内置效果也留好了自定义的扩展缝。这篇文章不绕弯子直接给你三条从易到难的通路哪怕你完全没碰过GLSL也能在半小时内让画面改头换面。读完这篇你能带走这些干货先列个清单方便你对照验收每一条都能直接落地✅ 看清ExoPlayer渲染流水线一帧视频在显示前被谁处理、在哪一步插入特效✅ 一行代码接入官方滤镜灰度、反色、通道调色、亮度、对比度全都有现成实现✅ 手写自定义滤镜的完整套路实现GlEffect接口 复写绘制方法结构清晰不玄学✅ 借用官方GL Demo快速验证效果不用搭完整工程就能跑起滤镜对比✅ 避坑清单纹理泄漏、分辨率变化、HDR兼容这些老坑提前绕开一、先看数据流一帧画面从解码到屏幕经历了什么理解滤镜关键是找到下手的时机。ExoPlayer中视频帧的旅程大致是解码器产出帧 → 送入视频帧处理器 → 逐帧绘制到OpenGL纹理 → 呈现到屏幕。其中可插拔的一环就是VideoFrameProcessor视频帧处理器。它像一个帧中转站接收每一帧允许你在显示前对它做处理。而具体怎么处理由一系列效果对象决定。效果对象的长相是统一接口GlEffect——官方对这个接口的注释说得很直白它负责把效果转换为一个着色器程序。源码位置在library/effect/src/main/java/com/google/android/exoplayer2/effect/GlEffect.java配合它的着色器程序基类library/effect/src/main/java/com/google/android/exoplayer2/effect/GlShaderProgram.java通俗理解GlEffect是效果说明书GlShaderProgram是按说明书干活的流水线工人。你只需要写说明书干活的细节框架帮你扛。二、捷径一一行代码调用官方内置滤镜好消息来了官方在library/effect模块里已经内置了一批常用滤镜你不写任何GLSL就能直接使用。灰度与反色RgbFilterRgbFilter提供两种工厂方法按字面意思理解就行// 灰度滤镜 RgbFilter grayscale RgbFilter.createGrayscaleFilter(); // 反色滤镜 RgbFilter inverted RgbFilter.createInvertedFilter();别小看这两行灰度矩阵的取值是有讲究的官方针对SDR与HDR分别采用了BT.709与BT.2020亮度系数你在实现假灰度时容易踩的坑官方已经替你填平了。源码可见library/effect/src/main/java/com/google/android/exoplayer2/effect/RgbFilter.java通道调色RgbAdjustment想单独把画面调暖偏红或调冷偏蓝用RgbAdjustment的 Builder 调节RGB三通道的缩放系数RgbAdjustment warm new RgbAdjustment.Builder() .setRedScale(1.3f) // 红色加强 .setGreenScale(1.0f) .setBlueScale(0.8f) // 蓝色减弱 .build();参数范围要求非负默认值为1即不变超出范围会直接抛异常提醒你安全又贴心。亮度、对比度、HSL更多现成组件同一个包下还有一批效果类都是开箱即用效果类作用典型场景Brightness调节亮度夜间素材提亮Contrast调节对比度增强画面通透感HslAdjustment色相/饱和度/亮度综合调节网红同款滤镜RgbFilter灰度/反色文艺片、暗黑风RgbAdjustment通道加权冷暖色调 小技巧HslAdjustment支持同时调整色相、饱和度、明度实现小红书风的淡雅滤镜一个对象就够不必叠三四个效果。如何把效果挂到播放/转码链路上以离线转码场景为例效果通过Effects对象注入Effects effects new Effects( /* audioProcessors */ ImmutableList.of(), /* videoEffects */ ImmutableList.of(RgbFilter.createGrayscaleFilter())); EditedMediaItem item new EditedMediaItem.Builder(mediaItem) .setEffects(effects) .build();Effects构造器第一个参数是音频处理器列表第二个是视频效果列表——注意视频效果都必须是GlEffect实例。相关入口在library/transformer/src/main/java/com/google/android/exoplayer2/transformer/EditedMediaItem.java三、捷径二手写GlEffect自定义滤镜的完整套路官方内置不够用想复刻复古胶片这种专属质感这时候就该自己写效果类了。套路固定为两步实现GlEffect接口复写单帧绘制逻辑。先看效果类本体以怀旧棕褐色滤镜为例public final class SepiaEffect implements GlEffect { Override public GlShaderProgram toGlShaderProgram(Context context, boolean useHdr) throws VideoFrameProcessingException { // useHdr为true表示输入来自HDR源颜色处于线性RGB BT.2020空间 return new SingleFrameGlShaderProgram(useHdr) { Override public Size configure(int inputWidth, int inputHeight) { // 输出尺寸与输入一致 return new Size(inputWidth, inputHeight); } Override public void drawFrame(int inputTexId, long presentationTimeUs) throws VideoFrameProcessingException { // 此处用 GlProgram 绑定着色器、设置uniform并绘制 } }; } }逐块拆解你就懂了toGlShaderProgram这是GlEffect唯一的抽象方法返回一个着色器程序实例。返回值是匿名的SingleFrameGlShaderProgram子类——它约定每输入一帧恰好输出一帧很适合单帧滤镜。configure在绘制第一帧前调用告诉管线输出纹理的尺寸。这里保持同尺寸即可。drawFrame真正的魔术发生地。你拿到输入纹理ID把纹理采样后做像素运算再写回输出缓冲区。GL的样板代码纹理绑定、顶点属性、清屏、drawArrays可参考官方demos/gl里的BitmapOverlayVideoProcessor它把一整套流程写得很清晰demos/gl/src/main/java/com/google/android/exoplayer2/gldemo/BitmapOverlayVideoProcessor.java着色器片段片段着色器决定像素最终颜色大致长这样precision mediump float; uniform sampler2D uTexSampler; varying vec2 vTexCoord; void main() { vec4 color texture2D(uTexSampler, vTexCoord); float r color.r * 0.393 color.g * 0.769 color.b * 0.189; float g color.r * 0.349 color.g * 0.686 color.b * 0.168; float b color.r * 0.272 color.g * 0.534 color.b * 0.131; gl_FragColor vec4(min(r, 1.0), min(g, 1.0), min(b, 1.0), color.a); }⚠️ 常见坑这段着色器里对R/G/B用了三组不同加权系数这是怀旧棕褐的经典配方。如果你照抄灰度的等权系数出来的会是一张灰图而不是怀旧图。想调整风格改这三组系数即可。四、捷径三借用官方GL Demo快速验证不想先搭完整工程官方demos/gl模块就是一个现成的滤镜试验田。它的核心思路是视频通过GLSurfaceView渲染处理逻辑注入在自定义的VideoProcessor里。demos/gl/src/main/java/com/google/android/exoplayer2/gldemo/VideoProcessingGLSurfaceView.java官方示例演示了在视频上叠加水印/时间戳的完整流程两步走准备着色器资源assets目录下的两个glsl文件就是你的起点一个管顶点位置bitmap_overlay_video_processor_vertex.glsl一个管像素着色bitmap_overlay_video_processor_fragment.glsl。在draw回调里做叠加先用Canvas把要叠加的内容画到Bitmap再作为第二张纹理绑定给着色器与视频帧纹理一起采样输出。// 伪代码思路完整版见 BitmapOverlayVideoProcessor program.setSamplerTexIdUniform(uTexSampler0, frameTexture, /* texUnitIndex */ 0); program.setSamplerTexIdUniform(uTexSampler1, overlayTexture, /* texUnitIndex */ 1); GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, /* first */ 0, /* count */ 4); 小技巧draw方法里的frameTimestampUs是当前帧的时间戳你可以把它渲染成文字叠在画面上——这就是帧号水印效果调试卡顿帧特别好用。五、性能优化与避坑FAQ最后聊最容易被新手忽略的部分滤镜跑通了但帧率掉得厉害怎么办对照下面这些问题自查Q1为什么切换滤镜后内存疯涨A大概率是纹理没释放。继承BaseGlShaderProgram时输出纹理池由框架管理但你自己的叠加纹理、临时Bitmap必须手动回收。官方release方法里调用了outputTexturePool.deleteAllTextures()你自己的资源也要跟着delete()。Q2多个滤镜叠加性能开销翻倍怎么办A把能合并的像素运算合并进同一个着色器。比如灰度提亮完全可以一个shader搞定而不是挂两个效果各跑一遍绘制。绘制次数是性能的关键杠杆。Q3视频分辨率变化时会闪屏或黑屏吗A会但能防。BaseGlShaderProgram.configure的注释明确要求首次绘制前、以及后续输入尺寸变化时都必须重新调用。在你自己的configure里及时重建纹理缓冲即可。Q4HDR素材和普通素材能共用一套滤镜吗A不能直接通用。toGlShaderProgram的useHdr参数就是干这个的——HDR输入的像素处于BT.2020色彩空间灰度系数、调色矩阵都要跟着换官方RgbFilter就分别维护了SDR/HDR两套矩阵。六、下一步往哪走回顾一下今天的收获你摸清了ExoPlayer视频滤镜的渲染入口VideoFrameProcessor学会了三招——用官方内置滤镜零代码换风格、实现GlEffect自定义专属效果、用GL Demo快速做验证还拿到了四条避坑经验。进阶方向给你指两条路深入算法library/effect包下的HslAdjustment、ColorLut颜色查找表值得精读后者是实现一整套网红滤镜的高性能方案。扩展玩法BitmapOverlay、TextOverlay这类叠加效果类是做贴纸、字幕、水印的现成积木。老规矩动手跑起来才算学会——找个素材先给播放器套一层灰度再试着改出你自己的赛博朋克配色。下一期我们来聊聊如何用ColorLut把抖音式的滤镜切帧做到毫秒级不卡顿敬请期待。【免费下载链接】ExoPlayerAn extensible media player for Android项目地址: https://gitcode.com/gh_mirrors/exop/ExoPlayer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考