Android OpenGLES如何给相机添加滤镜详解

滤镜介绍

目前市面上的滤镜有很多,但整体归类也就几样,都是在fragment shader中进行处理。目前滤镜最常用的就是 lut滤镜以及调整RGB曲线的滤镜了。其他的类型变更大同小异。

动态滤镜的构建

为了实现动态下载的滤镜,我们接下来实现一套滤镜的json参数,主要包括滤镜类型、滤镜名称、vertex shader、fragment shader 文件、统一变量列表、与统一变量绑定的纹理图片、默认滤镜强度、是否带纹理宽高偏移量、音乐路径、音乐是否循环播放等参数。

json 以及各个字段的介绍如下:

{
 "filterList": [{
  "type": "filter", // 表明滤镜类型,目前filter是只普通滤镜,后续还会加入其它类型的滤镜
  "name": "amaro", // 滤镜名称
  "vertexShader": "", // vertex shader 文件名
  "fragmentShader": "fragment.glsl", // fragment shader 文件名
  "uniformList":["blowoutTexture", "overlayTexture", "mapTexture"], // 统一变量
  "uniformData": { // 与统一变量绑定的纹理图片
   "blowoutTexture": "blowout.png",
   "overlayTexture": "overlay.png",
   "mapTexture": "map.png"
  },
  "strength": 1.0,  // 默认滤镜强度 0.0 ~ 1.0之间
  "texelOffset": 0,  // 是否需要支持宽高偏移值,即需要传递 1.0f/width, 1.0f/height到shader中
  "audioPath": "",  // 音乐路径
  "audioLooping": 1  // 是否循环播放音乐
 }]
}

有了json 之后,我们需要解码得到滤镜参数对象,解码如下:

/**
  * 解码滤镜数据
  * @param folderPath
  * @return
  */
 public static DynamicColor decodeFilterData(String folderPath)
   throws IOException, JSONException {

  File file = new File(folderPath, "json");
  String filterJson = FileUtils.convertToString(new FileInputStream(file));

  JSONObject jsonObject = new JSONObject(filterJson);
  DynamicColor dynamicColor = new DynamicColor();
  dynamicColor.unzipPath = folderPath;
  if (dynamicColor.filterList == null) {
   dynamicColor.filterList = new ArrayList<>();
  }

  JSONArray filterList = jsonObject.getJSONArray("filterList");
  for (int filterIndex = 0; filterIndex < filterList.length(); filterIndex++) {
   DynamicColorData filterData = new DynamicColorData();
   JSONObject jsonData = filterList.getJSONObject(filterIndex);
   String type = jsonData.getString("type");
   // TODO 目前滤镜只做普通的filter,其他复杂的滤镜类型后续在做处理
   if ("filter".equals(type)) {
    filterData.name = jsonData.getString("name");
    filterData.vertexShader = jsonData.getString("vertexShader");
    filterData.fragmentShader = jsonData.getString("fragmentShader");
    // 获取统一变量字段
    JSONArray uniformList = jsonData.getJSONArray("uniformList");
    for (int uniformIndex = 0; uniformIndex < uniformList.length(); uniformIndex++) {
     String uniform = uniformList.getString(uniformIndex);
     filterData.uniformList.add(uniform);
    }

    // 获取统一变量字段绑定的图片资源
    JSONObject uniformData = jsonData.getJSONObject("uniformData");
    if (uniformData != null) {
     Iterator<String> dataIterator = uniformData.keys();
     while (dataIterator.hasNext()) {
      String key = dataIterator.next();
      String value = uniformData.getString(key);
      filterData.uniformDataList.add(new DynamicColorData.UniformData(key, value));
     }
    }
    filterData.strength = (float) jsonData.getDouble("strength");
    filterData.texelOffset = (jsonData.getInt("texelOffset") == 1);
    filterData.audioPath = jsonData.getString("audioPath");
    filterData.audioLooping = (jsonData.getInt("audioLooping") == 1);
   }
   dynamicColor.filterList.add(filterData);
  }

  return dynamicColor;
 }

滤镜的实现

在解码得到滤镜参数之后,我们接下来实现动态滤镜渲染过程。为了方便构建滤镜,我们创建一个滤镜资源加载器,代码如下:

/**
 * 滤镜资源加载器
 */
public class DynamicColorLoader {

 private static final String TAG = "DynamicColorLoader";

