Camera + opengles,有多级filter的处理(四)

分手后的思念是犯贱 2023-07-18 11:21 6阅读 0赞

Camera + opengl es 使用opengls绘制摄像头数据(二) [https://blog.csdn.net/lin20044140410/article/details/105018524][https_blog.csdn.net_lin20044140410_article_details_105018524]

首先做个说明,这里的重点不是讨论特效的处理实现,这个涉及到相应算法,还可能要涉及人脸的识别,这块还在学习中.

这里讨论的重点是,在对摄像头数据需要多级filter处理时,数据流的缓存,绘制思路.在这个思路的基础上,后期添加特效处理,力求改动最少的代码,实现预期结果.

在处理摄像头数据特效前,先说一个概念,离屏渲染.

在用opengl绘制视频时,我们是用GLSurfaceView显示预览效果,也即是直接把摄像头数据传给了着色器,然后由着色器通知opengl去绘制,这种方式是直接把摄像头数据绘制到屏幕上,片元找色中的使用的采样器是sampleExternalOES,也就是说摄像头数据是作为opengl的一个外部纹理来使用的.

但是实际在camera的应用中,很多情况下不需要把数据直接渲染到屏幕上,比如说美颜相机,大眼睛,磨皮等效果的处理,是要在显示到屏幕之前处理,那么在美颜完成后,在送到屏幕显示,这时采样器就要sampler2D.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjIwMDQ0MTQwNDEw_size_16_color_FFFFFF_t_70][]

也就是说,如果要直接拿摄像头数据来显示,采样器就用sampleExternalOES,如果中间有多级filter处理,第一级filter采样器用sampleExternalOES,最后送去显示时,要用sampler2D,这就有来回切换的麻烦.

还有一种情况,就是在多级美颜的情况下,前面filter的处理,是不用显示到屏幕上的,需要先缓存起来,等到最后一级filter都处理完了,在送去显示.

为了避免这样的麻烦,及数据的缓存,就用到了离屏渲染,Frame buffer Object 帧缓冲对象.图像数据往FBO中绘制,是不会显示到屏幕上的,从而实现opengl的重定向渲染输出,也即是让他输出到FBO,而不是SurfaceView的Framebuffer.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjIwMDQ0MTQwNDEw_size_16_color_FFFFFF_t_70 1][]

具体实现如上图:

让CameraFilter直接接收摄像头数据,这一级的片元着色器用sampleExternalOES做采样器,输出到FBO.

然后,接下来的Filter处理都使用sampler2D输出到FBO,

最后ScreenFilter使用sampler2D输出到屏幕.

代码实现中,抽象了两个父类:

AbstractFboFilter,如果数据需要输出到FBO的filter就继承这个父类;

AbstractFilter,如果数据是直接输出到屏幕的filter,就继承这个父类.

AbstractFilter父类会做一些公共的处理,不同的子类会使用不同的着色器程序,

如初始化:顶点buffer，纹理buffer，分别会填充顶点坐标，纹理坐标;

加载着色器代码;

准备着色器程序;

获取着色器程序中的变量，就是顶点着色器,片元着色器中的变量,也是索引;

使用着色器程序绘图,提供 beforeDraw();afterDraw(),让子类去绘制个性的内容,

下面是AbstractFilter中的onDraw()实现:

public int onDraw(int texture, FilterChain filterChain) {
            FilterContext filterContext = filterChain.mFilterContext;
            //设置绘制区域，
            GLES20.glViewport(0, 0, filterContext.mWidth, filterContext.mHeight);
            GLES20.glUseProgram(program);
    
            //因为往vertexBuffer缓冲区put数据时，位置会递增，所以这里重新设置position。
            vertexBuffer.position(0);
            //为顶点,传入参数,第二个参数表示每个坐标是2个点,
            //第五个参数，normalized，归一化，把[2,2]转换为[-1,1]
            GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT,
                    false, 0, vertexBuffer);
            //从cpu传数据到gpu,默认情况下,着色器无法读到这个数据,需要启用一个这个数据才能读取到
            GLES20.glEnableVertexAttribArray(vPosition);
    
            textureBuffer.position(0);
            // 4、归一化 normalized  [-1,1] . 把[2,2]转换为[-1,1]
            GLES20.glVertexAttribPointer(vCoord, 2, GLES20.GL_FLOAT, false, 0, textureBuffer);
            //CPU传数据到GPU，默认情况下着色器无法读取到这个数据。 需要我们启用一下才可以读取
            GLES20.glEnableVertexAttribArray(vCoord);
    
            //为片元着色器变量传值,
            //先要激活一个用来显示纹理的纹理单元,相当于激活一层用来显示图片的画框,
            // 跟view的叠加类似,画框可以有多个,
            // 我们这里只需要一层,
            GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
            //把摄像头的纹理,绑定到这激活的图层中,
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texture);
            //给片元着色器中vTexture赋值,第二个参数0,可以认为是图层ID,因为前面激活纹理时,
            // 指定的时TEXTURE0,所以这里是0
            GLES20.glUniform1i(vTexture, 0);
    
            beforeDraw();
    
            //开始绘制,第一个参数时绘制的模式,GL_TRIANGLE_STRIP
            GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
    
            //?
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
            return texture;
        }

在看另一个父类AbstractFboFilter,它会把数据绘制到Fbo中,所以要先来创建FBO,因为FBO是用opengl来创建,所以调用过程需要在opengl的上下文中,只能在onSurfaceCreated,onSurfaceChanged,onDrawFrame中发起,这里选择在onSurfaceChanged中发起创建,因为FBO的创建需要用到宽高,onSurfaceChanged会在宽高改变时调用到.

FBO具体创建流程:

1,创建FBO，及FBO中的纹理，

2,让fbo与纹理关联，

3,解除与纹理的绑定，

代码实现:

int[] frameBuffer;
        int[] frameTextures;   
    public void createFrame(int width, int height) {
            releaseFrame();
    
            //创建FBO，及FBO中的纹理，
            frameBuffer = new int[1];
            frameTextures = new int[1];
            GLES20.glGenFramebuffers(1, frameBuffer, 0);
    
            OpenGLUtils.glGenTextures(frameTextures);
    
            //让fbo与纹理关联，
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, frameBuffer[0]);
    //配置纹理的属性.
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
                    0,GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
            //纹理关联FBO，
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuffer[0]);
            GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER,
                    GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, frameBuffer[0], 0);
    
            //解除绑定，
            //解除绑定，glBindTexture创建的绑定关系将一直保持激活状态，
            // 除非当前目标被另外一个纹理id绑定，或者通过glDeleteTextures删除纹理。
            //那么，这里再次调用glBindTexture,传入0（是被系统保留，表示每个纹理目标的默认纹理，）
            //当一个纹理id绑定到这个目标时，这个目标之前的绑定关系就自动解除，所以就实现了解除绑定，
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
            //中断绑定，当把一个帧缓冲区对象，绑定到目标时，先前的绑定关系会自动中断，
            // 保留值0，表示由窗口系统提供的默认帧缓冲区，
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
        }

上述过程中,纹理创建出来,不能直接用,需要做些配置,所以把这个配置提取到另一个方法中实现,当把一个纹理贴图到一个几何图像上,可能会因为纹理和几何形状的宽高比不一致,而需要做缩放,这个配置是一定要处理的.

具体的配置流程:

1,绑定纹理，后续处理纹理

2,设置纹理过滤参数设置,设置纹理缩放过滤。

3,解除绑定

代码实现:

public static void glGenTextures(int[] textures) {
            GLES20.glGenTextures(textures.length, textures, 0);
    
            for (int i = 0; i< textures.length; i++) {
                //绑定纹理，后续处理纹理
                GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[i]);
    
                //设置纹理过滤参数设置
                //设置纹理缩放过滤。
                //GL_NEAREST,使用纹理坐标中最接近的一个像素的颜色作为需要绘制的像素颜色。
                //GL_LINEAR,使用纹理坐标最接近的若干颜色，通过加权平均算法得到需要绘制的像素颜色，这种速度慢，但视觉效果好，
                GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,
                        GL_LINEAR);//放大过滤，
                GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,
                        GL_LINEAR);//缩小过滤。
    
                //设置纹理环绕方向
                //纹理坐标的范围是0~1，超出这一范围的坐标将被opengl根据GL_TEXTURE_WRAP参数的值进行处理，
                //GL_TEXTURE_WRAP_S,GL_TEXTURE_WRAP_T，分别是x，y方向
                //GL_REPEAT ,平铺，
                //GL_MIRRORED_REPEAT：纹理坐标是奇数时，使用镜像平铺
                //GL_CLAMP_TO_EDGE，坐标超出部分被截取成0,1,边缘拉伸，
    //            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);
    
                //解除绑定，glBindTexture创建的绑定关系将一直保持激活状态，
                // 除非当前目标被另外一个纹理id绑定，或者通过glDeleteTextures删除纹理。
                //那么，这里再次调用glBindTexture,传入0（是被系统保留，表示每个纹理目标的默认纹理，）
                //当一个纹理id绑定到这个目标时，这个目标之前的绑定关系就自动解除，所以就实现了解除绑定，
                GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
            }
        }

到这里,FBO就创建好了,有一点需要注意的是,FBO的创建是在onSurfaceChanged中发起的,onSurfaceChanged是可能多次调用的,所以需要在创建FBO做好buffer的释放.

创建好了FBO,相应的绘制,就要指定让他绘制到FBO上.

public int onDraw(int texture, FilterChain filterChain) {
            FilterContext filterContext = filterChain.mFilterContext;
    
            createFrame(filterContext.mWidth, filterContext.mHeight);
            //绑定FBO
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuffer[0]);
            //
            super.onDraw(texture, filterChain);
            //解除绑定，
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
            return filterChain.proceed(frameTextures[0]);
        }

