实现效果#xff1a;

1.封装BaseFilter过滤器基类#xff0c…NDK​系列之OpenGL离屏渲染与工程代码整合本节主要是对上一节OpenGL渲染画面效果代码进行封装设计将各种特效代码进行分离解耦便于后期增加其他特效。

实现效果

1.封装BaseFilter过滤器基类实现通用的顶点着色器、片元着色器和着色器程序的初始化赋值和绘制操作

2.编写CamreaFilter相机过滤器实现FBO离屏渲染和变换矩阵等相机相关操作绘制操作完成后将相机过滤器实现的效果的纹理ID传递给下一个过滤器在相机过滤器效果上进行叠加其他效果。

本节主要内容

1BaseFilter构造方法保存顶点着色器和片元着色器代码资源文件id,保存坐标系到数据缓冲区

public

子类传递过来的顶点着色器代码IDthis.mFragmentSourceId

fragmentSourceId;

BufferHelper.getFloatBuffer(VERTEX);

保存到

BufferHelper.getFloatBuffer(TEXTURE);

保存到

2加载并编译着色器代码链接色器ID输出着色器程序并获取着色器的索引值

private

TextResourceReader.readTextFileFromResource(context,

mVertexSourceId);

TextResourceReader.readTextFileFromResource(context,

mFragmentSourceId);

ShaderHelper.compileVertexShader(vertexSource);

编译顶点着色器代码字符串int

ShaderHelper.compileFragmentShader(fragmentSource);

ShaderHelper.linkProgram(vertexShaderId,

fragmentShaderId);

着色器IDglDeleteShader(vertexShaderId);glDeleteShader(fragmentShaderId);//

glGetAttribLocation(mProgramId,

vPosition);

glGetAttribLocation(mProgramId,

vCoord);

glGetUniformLocation(mProgramId,

vMatrix);

glGetUniformLocation(mProgramId,

vTexture);

3完成绘制操作顶点坐标赋值纹理坐标赋值采样器赋值通知opengl绘制将过滤器实现的效果的纹理ID返回给下一个过滤器

public

mHeight);glUseProgram(mProgramId);

必须要使用着色器程序一次//

1.顶点坐标赋值mVertexBuffer.position(0);//

