openGL ES进阶教程（六）美颜滤镜之美白，磨皮，红润

网上搜罗了一堆的美颜滤镜效果，可惜尽不如人意。最后偶然看到ios上提供了一个用OC写的美颜滤镜，好吧，改写成Java的试试。好在大学时期搞过一段时间IOS开发，用自己的半吊子的水平，没想到还真改成功了。

先上效果图：

网上搜涨痘痘的图片，搜到刘涛了，罪过罪过~

原图：

美颜后：

可见有四个可滑动的bar，从上到下分别是，磨皮度，磨皮值，美白，红润。

美颜原理

磨皮：本质就是让像素点模糊，可以使用高斯模糊，但是可能导致边缘会不清晰，用双边滤波(Bilateral Filter) ，有针对性的模糊像素点，能保证边缘不被模糊。
美白：本质就是提高亮度。
红润：本质就是改变色调。

Photoshop混合模式详解及中英文对照：http://www.jianshu.com/p/175631f45ec6

下面是滤镜源码：


import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.Matrix;
import android.view.WindowManager;import com.ws.gl.opengltexture.programs.TextureShaderProgram;
import com.ws.gl.opengltexture.util.GLBitmapUtils;
import com.ws.gl.opengltexture.util.MatrixHelper;
import com.ws.gl.opengltexture.util.TextureHelper;
import com.ws.ijk.openglpicture.R;import java.nio.FloatBuffer;import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;public class BeautyRenderer implements GLSurfaceView.Renderer{public static final String VERTEX_SHADER = "" +"attribute vec4 vPosition;\n" +"uniform mat4 vMatrix;\n"+"attribute vec2 vCoordinate;\n" +" \n" +"varying vec2 textureCoordinate;\n" +" \n" +"void main()\n" +"{\n" +"    gl_Position =vMatrix* vPosition;\n" +"    textureCoordinate = vCoordinate;\n" +"}";public static final String BILATERAL_FRAGMENT_SHADER = "" +"precision highp float;\n"+"   varying highp vec2 textureCoordinate;\n" +"\n" +"    uniform sampler2D vTexture;\n" +"\n" +"    uniform highp vec2 singleStepOffset;\n" +"    uniform highp vec4 params;\n" +"    uniform highp float brightness;\n" +"    uniform float texelWidthOffset;\n"+"    uniform float texelHeightOffset;\n"+"\n" +"    const highp vec3 W = vec3(0.299, 0.587, 0.114);\n" +"    const highp mat3 saturateMatrix = mat3(\n" +"        1.1102, -0.0598, -0.061,\n" +"        -0.0774, 1.0826, -0.1186,\n" +"        -0.0228, -0.0228, 1.1772);\n" +"    highp vec2 blurCoordinates[24];\n" +"\n" +"    highp float hardLight(highp float color) {\n" +"    if (color <= 0.5)\n" +"        color = color * color * 2.0;\n" +"    else\n" +"        color = 1.0 - ((1.0 - color)*(1.0 - color) * 2.0);\n" +"    return color;\n" +"}\n" +"\n" +"    void main(){\n" +"    highp vec3 centralColor = texture2D(vTexture, textureCoordinate).rgb;\n" +"    vec2 singleStepOffset=vec2(texelWidthOffset,texelHeightOffset);\n"+"    blurCoordinates[0] = textureCoordinate.xy + singleStepOffset * vec2(0.0, -10.0);\n" +"    blurCoordinates[1] = textureCoordinate.xy + singleStepOffset * vec2(0.0, 10.0);\n" +"    blurCoordinates[2] = textureCoordinate.xy + singleStepOffset * vec2(-10.0, 0.0);\n" +"    blurCoordinates[3] = textureCoordinate.xy + singleStepOffset * vec2(10.0, 0.0);\n" +"    blurCoordinates[4] = textureCoordinate.xy + singleStepOffset * vec2(5.0, -8.0);\n" +"    blurCoordinates[5] = textureCoordinate.xy + singleStepOffset * vec2(5.0, 8.0);\n" +"    blurCoordinates[6] = textureCoordinate.xy + singleStepOffset * vec2(-5.0, 8.0);\n" +"    blurCoordinates[7] = textureCoordinate.xy + singleStepOffset * vec2(-5.0, -8.0);\n" +"    blurCoordinates[8] = textureCoordinate.xy + singleStepOffset * vec2(8.0, -5.0);\n" +"    blurCoordinates[9] = textureCoordinate.xy + singleStepOffset * vec2(8.0, 5.0);\n" +"    blurCoordinates[10] = textureCoordinate.xy + singleStepOffset * vec2(-8.0, 5.0);\n" +"    blurCoordinates[11] = textureCoordinate.xy + singleStepOffset * vec2(-8.0, -5.0);\n" +"    blurCoordinates[12] = textureCoordinate.xy + singleStepOffset * vec2(0.0, -6.0);\n" +"    blurCoordinates[13] = textureCoordinate.xy + singleStepOffset * vec2(0.0, 6.0);\n" +"    blurCoordinates[14] = textureCoordinate.xy + singleStepOffset * vec2(6.0, 0.0);\n" +"    blurCoordinates[15] = textureCoordinate.xy + singleStepOffset * vec2(-6.0, 0.0);\n" +"    blurCoordinates[16] = textureCoordinate.xy + singleStepOffset * vec2(-4.0, -4.0);\n" +"    blurCoordinates[17] = textureCoordinate.xy + singleStepOffset * vec2(-4.0, 4.0);\n" +"    blurCoordinates[18] = textureCoordinate.xy + singleStepOffset * vec2(4.0, -4.0);\n" +"    blurCoordinates[19] = textureCoordinate.xy + singleStepOffset * vec2(4.0, 4.0);\n" +"    blurCoordinates[20] = textureCoordinate.xy + singleStepOffset * vec2(-2.0, -2.0);\n" +"    blurCoordinates[21] = textureCoordinate.xy + singleStepOffset * vec2(-2.0, 2.0);\n" +"    blurCoordinates[22] = textureCoordinate.xy + singleStepOffset * vec2(2.0, -2.0);\n" +"    blurCoordinates[23] = textureCoordinate.xy + singleStepOffset * vec2(2.0, 2.0);\n" +"\n" +"    highp float sampleColor = centralColor.g * 22.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[0]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[1]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[2]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[3]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[4]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[5]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[6]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[7]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[8]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[9]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[10]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[11]).g;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[12]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[13]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[14]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[15]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[16]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[17]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[18]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[19]).g * 2.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[20]).g * 3.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[21]).g * 3.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[22]).g * 3.0;\n" +"    sampleColor += texture2D(vTexture, blurCoordinates[23]).g * 3.0;\n" +"\n" +"    sampleColor = sampleColor / 62.0;\n" +"\n" +"    highp float highPass = centralColor.g - sampleColor + 0.5;\n" +"\n" +"    for (int i = 0; i < 5; i++) {\n" +"        highPass = hardLight(highPass);\n" +"    }\n" +"    highp float lumance = dot(centralColor, W);\n" +"\n" +"    highp float alpha = pow(lumance, params.r);\n" +"\n" +"    highp vec3 smoothColor = centralColor + (centralColor-vec3(highPass))*alpha*0.1;\n" +"\n" +"    smoothColor.r = clamp(pow(smoothColor.r, params.g), 0.0, 1.0);\n" +"    smoothColor.g = clamp(pow(smoothColor.g, params.g), 0.0, 1.0);\n" +"    smoothColor.b = clamp(pow(smoothColor.b, params.g), 0.0, 1.0);\n" +"\n" +"    highp vec3 lvse = vec3(1.0)-(vec3(1.0)-smoothColor)*(vec3(1.0)-centralColor);\n" +"    highp vec3 bianliang = max(smoothColor, centralColor);\n" +"    highp vec3 rouguang = 2.0*centralColor*smoothColor + centralColor*centralColor - 2.0*centralColor*centralColor*smoothColor;\n" +"\n" +"    gl_FragColor = vec4(mix(centralColor, lvse, alpha), 1.0);\n" +"    gl_FragColor.rgb = mix(gl_FragColor.rgb, bianliang, alpha);\n" +"    gl_FragColor.rgb = mix(gl_FragColor.rgb, rouguang, params.b);\n" +"\n" +"    highp vec3 satcolor = gl_FragColor.rgb * saturateMatrix;\n" +"    gl_FragColor.rgb = mix(gl_FragColor.rgb, satcolor, params.a);\n" +"    gl_FragColor.rgb = vec3(gl_FragColor.rgb + vec3(brightness));\n" +"}";private  Context context;private TextureShaderProgram textureProgram;private int texture;private final float[] projectionMatrix = new float[16];private final float[] modelMatrix = new float[16];private Picture picture;public int mWidth,mHeight;private float toneLevel;private float beautyLevel;private float brightLevel;private float texelWidthOffset;private float texelHeightOffset;private int paramsLocation;private int brightnessLocation;private int singleStepOffsetLocation;private int texelWidthLocation;private int texelHeightLocation;private boolean isTakePicture;public BeautyRenderer(Context context) {this.context = context;texelWidthOffset=texelHeightOffset=2;toneLevel = -0.5f; beautyLevel =1.2f; brightLevel =0.47f; WindowManager wm = ((Activity)context).getWindowManager();mWidth = wm.getDefaultDisplay().getWidth();mHeight = wm.getDefaultDisplay().getHeight();}@Overridepublic void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {GLES20.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);picture = new Picture();textureProgram = new TextureShaderProgram(VERTEX_SHADER,BILATERAL_FRAGMENT_SHADER);texture = TextureHelper.loadTexture(context, R.mipmap.liu);paramsLocation = GLES20.glGetUniformLocation(textureProgram.getProgram(), "params");brightnessLocation = GLES20.glGetUniformLocation(textureProgram.getProgram(), "brightness");singleStepOffsetLocation = GLES20.glGetUniformLocation(textureProgram.getProgram(), "singleStepOffset");texelWidthLocation = GLES20.glGetUniformLocation(textureProgram.getProgram(), "texelWidthOffset");texelHeightLocation = GLES20.glGetUniformLocation(textureProgram.getProgram(), "texelHeightOffset");}@Overridepublic void onSurfaceChanged(GL10 gl10, int width, int height) {GLES20.glViewport(0, 0, width,height);MatrixHelper.perspectiveM(projectionMatrix,45,(float)width/(float)height,1f,10f);Matrix.setIdentityM(modelMatrix,0);Matrix.translateM(modelMatrix,0,0f,0f,-2.5f);//Matrix.rotateM(modelMatrix,0,-60f,1f,0f,0f);final float[] temp = new float[16];Matrix.multiplyMM(temp,0,projectionMatrix,0,modelMatrix,0);System.arraycopy(temp,0,projectionMatrix,0,temp.length);setTexelSize(width, height);mWidth = width;mHeight = height;}@Overridepublic void onDrawFrame(GL10 gl10) {GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);textureProgram.useProgram();textureProgram.setUniforms(projectionMatrix,texture);setParams(beautyLevel, toneLevel);setBrightLevel(brightLevel);setTexelOffset(texelWidthOffset);picture.bindData(textureProgram);picture.draw();// 获取GLSurfaceView的图片并保存if (isTakePicture) {/* Bitmap bmp = GLBitmapUtils.createBitmapFromGLSurface(0, 0, mWidth,mHeight, gl10);*/GLBitmapUtils.saveImage(mWidth,mHeight,context);isTakePicture = false;}}public void setTexelOffset(float texelOffset) {texelWidthOffset=texelHeightOffset=texelOffset;setFloat(texelWidthLocation, texelOffset/mWidth);setFloat(texelHeightLocation, texelOffset/mHeight);}public void setToneLevel(float toneLeve) {this.toneLevel = toneLeve;setParams(beautyLevel, toneLevel);}public void setBeautyLevel(float beautyLeve) {this.beautyLevel = beautyLeve;setParams(beautyLevel, toneLevel);}public void setBrightLevel(float brightLevel) {this.brightLevel = brightLevel;setFloat(brightnessLocation, 0.6f * (-0.5f + brightLevel));}public void setParams(float beauty, float tone) {this.beautyLevel=beauty;this.toneLevel = tone;float[] vector = new float[4];vector[0] = 1.0f - 0.6f * beauty;vector[1] = 1.0f - 0.3f * beauty;vector[2] = 0.1f + 0.3f * tone;vector[3] = 0.1f + 0.3f * tone;setFloatVec4(paramsLocation, vector);}private void setTexelSize(final float w, final float h) {setFloatVec2(singleStepOffsetLocation, new float[] {2.0f / w, 2.0f / h});}protected void setFloat(final int location, final float floatValue) {GLES20.glUniform1f(location, floatValue);}protected void setFloatVec2(final int location, final float[] arrayValue) {GLES20.glUniform2fv(location, 1, FloatBuffer.wrap(arrayValue));}protected void setFloatVec3(final int location, final float[] arrayValue) {GLES20.glUniform3fv(location, 1, FloatBuffer.wrap(arrayValue));}protected void setFloatVec4(final int location, final float[] arrayValue) {GLES20.glUniform4fv(location, 1, FloatBuffer.wrap(arrayValue));}public void saveImage(){isTakePicture =true;}
}

