Camera2 教程 6：FBO实现滤镜预览

作者: 古风子 | 来源:发表于2020-03-26 22:38 被阅读0次

青橙相机

两个简单滤镜切换

通过上两个章节的实现，我们实现了相机预览，因为是通过opengl实现，因此，可以通过改变不同的着色器程序，
实现不同的预览效果，也就是不同的滤镜效果

正常预览的片元着色器程序：

uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

void main()
{
  #从对应纹理位置取颜色值
  gl_FragColor = texture2D(inputImageTexture, textureCoordinate);
}

黑白滤镜效果片元着色器程序:


uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;

const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main() {
    //从对应纹理位置取颜色值
    lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    float luminance = dot(textureColor.rgb, W);
    gl_FragColor = vec4(vec3(luminance), textureColor.w);

}

因此通过动态切换着色器程序，我们可以实现不同的滤镜效果

预览滤镜切换

预览滤镜切换核心代码：

首先，基于基类JImageOESFilter，只需要替换成黑白片元着色器(gray_oes_fragment_shader)即可

public class JImageOESGrayFilter extends  JImageOESFilter{
    public JImageOESGrayFilter(Context context) {
       super(context);
        vertexShader = Utils.readShaderFromResource(context, R.raw.base_oes_vertex_shader);
        fragmentShader = Utils.readShaderFromResource(context, R.raw.gray_oes_fragment_shader);
    }


}

然后，在点击事件中，改变Render中filter的对象赋值

  findViewById(R.id.switch_filter).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                glSurfaceView.setFilter(new JImageOESGrayFilter(JCamera2OESActivity.this));
            }
        });


  public void setFilter(JImageOESFilter filte){
        render.setFilter(filte);
    }

    public void setFilter(final JImageOESFilter filter) {
        runOnDraw(new Runnable() {

            @Override
            public void run() {
                final JImageOESFilter oldFilter = mFilterEngine;
                mFilterEngine = filter;
                if (oldFilter != null) {
                    oldFilter.destroy();
                }
                JLog.d("jiadongfeng4","oldfilter:"+oldFilter+" newFilter:"+mFilterEngine);
                mFilterEngine.ifNeedInit();
                GLES20.glUseProgram(mFilterEngine.getProgram());
                mFilterEngine.onOutputSizeChanged(outputWidth, outputHeight);
            }
        });
    }

以上代码，创建一个队列任务，当Render的onDrawFrme被调用时，会poll 出并执行这个任务，完成Opengel程序对象，也就是滤镜对象的切换

   @Override
    public void onDrawFrame(GL10 gl) {
        ...
        //执行滤镜切换任务
        runAll(runOnDraw);
     
        mFilterEngine.onDraw(transformMatrix, mOESTextureId,glCubeBuffer,glTextureBuffer);
     
    }

以上两个简单滤镜切换过程只需要，替换对应的滤镜对象即可；是简单的滤镜A-滤镜B切换的场景

代码具体实现参考 QCCamera中的JCamera2OESActivity和JImageOESGrayFilter,JImageOESRender

QCCamera

FBO

以上单个滤镜场景的效果，渲染操作等都是在默认的帧缓冲进行操作的，这个默认的帧缓冲是在我们创建Surface的时候自动创建和配置好的，这个OpenGL ES默认的帧缓冲是由窗口系统提供的，是默认显示到屏幕上的，也就是GlSurfaceView中的

实际应用场景中，会将几个滤镜效果叠加起来，效果叠加后，然后将最终的结果显示到屏幕上。叠加处理过程，是放到FrameBuffer中进行处理的，处理完成后，才显示到屏幕上。

这个场景是需要解决的问题是：滤镜A+B+C+D的场景，也就是滤镜组的场景 A处理-->B处理-->C处理-->显示到屏幕上

首先，定义和创建FBO

JImageOESFilter滤镜类

    //FBO对象引用
    private int[] frameBuffers = new int[1];
    //与FBO对象绑定的纹理id
    public int[] frameBufferTextures = new int[1];



    public void onOutputSizeChanged(final int width, final int height) {
        outputWidth = width;
        outputHeight = height;
        //当surface有变化时，重新生成FBO
        if (frameBuffers != null) {
            destroyFramebuffers();
        }
        OpenGlUtils.createFrameBuffer(frameBuffers, frameBufferTextures, width, height);
    }

