OpenGL之图片色彩处理（三）

一、OpenGL图片绘制的一般步骤：

1、编写顶点着色器和片元着色器；

2、编写需要绘制的图形类，包括：加载着色器脚本内容，加载图片数据，图片绘制；

3、配置绘制环境，绘制图片。

二、具体如下：

1、编写顶点着色器程序（glsl语言）：

attribute vec4 vPosition;
attribute vec2 vCoordinate;//纹理数据
uniform mat4 vMatrix;
//给片元传递数据（纹理，变换前的顶点，变换后的顶点）
varying vec2 aCoordinate;
varying vec4 aPos;
varying vec4 gPosition;

void main(){gl_Position=vMatrix*vPosition;
    aPos=vPosition;
    aCoordinate=vCoordinate;
    gPosition=vMatrix*vPosition;
}

2、编写片元着色器程序（glsl语言）：

precision mediump float;

uniform sampler2D vTexture;
uniform int vChangeType;
uniform vec3 vChangeColor;
uniform int vIsHalf;
uniform float uXY;

//给片元传递的数据（纹理数据，变换前顶点，变换后顶点）
varying vec2 aCoordinate;
varying vec4 aPos;
varying vec4 gPosition;

//修改颜色（防止颜色值超过一）
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){//浮点算法     Gray=R * 0.3+G * 0.59+B * 0.114
            float gray=(nColor.r*0.3+nColor.g*0.59+nColor.b*0.114);
            gl_FragColor=vec4(gray,gray,gray,nColor.a);
        }else if(vChangeType==2){vec4 colorWarm=nColor+vec4(0.1,0.1,0.0,0.0);
            modifyColor(colorWarm);
            gl_FragColor=colorWarm;
        }else if(vChangeType==3){vec4 colorCold=nColor+vec4(0.0,0.0,0.1,0.0);
            modifyColor(colorCold);
            gl_FragColor=colorCold;
        }else if(vChangeType==4){vec2 texSize = vec2(1500.0f,1500.0f);
            vec2 upTex=vec2(aCoordinate.x-1.0/texSize.x,aCoordinate.y-1.0/texSize.y);
            vec4 newTex=texture2D(vTexture,upTex);
            vec4 delTex=nColor-newTex;
            gl_FragColor=delTex;
        }else if(vChangeType==5){gl_FragColor=texture2D(vTexture,vec2(1.0-aCoordinate.x,1.0-aCoordinate.y));
        }else{gl_FragColor=nColor;
        }}else{gl_FragColor=nColor;
   }
}

3、编写绘制图像类（java）

public class Image extends ShaderUtils {private FloatBuffer bPos;
    private FloatBuffer bCoord;

    //图片四个角的坐标
    public final float[] sPos = {-1.0f, 1.0f,
            -1.0f, -1.0f,
            1.0f, 1.0f,
            1.0f, -1.0f

    };
    //图片四个角的纹理坐标
    public final float[] sCoord = {0.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 0.0f,
            1.0f, 1.0f,
    };

    private int mProgram;
    private int glHPosition;
    private int glHTexture;
    private int glHCoordinate;
    public int glHMatrix;
    private int hIsHalf;
    public int glHUxy;
    private int hChangeType;
    private int hChangeColor;

    public Image(GLSurfaceView mView) {initData();
        initShader(mView);
    }private void initShader(GLSurfaceView mv) {/*//加载顶点着色器的脚本内容
        String mVertexShader = loadFromAssetsFile("filter/vertex.glsl", mv.getResources());
        //加载片元着色器的脚本内容
        String mFragmentShader = loadFromAssetsFile("filter/fragment.glsl", mv.getResources());
        mProgram=createProgram(mVertexShader,mFragmentShader);*/
        mProgram=createProgram(mv.getResources(),"filter/vertex.glsl","filter/fragment.glsl");
        glHPosition= GLES20.glGetAttribLocation(mProgram,"vPosition");
        glHCoordinate=GLES20.glGetAttribLocation(mProgram,"vCoordinate");
        glHTexture=GLES20.glGetUniformLocation(mProgram,"vTexture");
        glHMatrix=GLES20.glGetUniformLocation(mProgram,"vMatrix");
        hIsHalf=GLES20.glGetUniformLocation(mProgram,"vIsHalf");
        glHUxy=GLES20.glGetUniformLocation(mProgram,"uXY");
        hChangeType=GLES20.glGetUniformLocation(mProgram,"vChangeType");
        hChangeColor=GLES20.glGetUniformLocation(mProgram,"vChangeColor");
    }private void initData() {bPos = getFloatBuffer(sPos);
        bCoord = getFloatBuffer(sCoord);
    }private int count=1;
    public float[][] images = new float[][]{{0.0f, 0.0f, 0.0f}//原图
            , {0.299f, 0.587f, 0.114f}//灰度
            , {0.1f, 0.1f, 0.0f}//暖色调
            , {0.0f, 0.0f, 0.1f}//冷色调
            , {0.2125f, 0.7154f, 0.0721f}//浮雕
            , {0.0f, 0.0f, 0.0f}, {0.0f, 0.0f, 0.0f}, {0.0f, 0.0f, 0.0f}};
    public void drawSelf(int textureId) {GLES20.glUseProgram(mProgram);
        GLES20.glUniform1i(hChangeType,count);
        GLES20.glUniform3fv(hChangeColor,1,images[count],0);
        GLES20.glUniform1i(hIsHalf,0);
        GLES20.glEnableVertexAttribArray(glHPosition);
        GLES20.glEnableVertexAttribArray(glHCoordinate);
        GLES20.glUniform1i(glHTexture,0);
        GLES20.glVertexAttribPointer(glHPosition,2,GLES20.GL_FLOAT,false,0,bPos);
        GLES20.glVertexAttribPointer(glHCoordinate,2,GLES20.GL_FLOAT,false,0,bCoord);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP,0,4);
    }
}

