openGL ES進階教程(六)美顏濾鏡之美白,磨皮,紅潤
阿新 • • 發佈:2019-02-13
網上搜羅了一堆的美顏濾鏡效果,可惜盡不如人意。最後偶然看到ios上提供了一個用OC寫的美顏濾鏡,好吧,改寫成Java的試試。好在大學時期搞過一段時間IOS開發,用自己的半吊子的水平,沒想到還真改成功了。
先上效果圖:
網上搜漲痘痘的圖片,搜到劉濤了,罪過罪過~
原圖:
美顏後:
可見有四個可滑動的bar,從上到下分別是,磨皮度,磨皮值,美白,紅潤。
美顏原理
磨皮:本質就是讓畫素點模糊,可以使用高斯模糊,但是可能導致邊緣會不清晰,用雙邊濾波(Bilateral Filter) ,有針對性的模糊畫素點,能保證邊緣不被模糊。 美白:本質就是提高亮度。 紅潤:本質就是改變色調。
下面是濾鏡原始碼:
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();
}
@Override
public 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");
}
@Override
public 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;
}
@Override
public 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;
@Override
protected 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() {
@Override
public 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() {
@Override
public 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);
}
@Override
protected void onPause() {
super.onPause();
glSurfaceView.onPause();
}
@Override
protected void onResume() {
super.onResume();
glSurfaceView.onResume();
}
@Override
public 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();
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
protected float range(final int percentage, final float start, final float end) {
return (end - start) * percentage / 100.0f + start;
}
}