Android双纹理渲染与GPUImageTwoInputFilter详解

1. GPUImageTwoInputFilter 核心架构解析

作为 Android 美颜相机开发中的核心组件，GPUImageTwoInputFilter 承担着双纹理混合渲染的关键任务。这个类继承自 GPUImageFilter，在保留单纹理处理能力的基础上，新增了对第二纹理的支持。其架构设计体现了典型的 OpenGL ES 渲染管线思维，我们可以从三个维度来理解其设计哲学：

纹理处理流水线：

1. 纹理输入阶段：通过 setBitmap() 方法将 Android Bitmap 转换为 OpenGL 纹理
2. 坐标处理阶段：使用 TextureRotationUtil 处理纹理旋转和翻转
3. 渲染准备阶段：在 onDrawArraysPre() 中完成纹理单元绑定和坐标传递
4. 着色器处理阶段：顶点着色器处理坐标传递，片段着色器实现具体混合算法

多纹理管理机制：

• 采用 GL_TEXTURE3 作为第二纹理单元（主纹理通常使用 GL_TEXTURE0）
• 通过 filterSourceTexture2 保存纹理 ID
• 使用 filterInputTextureUniform2 维护着色器中的纹理引用
• 纹理坐标通过独立的 ByteBuffer 传递

生命周期管控：

• onInit() 初始化着色器程序和相关句柄
• onInitialized() 处理延迟的纹理加载
• onDestroy() 负责资源释放
• runOnDraw() 确保 OpenGL 操作在正确线程执行

关键提示：在实际开发中，第二纹理单元的选择需要避开平台保留的纹理单元。某些设备上 GL_TEXTURE0-GL_TEXTURE2 可能被系统占用，这就是示例中选择 GL_TEXTURE3 的原因。

2. 双纹理渲染核心技术实现

2.1 纹理加载与绑定流程

setBitmap() 方法的实现展示了 Android Bitmap 到 OpenGL 纹理的完整转换过程：

java复制public void setBitmap(final Bitmap bitmap) {
    if (bitmap != null && bitmap.isRecycled()) {
        return;
    }
    this.bitmap = bitmap;
    if (this.bitmap == null) {
        return;
    }
    
    runOnDraw(new Runnable() {
        public void run() {
            if (filterSourceTexture2 == OpenGlUtils.NO_TEXTURE) {
                if (bitmap == null || bitmap.isRecycled()) {
                    return;
                }
                GLES20.glActiveTexture(GLES20.GL_TEXTURE3);
                filterSourceTexture2 = OpenGlUtils.loadTexture(bitmap, OpenGlUtils.NO_TEXTURE, false);
            }
        }
    });
}

这个流程包含几个关键技术点：

1. 线程安全处理：通过 runOnDraw 确保在 OpenGL 渲染线程执行
2. 纹理复用检查：filterSourceTexture2 == NO_TEXTURE 判断是否需要新建纹理
3. 纹理单元激活：glActiveTexture 选择纹理单元
4. 纹理加载：OpenGlUtils.loadTexture 封装了复杂的纹理创建和上传过程

2.2 顶点着色器设计原理

双输入滤镜的顶点着色器代码看似简单，却蕴含着重要的设计考量：

glsl复制attribute vec4 position;
attribute vec4 inputTextureCoordinate;
attribute vec4 inputTextureCoordinate2;
 
varying vec2 textureCoordinate;
varying vec2 textureCoordinate2;
 
void main()
{
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
    textureCoordinate2 = inputTextureCoordinate2.xy;
}

关键设计要点：

• 使用 vec4 统一接口：虽然纹理坐标只需 xy 分量，但保持 vec4 类型与顶点位置一致
• 明确的变量命名：inputTextureCoordinate2 明确表示第二纹理输入
• 最小化计算：仅做必要的数据传递，不包含复杂变换
• 兼容性考虑：保持与单输入滤镜相似的结构，便于框架扩展

2.3 渲染前准备操作

onDrawArraysPre() 方法完成了渲染前的最后准备工作：

java复制@Override
protected void onDrawArraysPre() {
    GLES20.glEnableVertexAttribArray(filterSecondTextureCoordinateAttribute);
    GLES20.glActiveTexture(GLES20.GL_TEXTURE3);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, filterSourceTexture2);
    GLES20.glUniform1i(filterInputTextureUniform2, 3);

    texture2CoordinatesBuffer.position(0);
    GLES20.glVertexAttribPointer(filterSecondTextureCoordinateAttribute, 2, GLES20.GL_FLOAT, false, 0, texture2CoordinatesBuffer);
}

这个方法的操作顺序非常重要：

1. 先启用顶点属性数组
2. 然后激活并绑定纹理
3. 接着设置 uniform 变量
4. 最后配置顶点属性指针

