Android OpenGLES2.0(九)——利用OpenGL进行图片处理

在之前的博客中我们就有提过OpenGLES的常见应用范围,其中有一个就是图片的处理。为了保证效率,Android手机中许多美颜相机、图片处理应用,都用到了OpenGLES来处理图片。上一篇博客中,我们利用OpenGLES 显示出了一张图片,并保证图片正常显示,不会被拉伸和压缩。在本篇博客中,我们来了解下利用OpenGLES来处理图片的一些简单方法。

相关原理

本篇博客以简单的图片色彩处理、模糊和放大镜效果为例,来学习OpenGL处理图片的过程。

简单色彩处理

使用过PS的朋友应该都知道,PS利用滤镜可以非常方便的更改图片整体色彩。用过诸如美图秀秀之类的傻瓜式图片处理工具也应该记得,它们可以直接选择将图片的风格改为冷色调、暖色调、复古、黑白等等。这些事怎么实现的呢?
在Android应用中,我们设置文字的颜色,控件的背景色,会在资源文件中进行诸如<color name="bg_color">#FF88269F</color>之类的定义。这个#FF88269F就是我们期望的色彩,我们可以把这个色彩分为4部分,每两位组成一部分,分别表示A(透明通道)、R(红色通道)、G(绿色通道)、B(蓝色通道)。每一部分都由两位十六进制的数表示,也就是取值范围都是0-255,根据各个通道的比率不同,显示出来的最终色彩也就不同了。
在其他的编程语言中,也是和这种方式大同小异。在GLSL中,颜色是用包含四个浮点的向量vec4表示,四个浮点分别表示RGBA四个通道,取值范围为0.0-1.0。我们先读取图片每个像素的色彩值,再对读取到的色彩值进行调整,这样就可以完成对图片的色彩处理了。
我们应该都知道,黑白图片上,每个像素点的RGB三个通道值应该是相等的。知道了这个,将彩色图片处理成黑白图片就非常简单了。我们直接出处像素点的RGB三个通道,相加然后除以3作为处理后每个通道的值就可以得到一个黑白图片了。这是均值的方式是常见黑白图片处理的一种方法。类似的还有权值方法(给予RGB三个通道不同的比例)、只取绿色通道等方式。
与之类似的,冷色调的处理就是单一增加蓝色通道的值,暖色调的处理可以增加红绿通道的值。还有其他复古、浮雕等处理也都差不多。

图片模糊处理

图片模糊处理相对上面的色调处理稍微复杂一点,通常图片模糊处理是采集周边多个点,然后利用这些点的色彩和这个点自身的色彩进行计算,得到一个新的色彩值作为目标色彩。模糊处理有很多算法,类似高斯模糊、径向模糊等等。

放大镜效果

放大镜效果相对模糊处理来说,处理过程也会相对简单一些。我们只需要将制定区域的像素点,都以需要放大的区域中心点为中心,向外延伸其到这个中心的距离即可实现放大效果。具体实现,可参考着色器中vChangeType=4时的操作。

图片处理实例

根据图片色彩处理的原理,我们对图片进行色彩上的处理。本实例中包含了图片转换为黑白图片、冷色调处理、暖色调处理三种,其他诸如此类的简单处理可以依照此方法扩展处理。
首先,我们还是先写着色器程序。顶点着色器可以继续使用上篇博客中的顶点着色器,修改片元着色器为:

precision mediump float;

uniform sampler2D vTexture;
uniform int vChangeType;
uniform vec3 vChangeColor;
uniform int vIsHalf;
uniform float uXY;      //屏幕宽高比

varying vec4 gPosition;

varying vec2 aCoordinate;
varying vec4 aPos;

void modifyColor(vec4 color){
    color.r=max(min(color.r,1.0),0.0);
    color.g=max(min(color.g,1.0),0.0);
    color.b=max(min(color.b,1.0),0.0);
    color.a=max(min(color.a,1.0),0.0);
}