传值glVertexAttribPointer(vPosition,

GL_FLOAT,

激活glEnableVertexAttribArray(vPosition);//

TODO

2.纹理坐标赋值mTextureBuffer.position(0);//

传值glVertexAttribPointer(vCoord,

GL_FLOAT,

激活glEnableVertexAttribArray(vCoord);//

只需要把OpenGL的纹理ID渲染到屏幕上就可以了不需要矩阵数据传递给顶点着色器了//

变换矩阵

vTextureglActiveTexture(GL_TEXTURE0);

激活图层//

绑定图层为什么不需要GL_TEXTURE_EXTERNAL_OES答目前拿到的textureId已经是纹理ID了不是摄像头直接采集到的纹理IDglBindTexture(GL_TEXTURE_2D

,textureId);//

因为CameraFilter已经做过了我就直接显示我用OepnGL

GL_TEXTURE_2D

glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

textureId);

由于这种方式并不是通用的所以先去除glUniform1i(vTexture,

0);

传递采样器glDrawArrays(GL_TRIANGLE_STRIP,

4);

1CameraFilter构造方法将顶点着色器和片元着色器代码资源文件id传给父类完成顶点着色器、片元着色器和着色器程序的初始化工作

public

{super.onReady(width,height);//

TODO

从数组中第几个id来保存,从零下标开始glGenFramebuffers(mFrameBuffers.length,

mFrameBuffers,

纹理(第一节课是没有配置的但是这个是FOB纹理所以需要配置纹理)//

FBO看不见的离屏的屏幕下面的目的就是要把画面显示到FBO中mFrameBufferTextures

new

记录FBO纹理的IDTextureHelper.genTextures(mFrameBufferTextures);

生成并配置纹理//

还没有任何关系现在要让他们绑定起来glBindTexture(GL_TEXTURE_2D,

生产2D纹理图像/*int

pixels*/glTexImage2D(GL_TEXTURE_2D,

GL_RGBA,

null);glBindFramebuffer(GL_FRAMEBUFFER,

mFrameBuffers[0]);

level一般都是0*/glFramebufferTexture2D(GL_FRAMEBUFFER,

GL_TEXTURE_2D,

第四步解绑操作glBindTexture(GL_TEXTURE_2D,

0);glBindFramebuffer(GL_FRAMEBUFFER,

0);

3完成绘制操作渲染到FBO离线缓存中顶点坐标赋值纹理坐标赋值变换矩阵把mtx矩阵数据传递到vMatrix相机过滤器处理过后其他过滤器不需要再变换矩阵采样器赋值通知opengl绘制将FBO的纹理ID返回给下一个过滤器

public

super.onDrawFrame(textureId);glViewport(0,

mWidth,

离屏渲染glBindFramebuffer(GL_FRAMEBUFFER,

mFrameBuffers[0]);glUseProgram(mProgramId);

必须要使用着色器程序一次//

顶点坐标赋值glVertexAttribPointer(vPosition,

GL_FLOAT,

传值glEnableVertexAttribArray(vPosition);

纹理坐标赋值glVertexAttribPointer(vCoord,

GL_FLOAT,

传值glEnableVertexAttribArray(vCoord);

激活//

变换矩阵在我们CameraFilter这里就需要处理了后面的BaseFilter就不需要了glUniformMatrix4fv(vMatrix,

false,

vTextureglActiveTexture(GL_TEXTURE0);

激活图层//

1glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

textureId);

0);glDrawArrays(GL_TRIANGLE_STRIP,

4);

fboglBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,

0);glBindFramebuffer(GL_FRAMEBUFFER,

0);//

samplerExternalOES才能采样相机的数据varying

vec2

把这个最终的计算成果给片元着色器拿到最终的成果我才能上色void

main()

1ScreenFilter构造方法将顶点着色器和片元着色器代码资源文件id传给父类完成顶点着色器、片元着色器和着色器程序的初始化工作

public

2D显示就行了不需要摄像头了sampler2D)varying

vec2

把这个最终的计算成果给片元着色器拿到最终的成果我才能上色void

main()

直接上色你直接上色是上camera_fragment.glsl的底片效果

四、自定义渲染器MyGlRenderer

从上一节中我们知道MyGlRenderer实现GLSurfaceView.Renderer接口实现接口的onSurfaceCreated()、onSurfaceChanged()和onDrawFrame()方法

1当Surface创建时回调onSurfaceCreated()函数创建ScreenFilter屏幕过滤器同样在创建ScreenFilter屏幕过滤器之前我们要先创建CamreaFilter相机过滤器

Override

CameraFilter(myGLSurfaceView.getContext());

FBOmScreenFilter

ScreenFilter(myGLSurfaceView.getContext());

渲染屏幕

2当Surface改变时回调onSurfaceChanged()函数完成过滤器准备工作

Override

height);mScreenFilter.onReady(width,

height);

3绘制一帧图像时回调onDrawFrame()函数获取纹理对象的图像数据先通过CamreaFilter相机过滤器实现相关效果再将其FBO的纹理ID传递给下一个过滤器这里由于暂无实现其他特效就传递给了ScreenFilter屏幕过滤器将最终成果的纹理ID通过OpenGL渲染到屏幕

Override

相机过滤器绘制一帧图像不可见mCameraFilter.setMatrix(mtx);int

textureId

mCameraFilter.onDrawFrame(mTextureID[0]);

增加其他特效/*textureId

美白.onDrawFrame(textureId);textureId

大眼.onDrawFrame(textureId);textureId

xxx.onDrawFrame(textureId);*///

屏幕过滤器绘制一帧图像屏幕显示mScreenFilter.onDrawFrame(textureId);

textureId

注后续将会在CamreaFilter相机过滤器和ScreenFilter屏幕过滤器中间增加各种效果过滤器实现其他特效如美白大眼兔耳朵等。

NdkOpenGLPlay: