Modify camera preview with effects using GLsurface

I have creating a custom camera app, I am using GLsurfaceview, GLSurfaceview.Renderer for creating camera preview. I have successfully completed it, now am trying to apply filters (sepia mode, blank n white etc) on camera preview. How can I apply effects on camera preview.

normal view

filter applied

And this is my GLSurfaceView.Renderer

public class MainRenderer implements GLSurfaceView.Renderer,SurfaceTexture.OnFrameAvailableListener{

private final String vss =
        "attribute vec2 vPosition;\n" +
                "attribute vec2 vTexCoord;\n" +
                "varying vec2 texCoord;\n" +
                "void main() {\n" +
                "  texCoord = vTexCoord;\n" +
                "  gl_Position = vec4 ( vPosition.x, vPosition.y, 0.0, 1.0 );\n" +
                "}";
private final String fss =
        "#extension GL_OES_EGL_image_external : require\n" +
                "precision mediump float;\n" +
                "uniform samplerExternalOES sTexture;\n" +
                "varying vec2 texCoord;\n" +
                "void main() {\n" +
                "  gl_FragColor = texture2D(sTexture,texCoord);\n" +
                "}";

private int[] hTex;
private FloatBuffer pVertex;
private FloatBuffer pTexCoord;
private int hProgram;

private Camera mCamera;
private SurfaceTexture mSTexture;

private boolean mUpdateST = false;

private CameraPreview mView;
Context mContext;
private String fileName;
private File sdRoot;
private String dir;
private ExifInterface exif;
private int orientation;
private android.hardware.Camera.PictureCallback pictureCallBack = new Camera.PictureCallback() {

    public void onPictureTaken(byte[] data, Camera camera) {

        fileName = "IMG_" + new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date()).toString() + ".jpg";
        File mkDir = new File(sdRoot, dir);
        mkDir.mkdirs();
        File pictureFile = new File(sdRoot, dir + fileName);
        try {
            FileOutputStream purge = new FileOutputStream(pictureFile);
            purge.write(data);
            purge.close();
        } catch (FileNotFoundException e) {
            Log.d("DG_DEBUG", "File not found: " + e.getMessage());
        } catch (IOException e) {
            Log.d("DG_DEBUG", "Error accessing file: " + e.getMessage());
        }
        // Adding Exif data for the orientation. For some strange reason the
        // ExifInterface class takes a string instead of a file.
        try {
            exif = new ExifInterface("/sdcard/" + dir + fileName);
            exif.setAttribute(ExifInterface.TAG_ORIENTATION, "" + orientation);
            exif.saveAttributes();
        } catch (IOException e) {
            e.printStackTrace();
        }
        mContext.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.fromFile(pictureFile)));

    }
};;

public MainRenderer(CameraPreview cameraPreview, Context context) {
    mView = cameraPreview;
    mContext = context;
    mCamera = getCameraInstance();
    float[] vtmp = { 1.0f, -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f };




    float[] ttmp = { 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f };
    pVertex = ByteBuffer.allocateDirect(8 * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
    pVertex.put ( vtmp );
    pVertex.position(0);
    pTexCoord = ByteBuffer.allocateDirect(8*4).order(ByteOrder.nativeOrder()).asFloatBuffer();
    pTexCoord.put ( ttmp );
    pTexCoord.position(0);
}
public void close()
{
    mUpdateST = false;
    mSTexture.release();
    mCamera.stopPreview();
    mCamera.release();
    mCamera = null;
    deleteTex();
}
public void takePicture(File file,String dir,int orientation){
    this.orientation = orientation;
    sdRoot = file;
    this.dir=dir;
    mCamera.takePicture(null,null,pictureCallBack);
}
private void initTex() {
    hTex = new int[1];
    GLES20.glGenTextures(1, hTex, 0);
    GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, hTex[0]);
    GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
    GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
    GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
    GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);
}

private void deleteTex() {
    GLES20.glDeleteTextures ( 1, hTex, 0 );
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    initTex();
    mSTexture = new SurfaceTexture ( hTex[0] );
    mSTexture.setOnFrameAvailableListener(this);
    try {
        mCamera.setPreviewTexture(mSTexture);
    } catch ( IOException ioe ) {
    }
    catch (Exception e){
    }
    GLES20.glClearColor ( 1.0f, 1.0f, 0.0f, 1.0f );
    hProgram = loadShader ( vss, fss );
}