void main(){
    vec4 nColor=texture2D(vTexture,aCoordinate);
    if(aPos.x>0.0||vIsHalf==0){
        if(vChangeType==1){    //黑白图片
            float c=nColor.r*vChangeColor.r+nColor.g*vChangeColor.g+nColor.b*vChangeColor.b;
            gl_FragColor=vec4(c,c,c,nColor.a);
        }else if(vChangeType==2){    //简单色彩处理,冷暖色调、增加亮度、降低亮度等
            vec4 deltaColor=nColor+vec4(vChangeColor,0.0);
            modifyColor(deltaColor);
            gl_FragColor=deltaColor;
        }else if(vChangeType==3){    //模糊处理
            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.r,aCoordinate.y-vChangeColor.r));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.r,aCoordinate.y+vChangeColor.r));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.r,aCoordinate.y-vChangeColor.r));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.r,aCoordinate.y+vChangeColor.r));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.g,aCoordinate.y-vChangeColor.g));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.g,aCoordinate.y+vChangeColor.g));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.g,aCoordinate.y-vChangeColor.g));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.g,aCoordinate.y+vChangeColor.g));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.b,aCoordinate.y-vChangeColor.b));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.b,aCoordinate.y+vChangeColor.b));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.b,aCoordinate.y-vChangeColor.b));
            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.b,aCoordinate.y+vChangeColor.b));
            nColor/=13.0;
            gl_FragColor=nColor;
        }else if(vChangeType==4){  //放大镜效果
            float dis=distance(vec2(gPosition.x,gPosition.y/uXY),vec2(vChangeColor.r,vChangeColor.g));
            if(dis<vChangeColor.b){
                nColor=texture2D(vTexture,vec2(aCoordinate.x/2.0+0.25,aCoordinate.y/2.0+0.25));
            }
            gl_FragColor=nColor;
        }else{
            gl_FragColor=nColor;
        }
    }else{
        gl_FragColor=nColor;
    }
}

为了简便,三个处理使用的是同一个片元着色器,在里面进行了判断。vIsHalf表示是否只处理一半,便于对比原图和处理后的结果。vChangeType为1时,为黑白处理。为2时,作为冷暖色调处理,当然传入其他vChangeColor还可以作为其他的处理。为3时候,作为图片模糊处理。为4时,作为放大镜效果处理。

之后其他的代码和显示贴图代码基本相同,只需要传入vChangeTypevChangeColor依旧vIsHalf的值就可以了。为了方便,可将各种颜色处理封装到枚举类中,如下:

public enum Filter{

    NONE(0,new float[]{0.0f,0.0f,0.0f}),
    GRAY(1,new float[]{0.299f,0.587f,0.114f}),
    COOL(2,new float[]{0.0f,0.0f,0.1f}),
    WARM(2,new float[]{0.1f,0.1f,0.0f}),
    BLUR(3,new float[]{0.006f,0.004f,0.002f}),
    MAGN(4,new float[]{0.0f,0.0f,0.4f});

    private int vChangeType;
    private float[] data;

    Filter(int vChangeType,float[] data){
        this.vChangeType=vChangeType;
        this.data=data;
    }

    public int getType(){
        return vChangeType;
    }

    public float[] data(){
        return data;
    }

}

处理结果如下所示:
这里写图片描述这里写图片描述这里写图片描述这里写图片描述这里写图片描述这里写图片描述

源码

所有的代码全部在一个项目中,托管在Github上——Android OpenGLES 2.0系列博客的Demo

