做者:苍王 时间:2019.1.28java
上一节介绍了摄像头的帧采集,这一节将要介绍采集回来的摄像头数据如何显示到屏幕,以及对数据进行滤镜添加。android
如今demo中提供了大概有三十几种滤镜,其原来MagicCamera大体同样的。 首先说一下采坑遇到的问题 git
####1.图片格式不一样的问题 滤镜效果比较简单的理解就是原来的图像的基础上,混合上纹理显示出来的效果,而Opengl中纹理能够图片,也能够数据的形式来加载。通常是有png,jpg,bmp三种。 移动端不多使用bmp图,由于图片比较压缩度低,通常bmp图片容量对比png,jpg大不少。png图和jpg图最大的不一样是,png是RGBA的编码,而jpg是RGB编码,就是透明通道的区别,若是填写错误,我遇到过现实的滤镜会有黑条的问题(不是显示不出来,是黑条)。而Opengl不少都须要填写通道的格式和通道长度的,这点尤其重要。 我一开始复写这个框架的时候就是由于对图片解码等问题不够深刻,耽误了很长的时间(大概两周,才在这个坑口爬出来,因此入门的时候必定要认清这些图片格式确切的区别)github
###2.图片加载的问题 (1)若是你单纯用Android的OpenGL来读取图片纹理,很是简单,Android的OpenGL直接支持bitmap的输入做为纹理转换。 (2)若是你单纯使用jni来读取图片,Android独有的android/bitmap.h框架能够直接从java层传递二进制图片数据到native层,并且能读取到图片的一些基本信息。 (3)若是你想单纯经过native层来完成图片纹理读取解码以及native 的opengl加载,这是最高自由度的,能够根本上考虑代码的复用性,以及图片加载机制的了解。固然,我就选择了这种,途中遇到复杂的问题拆分为: ####如何让native读取到Android内置图片的地址? 在native读取到内置图片的地址,这里要借助到android种asset这个文件夹,用来存放纹理图片,以及shader文件。(固然你也能够将shader文件也复制到代码中,这样更加压缩会更加好,可是维护比较麻烦就是了)。经过asset来读取到图片文件信息,这样作的好处在于图片的处理都在native层,当图片释放,能够马上释放资源,不会想java那张图片可能还在缓存中等待回收。asset_manager_jni.h中提供了一套完整的读取asset文件夹的方法。缓存
//打开asset文件夹中的文件夹
AAssetDir *dir = AAssetManager_openDir(manager,"filter");
//初始化文件名指针
const char *file = nullptr;
//循环遍历
while ((file =AAssetDir_getNextFileName(dir))!= nullptr) {
//对比文件名
if (strcmp(file, fileName) == 0) {
//拼接文件路径,以asset文件夹为起始
std::string *name = new std::string("filter/");
name->append(file);
//以流的方式打开文件
AAsset *asset = AAssetManager_open(manager, name->c_str(), AASSET_MODE_STREAMING);
复制代码
####若是在native中读取到图片的信息? 读取图片文件的信息,包括长宽,图片大小,通道大小,这里固然只能使用C的框架来读取图像数据了,这里使用了一个比较简便,且可接入性较高的图像解析库stb。bash
//引用stb库
#define STB_IMAGE_IMPLEMENTATION
#include "src/main/cpp/utils/stb_image.h"
int len = AAsset_getLength(asset);
int width=0,height=0,n=0;
//读取资源文件流
unsigned char* buff = (unsigned char *) AAsset_getBuffer(asset);
//读取图片长宽以及通道数据
unsigned char* data = stbi_load_from_memory(buff, len, &width, &height, &n, 0);
ALOGV("loadTextureFromAssets fileName = %s,width = %d,height=%d,n=%d,size = %d",fileName,width,height,n,len);
//关闭资源
AAsset_close(asset);
//关闭asset文件夹
AAssetDir_close(dir);
复制代码
这里必定要注意,引入stb_image.h的方式,请必定要遵循我这种引用方式,否则将会出现某些图像没法解析的可能。我就是在这里卡了几天,一度怀疑人生,想要换库操做。 app
####读取完成后怎么加载图片的纹理信息? 这里其实很明确使用glTexImage2D来将图片的数据生成一个2D纹理,可是有人会考虑使用mipmaps贴图,可是滤镜通常都不须要使用mimpas贴图的。千万别误用了mipmaps贴图,mipmaps贴图是2的次幂方,并且长和宽大小是同样的正方形,然而我真的是调试的时候本身傻傻的添加了,只怪我仍是太年轻了。框架
if(data!=NULL) {
GLint format = GL_RGB;
if (n==3) { //RGB三通道,例如jpg格式
format = GL_RGB;
} else if (n==4) { //RGBA四通道,例如png格式
format = GL_RGBA;
}
//将图片数据生成一个2D纹理
glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
} else{
LOGE("load texture from assets is null,fileName = %s",fileName);
}
复制代码
作完这些后能够从Native直接读取到图片纹理,那么接下来就是将摄像头采集过来的帧图和滤镜纹理叠加,而后将其显示到屏幕当中,如何获取到帧缓冲图,请查看上一节的内容。 ui
滤镜添加的流程图 编码
这里是绘制的公共代码。
if (cameraInputFilter != nullptr){
// cameraInputFilter->onDrawFrame(mTextureId,matrix,VERTICES,TEX_COORDS);
//获取帧缓冲id
GLuint id = cameraInputFilter->onDrawToTexture(mTextureId,matrix);
if (filter != nullptr)
//经过滤镜filter绘制
filter->onDrawFrame(id,matrix);
//缓冲区交换
glFlush();
mEGLCore->swapBuffer();
}
int GPUImageFilter::onDrawFrame(const GLuint textureId, GLfloat *matrix,const float *cubeBuffer,
const float *textureBuffer) {
onDrawPrepare();
glUseProgram(mGLProgId);
if (!mIsInitialized) {
ALOGE("NOT_INIT");
return NOT_INIT;
}
//加载矩阵
// glUniformMatrix4fv(mMatrixLoc,1,GL_FALSE,matrix);
glVertexAttribPointer(mGLAttribPosition, 2, GL_FLOAT, GL_FALSE, 0, cubeBuffer);
glEnableVertexAttribArray(mGLAttribPosition);
glVertexAttribPointer(mGLAttribTextureCoordinate, 2, GL_FLOAT, GL_FALSE, 0, textureBuffer);
glEnableVertexAttribArray(mGLAttribTextureCoordinate);
if(textureId !=NO_TEXTURE){
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D,textureId);
//加载纹理
glUniform1i(mGLUniformTexture,0);
}
//滤镜参数加载
onDrawArraysPre();
glDrawArrays(GL_TRIANGLE_STRIP,0,4);
//滤镜参数释放
onDrawArraysAfter();
//释放顶点绑定
glDisableVertexAttribArray(mGLAttribPosition);
glDisableVertexAttribArray(mGLAttribTextureCoordinate);
if(textureId !=NO_TEXTURE) //激活回到默认纹理
glBindTexture(GL_TEXTURE_2D,0);
return ON_DRAWN;
}
复制代码
用一个简单的Amaro滤镜来讲明一下使用。
//构造时加载program,以及shader
MagicAmaroFilter::MagicAmaroFilter(AAssetManager *assetManager)
: GPUImageFilter(assetManager,readShaderFromAsset(assetManager,"nofilter_v.glsl"), readShaderFromAsset(assetManager,"amaro.glsl")){
}
//初始化shader顶点和纹理参数
void MagicAmaroFilter::onInit() {
GPUImageFilter::onInit();
inputTextureUniformLocations[0] = glGetUniformLocation(mGLProgId,"inputImageTexture2");
inputTextureUniformLocations[1] = glGetUniformLocation(mGLProgId,"inputImageTexture3");
inputTextureUniformLocations[2] = glGetUniformLocation(mGLProgId,"inputImageTexture4");
mGLStrengthLocation = glGetUniformLocation(mGLProgId,"strength");
}
//从多个图中生成纹理
void MagicAmaroFilter::onInitialized() {
GPUImageFilter::onInitialized();
inputTextureHandles[0] = loadTextureFromAssets(mAssetManager,"brannan_blowout.png");
inputTextureHandles[1] = loadTextureFromAssets(mAssetManager,"overlaymap.png");
inputTextureHandles[2] = loadTextureFromAssets(mAssetManager,"amaromap.png");
}
复制代码
在绘制的时候onDrawArraysPre()加入绑定纹理,以及onDrawArraysAfter()取消绑定
void MagicAmaroFilter::onDrawArraysPre() {
glUniform1f(mGLStrengthLocation, 1.0f);
if (inputTextureHandles[0] != 0) {
glActiveTexture(GL_TEXTURE3);
glBindTexture(GL_TEXTURE_2D, inputTextureHandles[0]);
glUniform1i(inputTextureUniformLocations[0], 3);
}
……
}
void MagicAmaroFilter::onDrawArraysAfter() {
if (inputTextureHandles[0] != 0) {
glActiveTexture(GL_TEXTURE3);
glBindTexture(GL_TEXTURE_2D, inputTextureHandles[0]);
glActiveTexture(GL_TEXTURE0);
}
……
}
复制代码
这里关键效果的叠加是Fragment Shader中计算绘制来完成。
void main()
{
//从采样器中进程纹理采样
vec4 originColor = texture(inputImageTexture, textureCoordinate);
vec4 texel = texture(inputImageTexture, textureCoordinate);
vec3 bbTexel = texture(inputImageTexture2, textureCoordinate).rgb;
texel.r = texture(inputImageTexture3, vec2(bbTexel.r, texel.r)).r;
texel.g = texture(inputImageTexture3, vec2(bbTexel.g, texel.g)).g;
texel.b = texture(inputImageTexture3, vec2(bbTexel.b, texel.b)).b;
//按比例分别混合RGB
vec4 mapped;
mapped.r = texture(inputImageTexture4, vec2(texel.r, .16666)).r;
mapped.g = texture(inputImageTexture4, vec2(texel.g, .5)).g;
mapped.b = texture(inputImageTexture4, vec2(texel.b, .83333)).b;
mapped.a = 1.0;
//mix(x, y, a): x, y的线性混叠, x(1-a) + y*a;
mapped.rgb = mix(originColor.rgb, mapped.rgb, strength);
gl_FragColor = mapped;
}
复制代码
基本的加载滤镜的模板代码就到这里了。须要注意的是,若是你看原版的MagicCamera不少代码使用android的消息传输以及线程的简便,抛到到绘制onDraw的时候执行。而C++编写的时候,仍是好好的严格遵循绘制的顺序来编写和初始化。