OpenGlUtils

    public static void createFrameBuffer(int[] frameBuffer, int[] frameBufferTexture,
                                         int width, int height) {
        //产生FBO ID
        GLES20.glGenFramebuffers(frameBuffer.length, frameBuffer, 0);
        //产生纹理ID
        GLES20.glGenTextures(frameBufferTexture.length, frameBufferTexture, 0);
        for (int i = 0; i < frameBufferTexture.length; i++) {
            //绑定纹理
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, frameBufferTexture[i]);
            //加载图像数据, 并上传纹理
            //pixels 可能是一个空指针。在这种情况下，会分配纹理内存以适应宽度width和高度的纹理height
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);

            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
            //绑定
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuffer[i]);
            //将texture和level指定的纹理图像附加为当前绑定的帧缓冲区对象的逻辑缓冲区之一
            GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, frameBufferTexture[i], 0);
            //解绑纹理
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
            //解绑FBO
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
        }
        checkGlError("createFrameBuffer");
    }

GLES20.glGenFramebuffers(frameBuffer.length, frameBuffer, 0)：
第一个是要创建的帧缓存的数目；
第二个是指向存储一个或者多个ID的变量或数组的指针，它返回未使用的FBO的ID，ID为0表示默认帧缓存，即window系统提供的帧缓存
第三个参数表示framebuffer数组赋值时的偏移量，为0表示，即为frameBuffer分配frameBuffer.length个长度

GLES20.glGenTextures(frameBufferTexture.length, frameBufferTexture, 0)：
同上，产生n个纹理id

GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, frameBufferTexture[i])：
绑定frameBufferTexture[i]纹理，后续所有操作都针对此纹理生效，直到调用 * GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)*解绑

GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
设置当前对应纹理id的纹理宽高，内容格式等，因为当前还没有内容，因此最后一个参数为null

glTexParameterf：
设置纹理的采样参数

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuffer[i])：
一旦一个FBO被创建，在使用它之前必须绑定；一旦FBO被绑定，之后的所有的OpenGL操作都会对当前所绑定的FBO造成影响；
ID号为0表示缺省帧缓存，即默认的window提供的帧缓存。因此，在glBindFramebufferEXT()中将ID号设置为0可以解绑定当前FBO；

GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, frameBufferTexture[i], 0)：

第一个参数一定是GL_FRAMEBUFFER
第二个参数是关联纹理图像的关联点
第三个参数textureTarget在图像情况下是GL_TEXTURE_2D
第四个参数是纹理对象的ID号
最后一个参数是要被关联的纹理的mipmap等级

通过以上操作，将把一幅纹理图像frameBufferTexture[i]关联到一个FBO frameBuffer[i]

GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0)：
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)：
解绑操作，表示接下来的opengl操作，对frameBufferTexture[i]和frameBuffer[i]再无影响

注意：跟FBO绑定的纹理ID类型为GL_TEXTURE_2D，不是GL_TEXTURE_EXTERNAL_OES类型，因此经过FBO缓存处理后的数据纹理id：frameBufferTexture,必须由OPENGL当成GL_TEXTURE_2D类型进行处理

使用FBO

JImageOESFilter

    public int onDrawFBO(float[] transformMatrix, int textureId, FloatBuffer cubeBuffer, FloatBuffer textureBuffer) {

        //
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuffers[0]);
        
        //根据纹理textureId类型的不同，执行不同的逻辑
        onDraw(transformMatrix, textureId, cubeBuffer, textureBuffer);
        glBindFramebuffer(GL_FRAMEBUFFER, 0);

        return frameBufferTextures[0];
    }

GLES20.glBindFramebuffer:
绑定FBO,后续opengl所有的数据操作都在改FBO中进行

onDraw：
这里使用的纹理id类型为GL_TEXTURE_EXTERNAL_OES的例子，GL_TEXTURE_2D的处理方式大同小异，在
Camera2 教程 5：两种预览方式比较章节，我们已经讲解了两者的差异

glBindFramebuffer(GL_FRAMEBUFFER, 0)：
解绑FBO,后续opengl的操作，就跟这个没有关系了

最后返回frameBufferTextures[0]，给下一个流程或者滤镜处理

用一张图表示下FBO过程：

FBO.png

注意以上流程中，FBO滤镜处理后的数据是存储在FBO中的，是显示不到屏幕上的;最后一个FBO数据处理后将对应的纹理id放到Opengl中渲染才能显示到默认屏幕上

代码工程

完整的FBO例子请参考以下工程的JCamera2OESFboActivity

QCCamera

Camera2 教程 6：FBO实现滤镜预览

两个简单滤镜切换

FBO

首先，定义和创建FBO

使用FBO

代码工程

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

影视处理