 // 滤镜所在的文件夹
 private String mFolderPath;
 // 动态滤镜数据
 private DynamicColorData mColorData;
 // 资源索引加载器
 private ResourceDataCodec mResourceCodec;
 // 动态滤镜
 private final WeakReference<DynamicColorBaseFilter> mWeakFilter;
 // 统一变量列表
 private HashMap<String, Integer> mUniformHandleList = new HashMap<>();
 // 纹理列表
 private int[] mTextureList;

 // 句柄
 private int mTexelWidthOffsetHandle = OpenGLUtils.GL_NOT_INIT;
 private int mTexelHeightOffsetHandle = OpenGLUtils.GL_NOT_INIT;
 private int mStrengthHandle = OpenGLUtils.GL_NOT_INIT;
 private float mStrength = 1.0f;
 private float mTexelWidthOffset = 1.0f;
 private float mTexelHeightOffset = 1.0f;

 public DynamicColorLoader(DynamicColorBaseFilter filter, DynamicColorData colorData, String folderPath) {
  mWeakFilter = new WeakReference<>(filter);
  mFolderPath = folderPath.startsWith("file://") ? folderPath.substring("file://".length()) : folderPath;
  mColorData = colorData;
  mStrength = (colorData == null) ? 1.0f : colorData.strength;
  Pair pair = ResourceCodec.getResourceFile(mFolderPath);
  if (pair != null) {
   mResourceCodec = new ResourceDataCodec(mFolderPath + "/" + (String) pair.first, mFolderPath + "/" + pair.second);
  }
  if (mResourceCodec != null) {
   try {
    mResourceCodec.init();
   } catch (IOException e) {
    Log.e(TAG, "DynamicColorLoader: ", e);
    mResourceCodec = null;
   }
  }
  if (!TextUtils.isEmpty(mColorData.audioPath)) {
   if (mWeakFilter.get() != null) {
    mWeakFilter.get().setAudioPath(Uri.parse(mFolderPath + "/" + mColorData.audioPath));
    mWeakFilter.get().setLooping(mColorData.audioLooping);
   }
  }
  loadColorTexture();
 }

 /**
  * 加载纹理
  */
 private void loadColorTexture() {
  if (mColorData.uniformDataList == null || mColorData.uniformDataList.size() <= 0) {
   return;
  }
  mTextureList = new int[mColorData.uniformDataList.size()];
  for (int dataIndex = 0; dataIndex < mColorData.uniformDataList.size(); dataIndex++) {
   Bitmap bitmap = null;
   if (mResourceCodec != null) {
    bitmap = mResourceCodec.loadBitmap(mColorData.uniformDataList.get(dataIndex).value);
   }
   if (bitmap == null) {
    bitmap = BitmapUtils.getBitmapFromFile(mFolderPath + "/" + String.format(mColorData.uniformDataList.get(dataIndex).value));
   }
   if (bitmap != null) {
    mTextureList[dataIndex] = OpenGLUtils.createTexture(bitmap);
    bitmap.recycle();
   } else {
    mTextureList[dataIndex] = OpenGLUtils.GL_NOT_TEXTURE;
   }
  }
 }

 /**
  * 绑定统一变量句柄
  * @param programHandle
  */
 public void onBindUniformHandle(int programHandle) {
  if (programHandle == OpenGLUtils.GL_NOT_INIT || mColorData == null) {
   return;
  }
  mStrengthHandle = GLES30.glGetUniformLocation(programHandle, "strength");
  if (mColorData.texelOffset) {
   mTexelWidthOffsetHandle = GLES30.glGetUniformLocation(programHandle, "texelWidthOffset");
   mTexelHeightOffsetHandle = GLES30.glGetUniformLocation(programHandle, "texelHeightOffset");
  } else {
   mTexelWidthOffsetHandle = OpenGLUtils.GL_NOT_INIT;
   mTexelHeightOffsetHandle = OpenGLUtils.GL_NOT_INIT;
  }
  for (int uniformIndex = 0; uniformIndex < mColorData.uniformList.size(); uniformIndex++) {
   String uniformString = mColorData.uniformList.get(uniformIndex);
   int handle = GLES30.glGetUniformLocation(programHandle, uniformString);
   mUniformHandleList.put(uniformString, handle);
  }
 }

 /**
  * 输入纹理大小
  * @param width
  * @param height
  */
 public void onInputSizeChange(int width, int height) {
  mTexelWidthOffset = 1.0f / width;
  mTexelHeightOffset = 1.0f / height;
 }

