滤镜介绍
目前市面上的滤镜有很多，但整体归类也就几样，都是在fragment shader中进行处理。目前滤镜最常用的就是 lut滤镜以及调整RGB曲线的滤镜了。其他的类型变更大同小异。
动态滤镜的构建
为了实现动态下载的滤镜，我们接下来实现一套滤镜的json参数，主要包括滤镜类型、滤镜名称、vertex shader、fragment shader 文件、统一变量列表、与统一变量绑定的纹理图片、默认滤镜强度、是否带纹理宽高偏移量、音乐路径、音乐是否循环播放等参数。
json 以及各个字段的介绍如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{ "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 之后，我们需要解码得到滤镜参数对象，解码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
/** * 解码滤镜数据 * @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; } |
滤镜的实现
在解码得到滤镜参数之后，我们接下来实现动态滤镜渲染过程。为了方便构建滤镜，我们创建一个滤镜资源加载器，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
/** * 滤镜资源加载器 */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的基类，方便后续添加其他类型的滤镜，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
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); }} |
接下来我们构建动态滤镜组，因为动态滤镜有可能有多个滤镜组合而成。代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对服务器之家的支持。
原文链接：https://www.jianshu.com/p/f7629254f7f0
