AndroidOpenGLES如何给相机添加滤镜详解

滤镜介绍

创新互联拥有10余年成都网站建设工作经验,为各大企业提供网站建设、网站设计服务，对于网页设计、PC网站建设（电脑版网站建设）、app软件定制开发、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、域名与空间等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

目前市面上的滤镜有很多，但整体归类也就几样，都是在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 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 mWeakFilter;
 // 统一变量列表
 private HashMap 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、统一变量和纹理绑定需要做成动态构建的过程而已。

效果如下：

Android OpenGLES如何给相机添加滤镜详解
动态滤镜效果

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

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

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

分享标题：AndroidOpenGLES如何给相机添加滤镜详解
分享地址：http://chengdu.cdxwcx.cn/article/podieg.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

AndroidOpenGLES如何给相机添加滤镜详解

其他资讯

java苹果计算器源代码 iphone计算器代码

linux命令li linux命令ll和ls区别

java多态继承代码 java有什么特性,继承有什么用处,多态有什么用处

linux分区查看命令行 linux 查看分区命令

怎么用子域名子域名怎么申请https证书

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

AndroidOpenGLES如何给相机添加滤镜详解

其他资讯

java苹果计算器源代码 iphone计算器代码

linux命令li linux命令ll和ls区别

java多态继承代码 java有什么特性,继承有什么用处,多态有什么用处

linux分区查看命令行 linux 查看分区命令

怎么用子域名 子域名怎么申请https证书

成都网站建设设计将想法与焦点和您一起共享

怎么用子域名子域名怎么申请https证书