 /**
  * 绑定滤镜纹理,只需要绑定一次就行,不用重复绑定,减少开销
  */
 public void onDrawFrameBegin() {
  if (mStrengthHandle != OpenGLUtils.GL_NOT_INIT) {
   GLES30.glUniform1f(mStrengthHandle, mStrength);
  }
  if (mTexelWidthOffsetHandle != OpenGLUtils.GL_NOT_INIT) {
   GLES30.glUniform1f(mTexelWidthOffsetHandle, mTexelWidthOffset);
  }
  if (mTexelHeightOffsetHandle != OpenGLUtils.GL_NOT_INIT) {
   GLES30.glUniform1f(mTexelHeightOffsetHandle, mTexelHeightOffset);
  }

  if (mTextureList == null || mColorData == null) {
   return;
  }
  // 逐个绑定纹理
  for (int dataIndex = 0; dataIndex < mColorData.uniformDataList.size(); dataIndex++) {
   for (int uniformIndex = 0; uniformIndex < mUniformHandleList.size(); uniformIndex++) {
    // 如果统一变量存在,则直接绑定纹理
    Integer handle = mUniformHandleList.get(mColorData.uniformDataList.get(dataIndex).uniform);
    if (handle != null && mTextureList[dataIndex] != OpenGLUtils.GL_NOT_TEXTURE) {
     OpenGLUtils.bindTexture(handle, mTextureList[dataIndex], dataIndex + 1);
    }
   }
  }
 }

 /**
  * 释放资源
  */
 public void release() {
  if (mTextureList != null && mTextureList.length > 0) {
   GLES30.glDeleteTextures(mTextureList.length, mTextureList, 0);
   mTextureList = null;
  }
  if (mWeakFilter.get() != null) {
   mWeakFilter.clear();
  }
 }

 /**
  * 设置强度
  * @param strength
  */
 public void setStrength(float strength) {
  mStrength = strength;
 }
}

然后我们构建一个DynamicColorFilter的基类,方便后续添加其他类型的滤镜,代码如下:

public class DynamicColorBaseFilter extends GLImageAudioFilter {

 // 颜色滤镜参数
 protected DynamicColorData mDynamicColorData;
 protected DynamicColorLoader mDynamicColorLoader;

 public DynamicColorBaseFilter(Context context, DynamicColorData dynamicColorData, String unzipPath) {
  super(context, (dynamicColorData == null || TextUtils.isEmpty(dynamicColorData.vertexShader)) ? VERTEX_SHADER
      : getShaderString(context, unzipPath, dynamicColorData.vertexShader),
    (dynamicColorData == null || TextUtils.isEmpty(dynamicColorData.fragmentShader)) ? FRAGMENT_SHADER_2D
      : getShaderString(context, unzipPath, dynamicColorData.fragmentShader));
  mDynamicColorData = dynamicColorData;
  mDynamicColorLoader = new DynamicColorLoader(this, mDynamicColorData, unzipPath);
  mDynamicColorLoader.onBindUniformHandle(mProgramHandle);
 }

 @Override
 public void onInputSizeChanged(int width, int height) {
  super.onInputSizeChanged(width, height);
  if (mDynamicColorLoader != null) {
   mDynamicColorLoader.onInputSizeChange(width, height);
  }
 }

 @Override
 public void onDrawFrameBegin() {
  super.onDrawFrameBegin();
  if (mDynamicColorLoader != null) {
   mDynamicColorLoader.onDrawFrameBegin();
  }
 }

 @Override
 public void release() {
  super.release();
  if (mDynamicColorLoader != null) {
   mDynamicColorLoader.release();
  }
 }

 /**
  * 设置强度,调节滤镜的轻重程度
  * @param strength
  */
 public void setStrength(float strength) {
  if (mDynamicColorLoader != null) {
   mDynamicColorLoader.setStrength(strength);
  }
 }

 /**
  * 根据解压路径和shader名称读取shader的字符串内容
  * @param unzipPath
  * @param shaderName
  * @return
  */
 protected static String getShaderString(Context context, String unzipPath, String shaderName) {
  if (TextUtils.isEmpty(unzipPath) || TextUtils.isEmpty(shaderName)) {
   throw new IllegalArgumentException("shader is empty!");
  }
  String path = unzipPath + "/" + shaderName;
  if (path.startsWith("assets://")) {
   return OpenGLUtils.getShaderFromAssets(context, path.substring("assets://".length()));
  } else if (path.startsWith("file://")) {
   return OpenGLUtils.getShaderFromFile(path.substring("file://".length()));
  }
  return OpenGLUtils.getShaderFromFile(path);
 }

}

接下来我们构建动态滤镜组,因为动态滤镜有可能有多个滤镜组合而成。代码如下:

public class GLImageDynamicColorFilter extends GLImageGroupFilter {

 public GLImageDynamicColorFilter(Context context, DynamicColor dynamicColor) {
  super(context);
  // 判断数据是否存在
  if (dynamicColor == null || dynamicColor.filterList == null
    || TextUtils.isEmpty(dynamicColor.unzipPath)) {
   return;
  }
  // 添加滤镜
  for (int i = 0; i < dynamicColor.filterList.size(); i++) {
   mFilters.add(new DynamicColorFilter(context, dynamicColor.filterList.get(i), dynamicColor.unzipPath));
  }
 }

 /**
  * 设置滤镜强度
  * @param strength
  */
 public void setStrength(float strength) {
  for (int i = 0; i < mFilters.size(); i++) {
   if (mFilters.get(i) != null && mFilters.get(i) instanceof DynamicColorBaseFilter) {
    ((DynamicColorBaseFilter) mFilters.get(i)).setStrength(strength);
   }
  }
 }
}

总结

基本的动态滤镜实现起来比较简单,总的来说就是简单的json参数、shader、统一变量和纹理绑定需要做成动态构建的过程而已。

效果如下:


动态滤镜效果

该效果是通过解压asset目录下的压缩包资源来实现的。你只需要提供包含shader 、纹理资源、以及json的压缩包即可更改滤镜。

