Android OpenGL ES开发(八)利用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三个通道不同的比例)、只取绿色通道等等方式。
与之类似的,冷色调的处理就是好单一增加蓝色通道的值,暖色调的处理可以增加红绿通道的值。还有其他复古、浮雕等处理也差不多。

黑白

我们计算出像素点RGB三个通道,然后对应相乘再相加。如下的片元着色器代码:

顶点着色器

private final String vertextShaderCode =
        "attribute vec4 vPosition;" +
        "uniform mat4 vMatrix;" +
        "attribute vec2 vCoordinate;" +
        "varying vec2 aCoordinate;" +
        "void main() {" +
        "   gl_Position = vMatrix * vPosition;" +
        "   aCoordinate=vCoordinate;" +
        "}";

片元着色器

计算出像素点RGB三个通道,然后对应相乘再相加

private final String fragmentShaderCode =
        "precision mediump float;" +
        "uniform sampler2D vTexture;" +
        "uniform vec3 vChangeColor;" +
        "varying vec2 aCoordinate;" +
        "void main() {" +
        "   vec4 nColor=texture2D(vTexture,aCoordinate);" +
        "   float c=nColor.r*vChangeColor.r+nColor.g*vChangeColor.g+nColor.b*vChangeColor.b;" +
        "   gl_FragColor=vec4(c,c,c,nColor.a);" +
        "}";

顶点坐标

private float[] shapePos = {
        -1.0f, 1.0f,    //左上角
        -1.0f, -1.0f,   //左下角
        1.0f, 1.0f,     //右上角
        1.0f, -1.0f     //右下角
};

纹理坐标

private float[] sCoord = {
        0.0f, 0.0f,
        0.0f, 1.0f,
        1.0f, 0.0f,
        1.0f, 1.0f
};

完整代码:

public class MyTenthRender implements GLSurfaceView.Renderer
{

    private final String vertextShaderCode =
            "attribute vec4 vPosition;" +
            "uniform mat4 vMatrix;" +
            "attribute vec2 vCoordinate;" +
            "varying vec2 aCoordinate;" +
            "void main() {" +
            "   gl_Position = vMatrix * vPosition;" +
            "   aCoordinate=vCoordinate;" +
            "}";
    private final String fragmentShaderCode =
            "precision mediump float;" +
            "uniform sampler2D vTexture;" +
            "uniform vec3 vChangeColor;" +
            "varying vec2 aCoordinate;" +
            "void main() {" +
            "   vec4 nColor=texture2D(vTexture,aCoordinate);" +
            "   float c=nColor.r*vChangeColor.r+nColor.g*vChangeColor.g+nColor.b*vChangeColor.b;" +
            "   gl_FragColor=vec4(c,c,c,nColor.a);" +
            "}";
    private final Context context;

    private int program;
    private FloatBuffer vertexBuffer;
    //正交矩阵
    private final float[] mProjectMatrix = new float[16];
    //相机位置矩阵
    private final float[] mViewMatrix = new float[16];
    //计算变换矩阵
    private final float[] mMVPMatrix = new float[16];
    private float[] shapePos = {
            -1.0f, 1.0f,    //左上角
            -1.0f, -1.0f,   //左下角
            1.0f, 1.0f,     //右上角
            1.0f, -1.0f     //右下角
    };
    private float[] sCoord = {
            0.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 0.0f,
            1.0f, 1.0f
    };

    private Bitmap mBitmap;
    private FloatBuffer coordBuffer;
    private int[] texture;
    private float gray[] = new float[]{0.299f,0.587f,0.114f};

    public MyTenthRender(Context context)
    {
        this.context = context;
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config)
    {
//        GLES20.glEnable(GLES20.GL_DEPTH_TEST);
        //将背景设置为灰色
        GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

        //申请底层空间
        ByteBuffer byteBuffer = ByteBuffer.allocateDirect(shapePos.length * 4);
        byteBuffer.order(ByteOrder.nativeOrder());
        //将坐标数据转换为FloatBuffer,用以传入给OpenGL ES程序
        vertexBuffer = byteBuffer.asFloatBuffer();
        //将三角形坐标传入FloatBuffer
        vertexBuffer.put(shapePos);
        vertexBuffer.position(0);

        //申请底层空间
        ByteBuffer coordByteBuffer = ByteBuffer.allocateDirect(sCoord.length * 4);
        coordByteBuffer.order(ByteOrder.nativeOrder());
        //将坐标数据转换为FloatBuffer,用以传入给OpenGL ES程序
        coordBuffer = coordByteBuffer.asFloatBuffer();
        //将纹理坐标传入FloatBuffer
        coordBuffer.put(sCoord);
        coordBuffer.position(0);


        //创建顶点着色器程序
        int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertextShaderCode);
        //创建片元着色器程序
        int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