这个里面的ShaderUtils是编写好的工具类，作用是加载着色器程序。

4、编写渲染类SGLView（java）

public class SGLView extends GLSurfaceView implements GLSurfaceView.Renderer{private Image image;
    private int textureId;
    private Bitmap mBitmap;
    private float uXY;

    private float[] mViewMatrix = new float[16];
    private float[] mProjectMatrix = new float[16];
    private float[] mMVPMatrix = new float[16];

    public SGLView(Context context) {super(context);
        init();
    }private void init() {setEGLContextClientVersion(2);
        setRenderer(this);
        setRenderMode(RENDERMODE_CONTINUOUSLY);
    }@Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {GLES20.glClearColor(1.0f,1.0f,1.0f,1.0f);
        GLES20.glEnable(GLES20.GL_TEXTURE_2D);
        image = new Image(this);
        textureId = createTexture();
    }//创建纹理
    private int createTexture() {mBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.girl);
        int[] texture = new int[1];
        if(mBitmap != null && !mBitmap.isRecycled()){//生成纹理
            GLES20.glGenTextures(1,texture,0);
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,texture[0]);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_NEAREST);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);

            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_CLAMP_TO_EDGE);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE);

            //根据以上参数，生成纹理
            GLUtils.texImage2D(GLES20.GL_TEXTURE_2D,0,mBitmap,0);

            return texture[0];
        }return 0;
    }@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 = (float)w/h;
        float sWH = (float)width/height;
        uXY = sWH;
        if(sWH > swh){Matrix.orthoM(mProjectMatrix,0,-1,1,-swh/sWH,swh/sWH,3,5);
        }else{Matrix.orthoM(mProjectMatrix,0,-1,1,-sWH/swh,sWH/swh,3,5);
        }//设置相机的位置
        Matrix.setLookAtM(mViewMatrix,0,0,0,5.0f,0,0,0,0,1.0f,0);
        //计算变换矩阵
        Matrix.multiplyMM(mMVPMatrix,0,mProjectMatrix,0,mViewMatrix,0);
    }@Override
    public void onDrawFrame(GL10 gl) {GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT|GLES20.GL_DEPTH_BUFFER_BIT);

        GLES20.glUniform1f(image.glHUxy, uXY);
        GLES20.glUniformMatrix4fv(image.glHMatrix, 1, false, mMVPMatrix, 0);
        image.drawSelf(textureId);
    }
}

5、在Activity中加载SGLView

public class Main2Activity extends AppCompatActivity {
    private SGLView sView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        sView = new SGLView(this);
        setContentView(sView);
    }@Override
    protected void onResume() {super.onResume();
        sView.onResume();
    }@Override
    protected void onPause() {super.onPause();
        sView.onPause();
    }
}

OpenGL之图片色彩处理（三）相关推荐

Android OpenGLES2.0（九）——利用OpenGL进行图片处理
在之前的博客中我们就有提过OpenGLES的常见应用范围,其中有一个就是图片的处理.为了保证效率,Android手机中许多美颜相机.图片处理应用,都用到了OpenGLES来处理图片.上一篇博客中,我们 ...
音视频之opengl渲染图片
音视频之opengl绘制三角形音视频之opengl渲染图片音视频之渲染yuv图片首先来看看渲染效果我们先来看看关于纹理的坐标: 他是如下图: 顶点着色器代码:texture_vertext_s ...
测试Python下载图片的三种方法
简介: 通过Python软件包对网络URL图片链接进行下载,可以加快后期处理.本文测试了urllib, request两个软件包对图片进行下载效果.如果图片原网页有了防止下载机制,是无法下载图片. ...
mac 如何查看anaconda的路径_Mac OS如何直接查看gif图片？分享MAC直接查看gif图片的三种方法...
想必许多刚入手Mac的用户在浏览GIF图片文件时,会发现Mac不能直接打开GIF,因此有的用户为了方便查看还特意去下载了GIF的图片查看器,其实在Mac中有多种能够直接打开GIF的方法,用户无需任何第 ...
计算机怎么删除表格,电脑中删除Excel2010表格多余图片的三种方法
为了让表格看起来更加直观,很多朋友都会在Excel中插入图片.那么,当我们大批量插入图片时,如果想要删除的话,应该怎么办呢?以下是系统城小编为您带来的电脑中删除Excel2010表格多余图片的三种方法 ...
OpenCV python 彩色图片的三通道
OpenCV python 彩色图片的三通道 #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ 目的:理解彩色图片的三 ...
怎么将文字转换图片？三个小技巧分享给大家
许多小伙伴喜欢在社交媒体上分享自己生活中的重要时刻和感悟,但是有时候纯文本可能无法传达情感,想要添加配图却不知道如何找到合适的图片.面对这种情况,我们其实可以考虑将文字转换成图片,近期比较流行的AI绘 ...
WPS如何转换成图片？三种方法帮你实现
WPS如何转换成图片?三种方法帮你轻松实现!在大学中,大家完成老师布置的专业课作业都是通过使用电脑中的WPS制作完成.为了防止自己的作业遭到其他同学的私自窜改或是复制粘贴的抄袭.有的同学就会将自己的作 ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...

OpenGL之图片色彩处理（三）

OpenGL之图片色彩处理（三）相关推荐

最新文章

热门文章