使用：


import android.opengl.GLSurfaceView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;import com.ws.gl.opengltexture.util.GLBitmapUtils;
import com.ws.ijk.openglpicture.R;public class BeautyActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {private GLSurfaceView glSurfaceView;private BeautyRenderer mRenderer;private ImageView mImageView;private Button startBtn,saveBtn;private boolean isStart=true;private SeekBar sb_step,sb_tone,sb_beauty,sb_bright;private static float minstepoffset= -10;private static float maxstepoffset= 10;private static float minToneValue= -5;private static float maxToneValue= 5;private static float minbeautyValue= 0;private static float maxbeautyValue= 2.5f;private static float minbrightValue= 0;private static float maxbrightValue= 1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_beauty);glSurfaceView= (GLSurfaceView) findViewById(R.id.glView);glSurfaceView.setEGLContextClientVersion(2);mRenderer =new BeautyRenderer(this);glSurfaceView.setRenderer(mRenderer);glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);mImageView= (ImageView) findViewById(R.id.image);mImageView.setImageResource(R.mipmap.liu);startBtn = (Button) findViewById(R.id.startbtn);startBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if(isStart){mImageView.setVisibility(View.GONE);}else {mImageView.setVisibility(View.VISIBLE);}isStart = !isStart;}});saveBtn  = (Button) findViewById(R.id.picBtn);saveBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {mRenderer.saveImage();glSurfaceView.requestRender();}});initView();}private void initView() {sb_step = (SeekBar) findViewById(R.id.sb_step);sb_step.setOnSeekBarChangeListener(this);sb_tone = (SeekBar) findViewById(R.id.sb_tone);sb_tone.setOnSeekBarChangeListener(this);sb_beauty = (SeekBar) findViewById(R.id.sb_beauty);sb_beauty.setOnSeekBarChangeListener(this);sb_bright = (SeekBar) findViewById(R.id.sb_bright);sb_bright.setOnSeekBarChangeListener(this);}@Overrideprotected void onPause() {super.onPause();glSurfaceView.onPause();}@Overrideprotected void onResume() {super.onResume();glSurfaceView.onResume();}@Overridepublic void onProgressChanged(SeekBar seekBar, int progress, boolean b) {switch (seekBar.getId()){case R.id.sb_step:mRenderer.setTexelOffset(range(progress,minstepoffset,maxstepoffset));break;case R.id.sb_tone:mRenderer.setToneLevel(range(progress,minToneValue,maxToneValue));break;case R.id.sb_beauty:mRenderer.setBeautyLevel(range(progress,minbeautyValue,maxbeautyValue));break;case R.id.sb_bright:mRenderer.setBrightLevel(range(progress,minbrightValue,maxbrightValue));break;}glSurfaceView.requestRender();}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {}protected float range(final int percentage, final float start, final float end) {return (end - start) * percentage / 100.0f + start;}
}

