OpenGL.Shader：志哥教你写一个滤镜直播客户端（5）滤镜介绍：对比度、曝光、马赛克
OpenGL.Shader：志哥教你写一个滤镜直播客户端（5）
上一章介绍了如何在渲染nv21流的时候进行滤镜的无缝切换，这章内容紧接上一章，介绍三种滤镜特效：对比度、曝光、马赛克，并介绍如何动态调节滤镜效果。废话不说，show the code!
滤镜1：对比度
#include "GpuBaseFilter.hpp"
/**
* 更改图像的对比度。
* 对比度值在0.0到4.0之间，正常值为1.0
*/
class GpuContrastFilter : public GpuBaseFilter {
public:
int getTypeId() { return FILTER_TYPE_CONTRAST; }
GpuContrastFilter()
{
CONTRAST_FRAGMENT_SHADER ="precision mediump float;\n\
varying highp vec2 textureCoordinate;\n\
uniform sampler2D SamplerRGB;\n\
uniform sampler2D SamplerY;\n\
uniform sampler2D SamplerU;\n\
uniform sampler2D SamplerV;\n\
uniform lowp float contrast;\n\
mat3 colorConversionMatrix = mat3(\n\
1.0, 1.0, 1.0,\n\
0.0, -0.39465, 2.03211,\n\
1.13983, -0.58060, 0.0);\n\
vec3 yuv2rgb(vec2 pos)\n\
{\n\
vec3 yuv;\n\
yuv.x = texture2D(SamplerY, pos).r;\n\
yuv.y = texture2D(SamplerU, pos).r - 0.5;\n\
yuv.z = texture2D(SamplerV, pos).r - 0.5;\n\
return colorConversionMatrix * yuv;\n\
}\n\
void main()\n\
{\n\
vec4 textureColor = vec4(yuv2rgb(textureCoordinate), 1.0);\n\
gl_FragColor = vec4((contrast*(textureColor.rgb - vec3(0.5)) + vec3(0.5)), textureColor.w);\n\
}";
}
~GpuContrastFilter() {
if(!CONTRAST_FRAGMENT_SHADER.empty()) CONTRAST_FRAGMENT_SHADER.clear();
}
void init() {
GpuBaseFilter::init(NO_FILTER_VERTEX_SHADER.c_str(), CONTRAST_FRAGMENT_SHADER.c_str());
mContrastLocation = glGetUniformLocation(mGLProgId, "contrast");
mContrastValue = 1.0f;
}
void setAdjustEffect(float percent) {
mContrastValue = percent * 4.0f;
} // (经验范围控制在0~4)
void onDraw(GLuint SamplerY_texId, GLuint SamplerU_texId, GLuint SamplerV_texId,
void* positionCords, void* textureCords)
{ // ...}
private:
std::string CONTRAST_FRAGMENT_SHADER;
GLint mContrastLocation;
float mContrastValue;
};顶点着色器沿用基类GpuBaseFilter.NO_FILTER_VERTEX_SHADER，分析一波片元着色器，不难发现对比度原理：
gl_FragColor = vec4((contrast*(textureColor.rgb - vec3(0.5)) + vec3(0.5)), textureColor.w);textureColor.rgb - vec3(0.5)是用于二分对齐，也可以理解为是量化；contrast就是对比度因子；乘以对比度用以扩大不同色值的层级范围。(经验范围控制在0~4)
显然这个contrast是要能动态进行调节的，回想上一章内容的设计方法，在GpuFilterRender跟踪setAdjustEffect(float percent)不难发现也是在renderOnDraw调用，部分代码如下：
void GpuFilterRender::renderOnDraw(double elpasedInMilliSec)
{
// 画面渲染
mWindowSurface->makeCurrent();
yTextureId = updateTexture(dst_y, yTextureId, mFrameWidth, mFrameHeight);
uTextureId = updateTexture(dst_u, uTextureId, mFrameWidth/2, mFrameHeight/2);
vTextureId = updateTexture(dst_v, vTextureId, mFrameWidth/2, mFrameHeight/2);
// 检测更新Filter
checkFilterChange();
if( mFilter!=NULL) {
mFilter->setAdjustEffect(mFilterEffectPercent);
mFilter->onDraw(yTextureId, uTextureId, vTextureId, positionCords, textureCords);
}
// ...
}
void GpuFilterRender::adjustFilterValue(int value, int max) {
mFilterEffectPercent = (float)value / (float)max;
//LOGD("GpuFilterRender adjust %f", mFilterEffectPercent);
}
///////////////gpu_filter_jni//////////////////////////////////
JNIEXPORT void JNICALL
Java_org_zzrblog_gpufilter_GpuFilterRender_adjustFilterValue(JNIEnv *env, jobject instance, jint value, jint max) {
if (render == NULL)
render = new GpuFilterRender();
render->adjustFilterValue(value, max);
}
继续回溯跟踪，可以发现通过Activity调用Seekbar，然后再调用CfeScheduler.adjustFilterValue(value, max)，最后实现动态调节对比度因子contrast，效果如下：
滤镜2：曝光（黑白反转）
#include "GpuBaseFilter.hpp"
/**
* 反转图像中的所有颜色。
*/
class GpuColorInvertFilter : public GpuBaseFilter {
public:
int getTypeId() { return FILTER_TYPE_COLOR_INVERT; }
GpuColorInvertFilter()
{
COLOR_INVERT_FRAGMENT_SHADER="precision mediump float;\n\
varying highp vec2 textureCoordinate;\n\
uniform sampler2D SamplerRGB;\n\
uniform sampler2D SamplerY;\n\
uniform sampler2D SamplerU;\n\
uniform sampler2D SamplerV;\n\
mat3 colorConversionMatrix = mat3(\n\
1.0, 1.0, 1.0,\n\
0.0, -0.39465, 2.03211,\n\
1.13983, -0.58060, 0.0);\n\
vec3 yuv2rgb(vec2 pos)\n\
{\n\
vec3 yuv;\n\
yuv.x = texture2D(SamplerY, pos).r;\n\
yuv.y = texture2D(SamplerU, pos).r - 0.5;\n\
yuv.z = texture2D(SamplerV, pos).r - 0.5;\n\
return colorConversionMatrix * yuv;\n\
}\n\
void main()\n\
{\n\
vec4 textureColor = vec4(yuv2rgb(textureCoordinate), 1.0);\n\
gl_FragColor = vec4((1.0 - textureColor.rgb), textureColor.w);\n\
}";
}
~GpuColorInvertFilter() {
if(!COLOR_INVERT_FRAGMENT_SHADER.empty()) COLOR_INVERT_FRAGMENT_SHADER.clear();
}
void init() {
GpuBaseFilter::init(NO_FILTER_VERTEX_SHADER.c_str(), COLOR_INVERT_FRAGMENT_SHADER.c_str());
}
private:
std::string COLOR_INVERT_FRAGMENT_SHADER;
};顶点着色器还是沿用基类GpuBaseFilter.NO_FILTER_VERTEX_SHADER，分析一波片元着色器，不难发现曝光的原理：
gl_FragColor = vec4((1.0 - textureColor.rgb), textureColor.w);其实就是取反啊！而且还不需要动态调节，so easy (个_个)
上个效果图意思意思：
滤镜3：马赛克
最后一个也是最有意思的一个滤镜效果，各位老司机可能就是最讨厌的一个了(斜眼笑.jpg)
#include "GpuBaseFilter.hpp"
/**
* 对图像应用格仔化效果。
*/
class GpuPixelationFilter : public GpuBaseFilter {
public:
int getTypeId() { return FILTER_TYPE_PIXELATION; }
GpuPixelationFilter()
{
PIXELATION_FRAGMENT_SHADER="precision highp float;\n\
varying highp vec2 textureCoordinate;\n\
uniform sampler2D SamplerRGB;\n\
uniform sampler2D SamplerY;\n\
uniform sampler2D SamplerU;\n\
uniform sampler2D SamplerV;\n\
mat3 colorConversionMatrix = mat3(\n\
1.0, 1.0, 1.0,\n\
0.0, -0.39465, 2.03211,\n\
1.13983, -0.58060, 0.0);\n\
uniform float imageWidthFactor;\n\
uniform float imageHeightFactor;\n\
uniform float pixel;\n\
vec3 yuv2rgb(vec2 pos)\n\
{\n\
vec3 yuv;\n\
yuv.x = texture2D(SamplerY, pos).r;\n\
yuv.y = texture2D(SamplerU, pos).r-0.5;\n\
yuv.z = texture2D(SamplerV, pos).r-0.5;\n\
return colorConversionMatrix * yuv;\n\
}\n\
void main()\n\
{\n\
vec2 uv = textureCoordinate.xy;\n\
float dx = pixel * imageWidthFactor;\n\
float dy = pixel * imageHeightFactor;\n\
vec2 coord = vec2(dx*floor(uv.x / dx), dy*floor(uv.y / dy));\n\
gl_FragColor = vec4(yuv2rgb(coord), 1.0);\n\
}";
}
~GpuPixelationFilter() {
if(!PIXELATION_FRAGMENT_SHADER.empty()) PIXELATION_FRAGMENT_SHADER.clear();
}
void init() {
GpuBaseFilter::init(NO_FILTER_VERTEX_SHADER.c_str(), PIXELATION_FRAGMENT_SHADER.c_str());
mPixelLocation = glGetUniformLocation(mGLProgId, "pixel");
mImageWidthFactorLocation = glGetUniformLocation(mGLProgId, "imageWidthFactor");
mImageHeightFactorLocation = glGetUniformLocation(mGLProgId, "imageHeightFactor");
mPixelValue = 1.0f;
}
void setAdjustEffect(float percent) {
if(percent==0.0f) percent=0.01f;
mPixelValue = percent * 100.0f;
}
void onOutputSizeChanged(int width, int height) {
GpuBaseFilter::onOutputSizeChanged(width, height);
glUniform1f(mImageWidthFactorLocation, 1.0f / width);
glUniform1f(mImageHeightFactorLocation, 1.0f / height);
}
// ...
void onDraw(GLuint SamplerY_texId, GLuint SamplerU_texId, GLuint SamplerV_texId,
void* positionCords, void* textureCords)
{
if (!mIsInitialized)
return;
glUseProgram(mGLProgId);
glUniform1f(mPixelLocation, mPixelValue);
glUniform1f(mImageWidthFactorLocation, 1.0f / mOutputWidth);
glUniform1f(mImageHeightFactorLocation, 1.0f / mOutputHeight);
// 绘制的模板代码，此处省略
}
};内容有点多，一起来分析一波：
uniform float imageWidthFactor; // 当前屏幕宽度因子，取值为当前宽度的1/10
uniform float imageHeightFactor;
uniform float pixel; // 采样跨度
void main()
{
vec2 uv = textureCoordinate.xy; // 当前纹理坐标
float dx = pixel * imageWidthFactor; // 根据采样跨度，调整步长
float dy = pixel * imageHeightFactor;
// floor(uv.x / dx)“向下舍入”，具体数值说明白，屏幕720*1280，widthFacetor=72
// uv.x = 1，pixel = 1，代入计算 72*(floor(1/72)) = 0
// uv.x = 2，pixel = 1，代入计算 72*(floor(2/72)) = 0
// uv.x = 71，pixel = 1，代入计算 72*(floor(71/72)) = 0
// uv.x = 72，pixel = 1，代入计算 72*(floor(72/72)) = 72
//以上可以说明，通过计算，可以把步长范围内的所有纹理坐标，锁定到范围内的第一个像素坐标位置进行纹理采样。
vec2 coord = vec2(dx*floor(uv.x / dx), dy*floor(uv.y / dy));
gl_FragColor = vec4(yuv2rgb(coord), 1.0);
}";
分析完毕，放效果图看看。
项目地址: https://github.com/MrZhaozhirong/NativeCppApp shader集中放置在src\main\cpp\gpufilter\filter