任何顺序错误都可能导致渲染异常，这是新手常见的错误点。

3. 性能优化与最佳实践

3.1 纹理内存管理

在移动设备上，纹理内存是非常宝贵的资源。GPUImageTwoInputFilter 提供了完善的内存管理机制：

java复制public void onDestroy() {
    super.onDestroy();
    GLES20.glDeleteTextures(1, new int[]{filterSourceTexture2}, 0);
    filterSourceTexture2 = OpenGlUtils.NO_TEXTURE;
}

public void recycleBitmap() {
    if (bitmap != null && !bitmap.isRecycled()) {
        bitmap.recycle();
        bitmap = null;
    }
}

最佳实践建议：

1. 在 Activity/Fragment 的 onDestroy 中调用 onDestroy()
2. 不再使用的 Bitmap 立即调用 recycleBitmap()
3. 避免频繁创建/销毁纹理，考虑纹理复用池
4. 大尺寸纹理使用后立即释放

3.2 线程安全策略

OpenGL 操作必须发生在创建 OpenGL 上下文的线程。GPUImageTwoInputFilter 通过 runOnDraw 机制保证线程安全：

java复制runOnDraw(new Runnable() {
    public void run() {
        // OpenGL 操作
    }
});

实际开发中需要注意：

1. 所有涉及纹理、着色器的操作都应放在 runOnDraw 中
2. 避免在非 GL 线程持有 OpenGL 资源引用
3. 跨线程通信使用 Handler 或 EventBus
4. 考虑使用双缓冲机制减少线程阻塞

3.3 纹理参数优化

虽然示例中使用的是默认纹理参数，但在实际项目中可以根据需求优化：

java复制// 在 loadTexture 后可以添加这些优化
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

参数选择建议：

• 静态图片使用 GL_LINEAR 过滤
• 视频流考虑 GL_NEAREST 提高性能
• 边缘处理通常选择 CLAMP_TO_EDGE
• 特殊效果可能需要 MIPMAP

4. 高级应用与扩展

4.1 多纹理混合算法

在片段着色器中可以实现各种混合效果，以下是几种常见算法示例：

1. 普通叠加：

glsl复制gl_FragColor = color1 + color2;

2. 正片叠底：

glsl复制gl_FragColor = color1 * color2;

3. 屏幕混合：

glsl复制gl_FragColor = 1.0 - (1.0 - color1) * (1.0 - color2);

4. 透明度混合：

glsl复制gl_FragColor = mix(color1, color2, color2.a);

5. 强光混合：

glsl复制vec3 result;
if (color2.r > 0.5)
    result.r = 1.0 - (1.0 - 2.0 * (color2.r - 0.5)) * (1.0 - color1.r);
else
    result.r = 2.0 * color2.r * color1.r;
// 同样处理 g 和 b 分量
gl_FragColor = vec4(result, 1.0);

4.2 动态纹理更新

对于需要频繁更新的第二纹理（如视频帧），可以优化更新流程：

java复制public void updateBitmap(final Bitmap newBitmap) {
    if (newBitmap == null || newBitmap.isRecycled()) {
        return;
    }
    
    runOnDraw(new Runnable() {
        public void run() {
            if (filterSourceTexture2 == OpenGlUtils.NO_TEXTURE) {
                // 首次创建纹理
                GLES20.glActiveTexture(GLES20.GL_TEXTURE3);
                filterSourceTexture2 = OpenGlUtils.loadTexture(newBitmap, OpenGlUtils.NO_TEXTURE, false);
            } else {
                // 更新现有纹理
                GLES20.glActiveTexture(GLES20.GL_TEXTURE3);
                GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, filterSourceTexture2);
                GLUtils.texSubImage2D(GLES20.GL_TEXTURE_2D, 0, 0, 0, newBitmap);
            }
            
            // 更新引用
            if (bitmap != null && !bitmap.isRecycled()) {
                bitmap.recycle();
            }
            bitmap = newBitmap;
        }
    });
}

这种实现避免了频繁创建/销毁纹理的开销，特别适合视频处理场景。

4.3 性能监控与调优

在实际项目中，我们需要监控双纹理渲染的性能表现。可以添加以下监控代码：

java复制// 在渲染循环开始前
long startTime = System.nanoTime();

// 在渲染循环结束后
long duration = (System.nanoTime() - startTime) / 1000000;
if (duration > 16) {  // 超过16ms意味着可能掉帧
    Log.w("Performance", "Frame rendering took " + duration + "ms");
}

// 检查GL错误
int error = GLES20.glGetError();
if (error != GLES20.GL_NO_ERROR) {
    Log.e("GL Error", "OpenGL error: " + error);
}

常见性能优化手段：

1. 降低纹理分辨率
2. 简化片段着色器计算
3. 使用纹理压缩格式
4. 减少纹理切换次数
5. 合理使用 FBO 离屏渲染