openGL ES进阶教程（六）美颜滤镜之美白，磨皮，红润相关推荐

openGL ES进阶教程（五）制作一个简单的VR播放器，播放全景视频
之前写过全景(VR)图片,和用openGL ES+MediaPlayer 渲染播放视频+滤镜效果这一篇就在之前的基础上实现一个最简单的VR播放器,播放全景视频. 概述: 全景视频是一种用3D摄像机进 ...
openGL ES进阶教程（二）之全景图片
全景又被称为3D实景,是一种新兴的富媒体技术,其与视频,声音,图片等传统的流媒体最大的区别是"可操作,可交互". 全景分为虚拟现实和3D实景两种.虚拟现实是利用maya等软件,制作 ...
Android OpenGL ES 开发教程(20)：颜色Color
OpenGL ES 支持的颜色格式为RGBA模式(红,绿,蓝,透明度).颜色的定义通常使用Hex格式0xFF00FF 或十进制格式(255,0,255), 在OpenGL 中却是使用0-1之间的浮点数 ...
OpenGL ES 简单教程
OpenGL ES 简单教程 2014-04-24 13:35 佚名 apkbus 字号:T | T 什么是OpenGL ES?OpenGL ES (为OpenGL for Embedded Syst ...
OpenGL ES基础教程，绘制三角形（补充，附代码）
简介 OpenGL OpenGL(全写Open Graphics Library)是指定义了一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维亦可),是一个功能强大,调用方 ...
Android OpenGL ES 开发教程(24)：Depth Buffer
OpenGL ES 中Depth Buffer 保存了像素与观测点之间的距离信息,在绘制3D图形时,将只绘制可见的面而不去绘制隐藏的面,这个过程叫"Hidden surface remova ...
Android OpenGL ES 开发教程(16)：Viewing和Modeling(MODELVIEW) 变换
Viewing和Modeling 变换关系紧密,对应到相机拍照为放置三角架和调整被拍物体位置及角度,通常将这两个变换使用一个modelview 变换矩阵来定义.对于同一个坐标变换,可以使用不同的方法来 ...
OpenGL ES案例-抖音系滤镜实现
一.缩放滤镜 1.效果: 缩放滤镜.gif 2.着色器代码这里我们的缩放采用的是在顶点着色器里面实现的,当然也可以在片源着色器中实现,并且我们也推荐在片源着色器中实现,这里我们只是为了展示在顶点着色 ...
OpenGL ES 2.0 for Android教程（六）：进入第三维
OpenGL ES 2 第六章:进入第三维文章传送门 OpenGL ES 2.0 for Android教程(一) OpenGL ES 2.0 for Android教程(二) OpenGL ES ...
OpenGl文章 Android OpenGL ES 简明开发教程
Android OpenGL ES 简明开发教程分类:android学习笔记2011-12-14 15:04375人阅读评论(0)收藏举报 ApiDemos 的Graphics示例中含有OpenGL ...

openGL ES进阶教程（六）美颜滤镜之美白，磨皮，红润

openGL ES进阶教程（六）美颜滤镜之美白，磨皮，红润相关推荐

最新文章

热门文章