        if (vertexShader == 0 || fragmentShader == 0)
        {
            return;
        }
        //创建一个空的OpenGL ES程序
        program = GLES20.glCreateProgram();
        //将顶点着色器加入程序
        GLES20.glAttachShader(program, vertexShader);
        //将片元着色器加入程序
        GLES20.glAttachShader(program, fragmentShader);
        //连接到着色器程序中
        GLES20.glLinkProgram(program);
        //使用程序
        GLES20.glUseProgram(program);


        texture = new int[1];
        //生成一个纹理,纹理ID放在int[] texture
        GLES20.glGenTextures(1, texture, 0);


        mBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.bg);

    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height)
    {
        GLES20.glViewport(0, 0, width, height);
        int w = mBitmap.getWidth();
        int h = mBitmap.getHeight();
        float sWH = w / (float) h;
        float sWidthHeight = width / (float) height;
        if (width > height)
        {
            if (sWH > sWidthHeight)
            {
                //设置正交矩阵
                Matrix.orthoM(mProjectMatrix, 0, -sWidthHeight * sWH, sWidthHeight * sWH, -1, 1, 3, 7);
            } else
            {
                //设置正交矩阵
                Matrix.orthoM(mProjectMatrix, 0, -sWidthHeight / sWH, sWidthHeight / sWH, -1, 1, 3, 7);
            }
        } else
        {
            if (sWH > sWidthHeight)
            {
                //设置正交矩阵
                Matrix.orthoM(mProjectMatrix, 0, -1, 1, -1 / sWidthHeight * sWH, 1 / sWidthHeight * sWH, 3, 7);
            } else
            {
                //设置正交矩阵
                Matrix.orthoM(mProjectMatrix, 0, -1, 1, -sWH / sWidthHeight, sWH / sWidthHeight, 3, 7);
            }
        }
        //设置相机位置
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, 7.0f, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
        //计算变换矩阵
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectMatrix, 0, mViewMatrix, 0);


    }

    @Override
    public void onDrawFrame(GL10 gl)
    {
        if (program == 0)
            return;

        //获取变换矩阵vMatrix成员句柄
        int vMatrix = GLES20.glGetUniformLocation(program, "vMatrix");
        //设置vMatrix的值
        GLES20.glUniformMatrix4fv(vMatrix, 1, false, mMVPMatrix, 0);
        //获取顶点着色器的vPosition成员句柄
        int vPosition = GLES20.glGetAttribLocation(program, "vPosition");
        //启用vPosition句柄
        GLES20.glEnableVertexAttribArray(vPosition);
        //传的圆筒面的所有坐标数据
        GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 2 * 4, vertexBuffer);

        //获取顶点着色器的vCoordinate成员句柄
        int vCoordinate = GLES20.glGetAttribLocation(program, "vCoordinate");
        //启用vPosition句柄
        GLES20.glEnableVertexAttribArray(vCoordinate);
        //传的纹理坐标数据
        GLES20.glVertexAttribPointer(vCoordinate, 2, GLES20.GL_FLOAT, false, 2 * 4, coordBuffer);

        //传入rgb颜色用于与图片的rgb计算
        int vChangeColor = GLES20.glGetUniformLocation(program,"vChangeColor");
        GLES20.glUniform3fv(vChangeColor,1,gray,0);

        //将已经创建并命名的纹理绑定到一个纹理目标(GL_TEXTURE_2D)上
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texture[0]);

        //设置缩小过滤为使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
        //设置放大过滤为使用纹理中坐标最接近的若干个颜色,通过加权平均算法得到需要绘制的像素颜色
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
        //设置环绕方向S:指定横向模式为GL_CLAMP_TO_EDGE
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
        //设置环绕方向T:指定横向模式为GL_CLAMP_TO_EDGE
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
        //将图片数据传到上面创建的纹理中
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, mBitmap, 0);

        //绘制
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

        //禁止顶点数组的句柄
        GLES20.glDisableVertexAttribArray(vPosition);

    }

    public int loadShader(int type, String shaderCode)
    {
        //创建空的着色器
        int shader = GLES20.glCreateShader(type);
        //将着色器程序加到着色器中
        GLES20.glShaderSource(shader, shaderCode);
        //编译色器程序
        GLES20.glCompileShader(shader);

        return shader;

    }
}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容