5. 常见问题与解决方案

5.1 纹理显示异常排查

当第二纹理显示不正常时，可以按照以下步骤排查：

1. 检查纹理加载：

   • 确认 Bitmap 未回收且有效
   • 检查 glActiveTexture 和 glBindTexture 调用
   • 验证 loadTexture 返回值是否有效

2. 检查着色器：

   • 确认片段着色器中有 inputImageTexture2 声明
   • 检查纹理坐标变量名是否匹配
   • 验证 uniform 位置获取是否成功

3. 检查渲染流程：

   • 确保 onDrawArraysPre 被调用
   • 检查纹理单元编号一致性
   • 验证顶点数据是否正确上传

5.2 内存泄漏预防

双纹理渲染中常见的内存问题包括：

1. Bitmap 未回收：

   • 每次替换 Bitmap 前回收旧的
   • 在 onDestroy 中强制回收

2. 纹理未删除：

   • 确保调用 onDestroy
   • 处理 Activity 重建场景

3. 缓冲区未释放：

   • 大型 ByteBuffer 使用后置空
   • 考虑使用 native 方法直接释放

5.3 跨设备兼容性问题

不同 Android 设备上的 OpenGL 实现可能有差异，需要注意：

1. 纹理尺寸限制：

   • 通过 GLES20.glGetIntegerv 查询最大纹理尺寸
   • 大图需要分块处理

2. 扩展支持：

   • 检查 GL_OES_EGL_image_external 等扩展
   • 提供降级方案

3. 精度问题：

   • 着色器中明确声明精度
   • 测试不同 GPU 的表现

6. 实战：美颜相机中的双纹理应用

在美颜相机开发中，GPUImageTwoInputFilter 有多种典型应用场景：

6.1 贴纸叠加实现

java复制// 创建贴纸滤镜
GPUImageTwoInputFilter stickerFilter = new GPUImageTwoInputFilter(
    "precision mediump float;" +
    "varying vec2 textureCoordinate;" +
    "varying vec2 textureCoordinate2;" +
    "uniform sampler2D inputImageTexture;" +
    "uniform sampler2D inputImageTexture2;" +
    "void main() {" +
    "   vec4 base = texture2D(inputImageTexture, textureCoordinate);" +
    "   vec4 sticker = texture2D(inputImageTexture2, textureCoordinate2);" +
    "   gl_FragColor = mix(base, sticker, sticker.a);" +
    "}"
);

// 加载贴纸
Bitmap stickerBitmap = BitmapFactory.decodeResource(resources, R.drawable.sticker);
stickerFilter.setBitmap(stickerBitmap);

// 添加到处理链
gpuImage.setFilter(stickerFilter);

6.2 美颜遮罩处理

java复制// 创建遮罩滤镜
GPUImageTwoInputFilter maskFilter = new GPUImageTwoInputFilter(
    "precision highp float;" +
    "uniform sampler2D inputImageTexture;" +
    "uniform sampler2D inputImageTexture2;" +
    "varying vec2 textureCoordinate;" +
    "varying vec2 textureCoordinate2;" +
    "void main() {" +
    "   vec4 origin = texture2D(inputImageTexture, textureCoordinate);" +
    "   vec4 mask = texture2D(inputImageTexture2, textureCoordinate2);" +
    "   float intensity = mask.r * 0.3 + mask.g * 0.59 + mask.b * 0.11;" +
    "   origin.rgb = origin.rgb * (1.0 + intensity * 0.5);" + // 提亮效果
    "   gl_FragColor = origin;" +
    "}"
);

// 加载遮罩图
Bitmap maskBitmap = createVignetteMask(width, height);
maskFilter.setBitmap(maskBitmap);

6.3 动态滤镜混合

java复制// 创建混合滤镜
GPUImageTwoInputFilter blendFilter = new GPUImageTwoInputFilter(
    "uniform sampler2D inputImageTexture;" +
    "uniform sampler2D inputImageTexture2;" +
    "uniform float mixRatio;" +  // 动态混合比例
    "varying vec2 textureCoordinate;" +
    "varying vec2 textureCoordinate2;" +
    "void main() {" +
    "   vec4 color1 = texture2D(inputImageTexture, textureCoordinate);" +
    "   vec4 color2 = texture2D(inputImageTexture2, textureCoordinate2);" +
    "   gl_FragColor = mix(color1, color2, mixRatio);" +
    "}"
);

// 设置第二纹理
blendFilter.setBitmap(effectBitmap);

// 动态更新混合比例
blendFilter.setFloat("mixRatio", 0.5f);  // 0-1之间变化

在实际项目中，我们可以组合多个 GPUImageTwoInputFilter 实现复杂的效果链，每个滤镜处理特定的效果，最终叠加出专业级的美颜相机效果。