接着来看各级filter怎么使用.

第一级CameraFilter是直接使用摄像头数据的,它的片元着色器程序使用samplerExternalOES做采样器,

//摄像头数据比较特殊的地方,
    #extension GL_OES_EGL_image_external : require
    
    //片元着色器决定颜色,或者说是贴图片,
    
    //片元着色器要配置数据精度
    precision mediump float;
    
    //aCoord 纹理坐标,
    varying vec2 aCoord;// 从定点着色器到片元着色器传递的变量,
    
    //可以当做一张图片,实际是一个采样器,其实就是SurfaceTexture,相当于把摄像头的数据传过来赋值给他,
    //它由java程序传过来,要加uniform,
    //uniform,如果需要给片元着色器中的变量赋值,需要声明为uniform.
    uniform samplerExternalOES vTexture;
    
    void main() {
        //gl_Position = vec4(vec3(0.0), 1.0);
        //在vTexture这张图片,采样aCoord这个点的像素的RGBA值,给内置变量gl_FragColor.这就完成了对aCoord这个像素点的上色.
        //正常图像,
        gl_FragColor = texture2D(vTexture, aCoord);
    }

顶点着色器程序,区别不大,就不贴代码了.

CameraFilter的onDraw方法中,使用的纹理Id是跟摄像头数据绑定的纹理Id,他的返回值也是一个纹理Id,但是是一个跟FBO绑定的纹理ID,这个FOB的id传给后续的filter,完成filter的数据输出到FBO.

后面的Filter,及绘制数据到屏幕的filter,他们的片元着色器都使用sampler2D做采样器.

precision mediump float; // 数据精度
    varying vec2 aCoord;
    
    uniform sampler2D  vTexture;  // samplerExternalOES: 图片， 采样器
    
    void main(){
        //  texture2D: vTexture采样器，采样  aCoord 这个像素点的RGBA值
        vec4 rgba = texture2D(vTexture,aCoord);  //rgba
    //    gl_FragColor = vec4(1.-rgba.r,1.-rgba.g,1.-rgba.b,rgba.a);
        gl_FragColor = rgba;
    }

效果处理 的过程，可能会有多个Filter，为了方便的增减filter，需要对所有的filter做个管理，这里使用职责连模式来管理所以的filter，把所有的filter存放在一个list中，每个filter依次处理，第一级filter接收来自Camera的数据，中间的filter处理数据，都先缓存到framebufferobject，最后一级filter把framebufferobject中数据，显示到屏幕。

具体代码：

GLSurfaceView.Renderer.java

@Override
        public void onSurfaceCreated(GL10 gl, EGLConfig config) {
            Context context = mCameraView.getContext();
            List<AbstractFilter> filters = new ArrayList<>();
            filters.add(new CameraFilter(context));
            filters.add(new BigEyeFilter(context));
            filters.add(new StickFilter(context));
            filters.add(new ScreenFilter(context));
            mFilterChain = new FilterChain(filters, 0, new FilterContext());
        }

onSurfaceCreated中，把需要实现的filter，添加到列表中，创建FilterChain，指定索引0的filter是第一个处理的filter，这里就是CameraFilter，处理来自Camera的数据，中间filter的处理结果都输出到fbo中，最后一级的ScreenFilter负责把fbo数据显示到屏幕。

新的帧到来时，调用filterchain开始各自的绘制：

public void onDrawFrame(GL10 gl) @GLSurfaceView.Renderer{
        int id = mFilterChain.proceed(texture[0]);
    }

最后看FilterChain中proceed实现：

public class FilterChain {
        private List<AbstractFilter> mFilters;
        private int mIndex;
        public FilterContext mFilterContext;
    
        public FilterChain(List<AbstractFilter> filters, int index, FilterContext filterContext) {
            mFilterContext = filterContext;
            mIndex = index;
            mFilters = filters;
        }
    
        public int proceed(int textureId) {
            if (mIndex >= mFilters.size()) {
                return textureId;
            }
            FilterChain nextFilterChain = new FilterChain(mFilters, mIndex +1, mFilterContext);
            AbstractFilter currentFilter = mFilters.get(mIndex);
            return currentFilter.onDraw(textureId, nextFilterChain);
        }
    }

可以看到 在完成当前filter的处理时，

return currentFilter.onDraw(textureId, nextFilterChain);

同时把getfilter的索引加1，然后把filterchain传给下个filter。以此实现职责链式的处理。

[https_blog.csdn.net_lin20044140410_article_details_105018524]: https://blog.csdn.net/lin20044140410/article/details/105018524
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjIwMDQ0MTQwNDEw_size_16_color_FFFFFF_t_70]: /images/20230528/f3c70f11a3d546b6b1416739399f29f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjIwMDQ0MTQwNDEw_size_16_color_FFFFFF_t_70 1]: /images/20230528/1105ac070ea44e0fa280364f6bdd4ac8.png