欢迎转载,转载请保留文章出处。湖广午王的博客[http://blog.csdn.net/junzia/article/details/52902189]

已标记关键词 清除标记
背景原图是: ![图片说明](https://img-ask.csdn.net/upload/201508/15/1439633444_381670.jpg) 显示的效果却是: ![图片说明](https://img-ask.csdn.net/upload/201508/15/1439633465_796588.png) 我不知道我的代码错在哪了。请有OpenGL开发经验的兄弟帮忙下。我的代码如下: ``` public class BackgroundGLRnder implements GLSurfaceView.Renderer { // Our matrices private final float[] mtrxProjection = new float[16]; private final float[] mtrxView = new float[16]; private final float[] mtrxProjectionAndView = new float[16]; // Geometric variables private float vertices[]; private static float uvs[] = new float[] { 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f }; private static short indices[] = new short[]{ 0, 1, 2, 0, 2, 3}; private FloatBuffer vertexBuffer; private ShortBuffer drawListBuffer; private FloatBuffer uvBuffer; // Our screenresolution private float mScreenWidth = 0; private float mScreenHeight = 0; // Misc private Context mContext; private int mProgramHandle; private int mTextureDataHandle0; /** This will be used to pass in the transformation matrix. */ private int mMVPMatrixHandle; /** This will be used to pass in the texture. */ private int mTextureUniformHandle0; /** This will be used to pass in model position information. */ private int mPositionHandle; /** This will be used to pass in model color information. */ // private int mColorHandle; /** This will be used to pass in model texture coordinate information. */ private int mTextureCoordinateHandle; public BackgroundGLRnder(Context c) { mContext = c; } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { SetupImage(); // Set the clear color to black GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1); final String vertexShader = getVertexShader(); final String fragmentShader = getFragmentShader(); final int vertexShaderHandle = ShaderHelper.compileShader(GLES20.GL_VERTEX_SHADER, vertexShader); final int fragmentShaderHandle = ShaderHelper.compileShader( GLES20.GL_FRAGMENT_SHADER, fragmentShader); mProgramHandle = ShaderHelper.createAndLinkProgram(vertexShaderHandle, fragmentShaderHandle, new String[] { "a_Position", "a_TexCoordinate" }); // Set our per-vertex lighting program. GLES20.glUseProgram(mProgramHandle); } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { mScreenWidth = width; mScreenHeight = height; // Redo the Viewport, making it fullscreen. GLES20.glViewport(0, 0, (int) mScreenWidth, (int) mScreenHeight); // Clear our matrices for(int i=0;i<16;i++) { mtrxProjection[i] = 0.0f; mtrxView[i] = 0.0f; mtrxProjectionAndView[i] = 0.0f; } // Setup our screen width and height for normal sprite translation. Matrix.orthoM(mtrxProjection, 0, 0f, mScreenWidth, 0.0f, mScreenHeight, -1, 1); } @Override public void onDrawFrame(GL10 gl) { // Set program handles for cube drawing. mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgramHandle, "u_MVPMatrix"); mTextureUniformHandle0 = GLES20.glGetUniformLocation(mProgramHandle, "u_Texture"); mPositionHandle = GLES20.glGetAttribLocation(mProgramHandle, "a_Position"); mTextureCoordinateHandle = GLES20.glGetAttribLocation(mProgramHandle, "a_TexCoordinate"); // clear Screen and Depth Buffer, // we have set the clear color as black. GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT); GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA); GLES20.glEnableVertexAttribArray(mPositionHandle); GLES20.glEnableVertexAttribArray(mTextureCoordinateHandle); GLES20.glVertexAttribPointer(mPositionHandle, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer); GLES20.glVertexAttribPointer(mTextureCoordinateHandle, 3, GLES20.GL_FLOAT, false, 0, uvBuffer); // Apply the projection and view transformation GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mtrxProjection, 0); /** * First texture map */ // Set the active texture0 unit to texture unit 0. GLES20.glActiveTexture(GLES20.GL_TEXTURE0); // Bind the texture to this unit. GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureDataHandle0); // Set the sampler texture unit to 0, where we have saved the texture. GLES20.glUniform1i(mTextureUniformHandle0, 0); // Draw the triangle GLES20.glDrawElements(GLES20.GL_TRIANGLES, indices.length, GLES20.GL_UNSIGNED_SHORT, drawListBuffer); // Disable vertex array GLES20.glDisableVertexAttribArray(mPositionHandle); GLES20.glDisableVertexAttribArray(mTextureCoordinateHandle); } private String getVertexShader() { return RawResourceReader.readTextFileFromRawResource(mContext, R.raw ._vertex_shader); } private String getFragmentShader() { return RawResourceReader.readTextFileFromRawResource(mContext, R.raw._fragment_shader); } private void constructVertex(){ float with = getScreenWidth(); float heigh = getScreenHeight(); vertices = new float[]{ 0.0f,0.0f,-1.0f, with,0.0f,-1.0f, with,heigh,-1.0f, 0.0f,heigh,-1.0f }; } public void SetupImage() { constructVertex(); // The vertex buffer. ByteBuffer bb = ByteBuffer.allocateDirect(vertices.length * 4); bb.order(ByteOrder.nativeOrder()); vertexBuffer = bb.asFloatBuffer(); vertexBuffer.put(vertices); vertexBuffer.position(0); // initialize byte buffer for the draw list ByteBuffer dlb = ByteBuffer.allocateDirect(indices.length * 2); dlb.order(ByteOrder.nativeOrder()); drawListBuffer = dlb.asShortBuffer(); drawListBuffer.put(indices); drawListBuffer.position(0); // The texture buffer ByteBuffer uvsbb = ByteBuffer.allocateDirect(uvs.length * 4); uvsbb.order(ByteOrder.nativeOrder()); uvBuffer = uvsbb.asFloatBuffer(); uvBuffer.put(uvs); uvBuffer.position(0); // Load the texture mTextureDataHandle0 = TextureHelper.loadTexture(mContext, R.raw.bg_fine_day); // mTextureDataHandle0 = TextureHelper.loadTexture(mContext.getResources().openRawResource // (R.raw.bg_fine_day));x } private int getScreenWidth() { WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE); @SuppressWarnings("deprecation") int width = wm.getDefaultDisplay().getWidth();// 屏幕宽度 return width; } private int getScreenHeight() { WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE); @SuppressWarnings("deprecation") int height = wm.getDefaultDisplay().getHeight();// 屏幕高度 return height; } ```
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页