第16章视频渲染优化

课程目录第16章视频渲染优化

16、视频渲染优化：OpenGL ES渲染管线、自定义Renderer、视频帧处理与滤镜

视频渲染，说白了就是让画面流畅地显示在屏幕上。但WebRTC拿到的原始视频帧，往往需要经过一系列处理才能达到我们想要的效果。比如加个美颜滤镜、调整亮度、或者做画面合成。这些操作，都绕不开OpenGL ES。

我个人习惯把渲染优化分成三个层次：渲染管线理解、自定义Renderer实现、帧处理与滤镜。今天我们就一层层拆开来看。

OpenGL ES渲染管线：从数据到像素的流水线

先问一个问题：为什么视频渲染要用OpenGL ES，而不是直接用Canvas或者SurfaceView？

原因很简单——性能。OpenGL ES直接操作GPU，能实现硬件加速。而Canvas走的是CPU绘制，帧率一高就卡顿。我在项目中遇到过，用Canvas渲染720P视频，帧率只能跑到20fps左右，换成OpenGL ES后直接稳定30fps。

OpenGL ES的渲染管线，可以理解成一条流水线。数据从一端进去，经过几个固定步骤，最终变成屏幕上的像素。核心流程如下：

这里面有两个关键点：顶点着色器和片段着色器。前者负责处理顶点位置，后者负责处理每个像素的颜色。我们做滤镜效果，主要就是在片段着色器里动手脚。

💡 我的经验：刚开始学OpenGL ES时，别急着写复杂的着色器。先画一个三角形，把整个管线跑通，再慢慢加功能。我当年就是跳过了这一步，结果调试滤镜时花了两天时间才发现是顶点坐标写错了。

自定义Renderer：接管视频帧的渲染

WebRTC默认的渲染方式是把视频帧直接丢给SurfaceView。但如果我们想自己做处理，就需要自定义Renderer。

在Android上，自定义Renderer的核心是实现VideoSink接口。这个接口只有一个方法：onFrame(VideoFrame frame)。每次WebRTC拿到新帧，就会回调这个方法。

我建议的做法是这样的：

public class CustomVideoRenderer implements VideoSink {
    private OpenGLRenderer glRenderer;
    private EGLContext eglContext;
    
    @Override
    public void onFrame(VideoFrame frame) {
        // 1. 获取纹理ID
        int textureId = frame.getTextureBuffer()
            .getTextureId();
        
        // 2. 绑定EGL上下文
        eglContext.makeCurrent();
        
        // 3. 执行自定义渲染
        glRenderer.drawFrame(textureId);
        
        // 4. 释放帧
        frame.release();
    }
}

这里有个坑：EGL上下文的管理。WebRTC内部有自己的EGL上下文，如果我们直接拿过来用，可能会造成线程冲突。我曾经遇到过，在回调里直接操作纹理，结果画面闪烁得厉害。后来发现是EGL上下文没有正确同步。

⚠️ 避坑指南：我曾经在多个线程中同时操作同一个EGL上下文，导致GPU崩溃。正确的做法是：为渲染线程单独创建一个EGL上下文，并与WebRTC的上下文共享资源。使用eglCreateContext时传入共享上下文参数。

视频帧处理：从YUV到纹理的转换

WebRTC拿到的视频帧，可能是YUV格式，也可能是纹理格式。如果是YUV，我们需要先转换成纹理，才能用OpenGL ES处理。

转换流程其实不复杂：

创建纹理：用glGenTextures生成一个纹理ID
上传数据：把YUV数据上传到纹理，注意要设置正确的格式
渲染：用着色器把纹理绘制到屏幕上

但这里有个性能问题：CPU和GPU之间的数据传输。每次把YUV数据从CPU拷贝到GPU，都会消耗带宽。我建议的做法是：如果可能，尽量让WebRTC直接输出纹理格式。在创建PeerConnectionFactory时，可以设置VideoEncoderFactory和VideoDecoderFactory，让它们直接操作纹理。

// 推荐：使用纹理模式
PeerConnectionFactory factory = PeerConnectionFactory.builder()
    .setVideoEncoderFactory(new SoftwareVideoEncoderFactory())
    .setVideoDecoderFactory(new SoftwareVideoDecoderFactory())
    .createPeerConnectionFactory();

// 不推荐：使用YUV模式（性能差）
// 默认就是YUV模式，需要额外转换

📊 性能对比：

模式	CPU占用	GPU占用	延迟
纹理模式	低	中	低
YUV模式	高	低	中

实际项目中，纹理模式比YUV模式帧率高约20%。

滤镜实现：在片段着色器中做文章

滤镜的本质，就是修改片段着色器中的像素颜色。比如灰度滤镜，就是把RGB转换成灰度值。

一个简单的灰度滤镜着色器长这样：

// 片段着色器 - 灰度滤镜
precision mediump float;
uniform sampler2D uTexture;
varying vec2 vTexCoord;

void main() {
    vec4 color = texture2D(uTexture, vTexCoord);
    float gray = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b;
    gl_FragColor = vec4(gray, gray, gray, color.a);
}

你想想看，这个着色器其实只做了一件事：把RGB三个通道加权求和，然后赋值给三个通道。权重系数0.299、0.587、0.114是标准的人眼亮度感知系数。

更复杂的滤镜，比如美颜、磨皮，就需要用到卷积核了。原理是取当前像素周围一圈像素的值，做加权平均。这需要用到textureOffset或者手动计算相邻纹理坐标。

💡 我的经验：写滤镜着色器时，一定要在真机上测试。模拟器上的GPU和真机差异很大。我曾经在模拟器上调试好的滤镜，放到真机上颜色完全不对。后来发现是模拟器不支持某些精度修饰符。

性能优化：别让渲染成为瓶颈

视频渲染优化，最终要落到性能上。我总结了几个关键点：

减少纹理切换：每次切换纹理都是一次开销。尽量把多个画面合成到一张纹理上。
使用VBO/VAO：顶点数据不要每次都上传，用顶点缓冲对象缓存起来。
避免CPU等待：用glFinish或glFlush时要注意，这会阻塞CPU。我建议用eglSwapBuffers的异步模式。
控制帧率：不是帧率越高越好。30fps已经足够流畅，再高只会增加GPU负担。

嗯，这里要注意：不要在主线程做渲染。WebRTC的回调线程和UI线程是分开的。如果你在回调里直接操作UI，会引发ANR。我建议单独开一个渲染线程，用Handler或者Looper来管理。

  🔧 实战建议：如果你要做多人视频会议，每个视频流都开一个独立的Renderer是不现实的。更好的做法是：用一个Renderer管理多个纹理，通过坐标变换把多个画面排列到同一个Surface上。这样只需要一次绘制调用，性能会好很多。

最后说一句：OpenGL ES的学习曲线确实陡峭，但一旦掌握了，你会发现视频渲染的世界豁然开朗。从简单的滤镜到复杂的画面合成，再到AR特效，底层都是这些基础概念。别怕，慢慢来。

📚 课程目录

16、视频渲染优化：OpenGL ES渲染管线、自定义Renderer、视频帧处理与滤镜

OpenGL ES渲染管线：从数据到像素的流水线

自定义Renderer：接管视频帧的渲染

视频帧处理：从YUV到纹理的转换

滤镜实现：在片段着色器中做文章

性能优化：别让渲染成为瓶颈