public Camera getCameraInstance() {
    Camera c = null;
    Camera.CameraInfo ci = new Camera.CameraInfo();
    try {
        for(int i=0;i<Camera.getNumberOfCameras();i++){
            Camera.getCameraInfo(i,ci);
            if(ci.facing== Camera.CameraInfo.CAMERA_FACING_FRONT)
                c=Camera.open(i);
        }
    } catch (Exception e) {
    }
    return c;

}
private static int loadShader ( String vss, String fss ) {
    int vshader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
    GLES20.glShaderSource(vshader, vss);
    GLES20.glCompileShader(vshader);
    int[] compiled = new int[1];
    GLES20.glGetShaderiv(vshader, GLES20.GL_COMPILE_STATUS, compiled, 0);
    if (compiled[0] == 0) {
        Log.e("Shader", "Could not compile vshader");
        Log.v("Shader", "Could not compile vshader:"+GLES20.glGetShaderInfoLog(vshader));
        GLES20.glDeleteShader(vshader);
        vshader = 0;
    }

    int fshader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);
    GLES20.glShaderSource(fshader, fss);
    GLES20.glCompileShader(fshader);
    GLES20.glGetShaderiv(fshader, GLES20.GL_COMPILE_STATUS, compiled, 0);
    if (compiled[0] == 0) {
        Log.e("Shader", "Could not compile fshader");
        Log.v("Shader", "Could not compile fshader:"+GLES20.glGetShaderInfoLog(fshader));
        GLES20.glDeleteShader(fshader);
        fshader = 0;
    }

    int program = GLES20.glCreateProgram();
    GLES20.glAttachShader(program, vshader);
    GLES20.glAttachShader(program, fshader);
    GLES20.glLinkProgram(program);

    return program;
}

@Override
public void onSurfaceChanged ( GL10 unused, int width, int height ) {
    GLES20.glViewport( 0, 0, width, height );
    Camera.Parameters param = mCamera.getParameters();
    List<Camera.Size> psize = param.getSupportedPreviewSizes();
    if ( psize.size() > 0 ) {
        int i;
        for ( i = 0; i < psize.size(); i++ ) {
            if ( psize.get(i).width < width || psize.get(i).height < height )
                break;
        }
        if ( i > 0 )
            i--;
        param.setPreviewSize(psize.get(i).width, psize.get(i).height);
        //Log.i("mr","ssize: "+psize.get(i).width+", "+psize.get(i).height);
    }
    param.set("orientation", "portrait");
    mCamera.setParameters ( param );
    mCamera.startPreview();
}

@Override
public void onDrawFrame ( GL10 unused ) {
    GLES20.glClear( GLES20.GL_COLOR_BUFFER_BIT );

    synchronized(this) {
        if ( mUpdateST ) {
            mSTexture.updateTexImage();
            mUpdateST = false;
        }
    }

    GLES20.glUseProgram(hProgram);


    int ph = GLES20.glGetAttribLocation(hProgram, "vPosition");
    int tch = GLES20.glGetAttribLocation ( hProgram, "vTexCoord" );
    int th = GLES20.glGetUniformLocation ( hProgram, "sTexture" );

    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, hTex[0]);
    GLES20.glUniform1i(th, 0);

    GLES20.glVertexAttribPointer(ph, 2, GLES20.GL_FLOAT, false, 4*2, pVertex);
    GLES20.glVertexAttribPointer(tch, 2, GLES20.GL_FLOAT, false, 4*2, pTexCoord );
    GLES20.glEnableVertexAttribArray(ph);
    GLES20.glEnableVertexAttribArray(tch);

    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
    GLES20.glFlush();
}

@Override
public synchronized void onFrameAvailable ( SurfaceTexture st ) {
    mUpdateST = true;
    mView.requestRender();
}

}

Apply filter in OpengGL just basically perform some operations on the value of gl_FragColor in your fragment shader. Some complicated filter might need to perform calculations(dimensions, coordinates) in vertex shader.

For example, if you want to apply black/white filter, change your fragment shader like following.

private final String fss =
    "#extension GL_OES_EGL_image_external : require\n" +
            "precision mediump float;\n" +
            "uniform samplerExternalOES sTexture;\n" +
            "varying vec2 texCoord;\n" +
            "void main() {\n" +
            "  vec4 tc = texture2D(sTexture, texCoord);\n" +
            "  float luminance = 0.3 * tc.r + 0.59 * tc.g + 0.11 * tc.b;\n" +
            "  gl_FragColor = vec4(luminance, luminance, luminance, 1.0);\n" +
            "}";

You can find more example and filter effect in Android GPUImage.