详细实现过程,可参考本人的开源项目:
CainCamera

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Android OpenGLES2.0等腰直角三角形和彩色的三角形(三)

    上一篇博客中我们已经绘制出了一个直角三角形,虽然我们相对于坐标,我们设置的直角三角形的两腰是相等的,但是实际上展示出来的却并不是这样,虽然通过计算,我们可以把三角形的两腰计算一下比例,使它们在坐标上不等,但是现实出来相等,但是当绘制的图形比较复杂的话,这个工作量对我们来说实在太庞大了.那么我们怎么做呢?答案是,使用变换矩阵,把计算交给OpenGL. 矩阵 在数学中,矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合 ,最早来自于方程组的系数及常数所构成的方阵.这一概念由19世纪英国数学家

  • Android OpenGLES2.0绘制三角形(二)

    选择绘制三角形作为OpenGL ES 2.0的第一个实例,是因为前文中提到的,点.线.三角形是OpenGL ES世界的图形基础.无论多么复杂的几何物体,在OpenGL ES的世界里都可以用三角形拼成.关于Android OpenGL ES 三角形的绘制,在Android官方文档中有详细的说明和步骤,本文实例也是依照官方文档步骤绘制的三角形. 步骤 依照官方文档中的说明,Android中利用OpenGL ES 2.0绘制三角形的步骤为: 1. 在AndroidManifest.xml文件中设置使用

  • 了解Android OpenGLES2.0(一)

    什么是OpenGL ES? OpenGL(全写Open Graphics Library)是指定义了一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. OpenGL在不同的平台上有不同的实现,但是它定义好了专业的程序接口,不同的平台都是遵照该接口来进行实现的,思想完全相同,方法名也是一致的,所以使用时也基本一致,只需要根据不同的语言环境稍有不同而已.OpenGL这套3D图形API从1992年发布的1.0版本到目前最新20

  • Android利用OpenGLES绘制天空盒实例教程

    前言 天空盒这个效果最早是在腾讯的实景地图里看到的,当时觉得很牛逼,但是没有想过自己去实现以下.最近这段时间对opengl很有兴趣,顺便就搞了这个天空盒,话不多说,先上效果. 天空盒的原理就是在三维空间中放置一个正方体,然后将我们的相机放置在正方体内,当我们的视点转动,相机跟着转动.我们就可以看到相应的景色的变换了,天空盒本质上是一个立方体. OpenGL 关于什么是OpenGL,什么是OpenGLES就不细说了,不了解的就自行百度吧,我们主要是关注代码.整个项目采用了Kotlin + Ndk的

  • Android OpenGLES如何给相机添加滤镜详解

    滤镜介绍 目前市面上的滤镜有很多,但整体归类也就几样,都是在fragment shader中进行处理.目前滤镜最常用的就是 lut滤镜以及调整RGB曲线的滤镜了.其他的类型变更大同小异. 动态滤镜的构建 为了实现动态下载的滤镜,我们接下来实现一套滤镜的json参数,主要包括滤镜类型.滤镜名称.vertex shader.fragment shader 文件.统一变量列表.与统一变量绑定的纹理图片.默认滤镜强度.是否带纹理宽高偏移量.音乐路径.音乐是否循环播放等参数. json 以及各个字段的介绍

  • android RecyclerView添加footerview详解

    class FooterViewAdapter :RecyclerView.Adapter<RecyclerView.ViewHolder>() { companion object { const val TYPE_FOOTER: Int = 1 const val TYPE_NORMAL: Int = 0 } var isFooterView: Boolean = false fun setFooterView() { this.isFooterView = true notifyItem

  • Android Jetpack导航组件Navigation创建使用详解

    目录 引言 依赖项 创建导航图 导航宿主 导航到目的地 传递参数 NavigationUI 多模块导航 引言 导航是指支持用户导航.进入和退出应用中不同内容片段的交互.Android Jetpack 的导航组件可实现导航,无论是简单的按钮点击,还是应用栏和抽屉式导航栏等更为复杂的模式,该组件均可应对. 依赖项 def nav_version = "2.5.2" implementation "androidx.navigation:navigation-fragment-kt

  • Android 通过网络图片路径查看图片实例详解

    Android 通过网络图片路径查看图片实例详解 1.在项目清单中添加网络访问权限 <!--访问网络的权限--> <uses-permission android:name="android.permission.INTERNET"/> 2.获取网络图片数据 /** * 获取网络图片的数据 * @param path 网络图片路径 * @return * @throws Exception */ public static byte[] getImage(Str

  • Android 中Fragment与Activity通讯的详解

    Android 中Fragment与Activity通讯的详解 与activity通讯 尽管fragment的实现是独立于activity的,可以被用于多个activity,但是每个activity所包含的是同一个fragment的不同的实例. Fragment可以调用getActivity()方法很容易的得到它所在的activity的对象,然后就可以查找activity中的控件们(findViewById()). 例如: ViewlistView =getActivity().findView

  • Android Activity启动模式之singleTop实例详解

    本文实例讲述了Android Activity启动模式之singleTop.分享给大家供大家参考,具体如下: 在前面文章<Android Activity启动模式之standard实例详解>中,我们介绍了活动的默认启动模式standard,本文继续介绍Activity的singleTop模式. singleTop模式:当Activity的活动模式设置为singleTop时,在启动活动时首先检查栈顶活动是否是该活动,如果是,在使用当前实例,否则继续创建新的实例. (1)修改AndroidMani

  • Android 带logo的二维码详解及实例

    Android 带logo的二维码详解及实例 好久没有写博客了,快元旦了公司的事情也不是很多,刚好和朋友一起出去玩玩,朋友是搞PHP的说到了每天在公司都是搞些什么二维码和微信支付的相关东西,因为上班的时间不忙,所以随便来搞下. 二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙.在现代商业活动中,如果一个产品是不能通过二维码来进行访问什么的,显然是不成功的.用的比较多的生成二维码的jar

  • Android 两种启动模式的实例详解

    Android 两种启动模式的实例详解 Intent的FLAG_ACTIVITY_CLEAR_TOP和FLAG_ACTIVITY_REORDER_TO_FRONT Activity的两种启动模式:FLAG_ACTIVITY_CLEAR_TOP和FLAG_ACTIVITY_REORDER_TO_FRONT 1. 如果已经启动了四个Activity:A,B,C和D.在D Activity里,我们要跳到B Activity,同时希望C finish掉,可以在startActivity(intent)里

  • Android OkHttp的简单使用和封装详解

    Android OkHttp的简单使用和封装详解 1,昨天把okHttp仔细的看了一下,以前都是调用同事封装好了的网络框架,直接使用很容易,但自己封装却不是那么简单,还好,今天就来自我救赎一把,就和大家写写从最基础的OKHttp的简单get.post的使用,再到它的封装. 2,OkHttp的简单使用 首先我们创建一个工程,并在布局文件中添加三个控件,TextView(用于展示获取到json后的信息).Button(点击开始请求网络).ProgressBar(网络加载提示框) ①简单的异步Get请

  • Android 中Lambda表达式的使用实例详解

     Android 中Lambda表达式的使用实例详解 Java8 中着实引入了一些非常有特色的功能,如Lambda表达式.streamAPI.接口默认实现等等.Lambda表达式在 Android 中最低兼容到 Android2.3 系统,兼容性还是不错的,Lambda表达式本质上是一种匿名方法,它既没有方法名,也没有访问修饰符和返回值类型,使用它编写的代码将更加简洁易读. 1.Lambda表达式的基本写法 如果想要在 Android 项目中使用 Lambda表达式 或者 Java8 的其他新特

随机推荐