Android(安卓)OpenGL 编写简单滤镜

　　Android 上使用Opengl进行滤镜渲染效率较高，比起单纯的使用CPU给用户带来的体验会好很多。滤镜的对象是图片，图片是以Bitmap的形式表示，Opengl不能直接处理Bitmap，在Android上一般是通过GLSurfaceView来进行渲染的，也可以说成Android需要借助GLSurfaceView来完成对图片的渲染。

　　GlSurfaceView 的图片来源依然是Bitmap，但是Bitmap需要以纹理（Texture）的形式载入到Opengl中。因此我首先来看一下载入纹理的步骤：

　　1.GLES20.glGenTextures() : 生成纹理资源的句柄

　　2.GLES20.glBindTexture(): 绑定句柄

　　3.GLUtils.texImage2D() ：将bitmap传递到已经绑定的纹理中

　　4.GLES20.glTexParameteri() ：设置纹理属性，过滤方式，拉伸方式等

　　这里做滤镜使用Android4.x以后提供的 Effect 类来完成，Effect类实现也是通过Shader的方式来完成的，这些Shader程序内置在Android中，我们只需要按照一定的方式来调用就行了。在Android上使用GLSurfaceView来显示并完成图片的渲染，实现渲染需要实现GLSurfaceView.Render接口，该接口有三个方法：onDrawFrame(GL10 gl) ，该方法按照一定的刷新频率反复执行；onSurfaceChanged(GL10 gl, int width, int height)，该方法在窗口重绘的时候执行；onSurfaceCreated(GL10 gl, EGLConfig config) 在创建SurfaceView的时候执行。

　　使用Effect类会用到EffectFactory 和 EffectContex，在下面的例子中看看具体的使用方式。

　　首先定义一个Activity：EffectivefilterActivity

package com.example.effectsfilterdemo;import java.nio.IntBuffer;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.opengl.GLSurfaceView;import android.os.Bundle;import android.util.Log;import android.view.Menu;import android.view.MenuInflater;import android.view.MenuItem;public class EffectsFilterActivity extends Activity {    private GLSurfaceView mEffectView;    private TextureRenderer renderer;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                renderer = new TextureRenderer();        renderer.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.puppy));        renderer.setCurrentEffect(R.id.none);                mEffectView = (GLSurfaceView) findViewById(R.id.effectsview);        //mEffectView = new GLSurfaceView(this);        mEffectView.setEGLContextClientVersion(2);        //mEffectView.setRenderer(this);        mEffectView.setRenderer(renderer);        mEffectView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);                //setContentView(mEffectView);    }        @Override    public boolean onCreateOptionsMenu(Menu menu) {        Log.i("info", "menu create");        MenuInflater inflater = getMenuInflater();        inflater.inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        renderer.setCurrentEffect(item.getItemId());        mEffectView.requestRender();        return true;    }}

　　EffectivefilterActivity 中使用了两个布局文件，一个用于Activity的布局，另一个用于菜单的布局。

　　R.layout.main:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <android.opengl.GLSurfaceView        android:id="@+id/effectsview"        android:layout_width="fill_parent"        android:layout_height="wrap_content"         /></LinearLayout>

　　R.menu.main:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:id="@+id/none"        android:showAsAction="never"        android:title="none"/>    <item        android:id="@+id/autofix"        android:showAsAction="never"        android:title="autofix"/>    <item        android:id="@+id/bw"        android:showAsAction="never"        android:title="bw"/>    <item        android:id="@+id/brightness"        android:showAsAction="never"        android:title="brightness"/>    <item        android:id="@+id/contrast"        android:showAsAction="never"        android:title="contrast"/>    <item        android:id="@+id/crossprocess"        android:showAsAction="never"        android:title="crossprocess"/>    <item        android:id="@+id/documentary"        android:showAsAction="never"        android:title="documentary"/>    <item        android:id="@+id/duotone"        android:showAsAction="never"        android:title="duotone"/>    <item        android:id="@+id/filllight"        android:showAsAction="never"        android:title="filllight"/>    <item        android:id="@+id/fisheye"        android:showAsAction="never"        android:title="fisheye"/>    <item        android:id="@+id/flipvert"        android:showAsAction="never"        android:title="flipvert"/>    <item        android:id="@+id/fliphor"        android:showAsAction="never"        android:title="fliphor"/>    <item        android:id="@+id/grain"        android:showAsAction="never"        android:title="grain"/>    <item        android:id="@+id/grayscale"        android:showAsAction="never"        android:title="grayscale"/>    <item        android:id="@+id/lomoish"        android:showAsAction="never"        android:title="lomoish"/>    <item        android:id="@+id/negative"        android:showAsAction="never"        android:title="negative"/>    <item        android:id="@+id/posterize"        android:showAsAction="never"        android:title="posterize"/>    <item        android:id="@+id/rotate"        android:showAsAction="never"        android:title="rotate"/>    <item        android:id="@+id/saturate"        android:showAsAction="never"        android:title="saturate"/>    <item        android:id="@+id/sepia"        android:showAsAction="never"        android:title="sepia"/>    <item        android:id="@+id/sharpen"        android:showAsAction="never"        android:title="sharpen"/>    <item        android:id="@+id/temperature"        android:showAsAction="never"        android:title="temperature"/>    <item        android:id="@+id/tint"        android:showAsAction="never"        android:title="tint"/>    <item        android:id="@+id/vignette"        android:showAsAction="never"        android:title="vignette"/></menu>

　　在R.layout.main中只定义了一个GLSurfaceView用于显示图片，R.menu.main用于显示多个菜单项，通过点击菜单来完成调用不同滤镜实现对图片的处理。

　　接下来看比较关键的Renderer接口的实现。

package com.example.effectsfilterdemo;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Color;import android.media.effect.Effect;import android.media.effect.EffectContext;import android.media.effect.EffectFactory;import android.opengl.GLES20;import android.opengl.GLSurfaceView;import android.opengl.GLUtils;import android.util.Log;import java.nio.ByteBuffer;import java.nio.ByteOrder;import java.nio.FloatBuffer;import java.util.LinkedList;import java.util.Queue;import javax.microedition.khronos.egl.EGLConfig;import javax.microedition.khronos.opengles.GL10;public class TextureRenderer implements GLSurfaceView.Renderer{    private int mProgram;    private int mTexSamplerHandle;    private int mTexCoordHandle;    private int mPosCoordHandle;    private FloatBuffer mTexVertices;    private FloatBuffer mPosVertices;    private int mViewWidth;    private int mViewHeight;    private int mTexWidth;    private int mTexHeight;        private Context mContext;    private final Queue<Runnable> mRunOnDraw;    private int[] mTextures = new int[2];    int mCurrentEffect;    private EffectContext mEffectContext;    private Effect mEffect;    private int mImageWidth;    private int mImageHeight;    private boolean initialized = false;    private static final String VERTEX_SHADER =        "attribute vec4 a_position;\n" +        "attribute vec2 a_texcoord;\n" +        "varying vec2 v_texcoord;\n" +        "void main() {\n" +        "  gl_Position = a_position;\n" +        "  v_texcoord = a_texcoord;\n" +        "}\n";    private static final String FRAGMENT_SHADER =        "precision mediump float;\n" +        "uniform sampler2D tex_sampler;\n" +        "varying vec2 v_texcoord;\n" +        "void main() {\n" +        "  gl_FragColor = texture2D(tex_sampler, v_texcoord);\n" +        "}\n";    private static final float[] TEX_VERTICES = {        0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f    };    private static final float[] POS_VERTICES = {        -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f    };    private static final int FLOAT_SIZE_BYTES = 4;        public TextureRenderer() {        // TODO Auto-generated constructor stub        mRunOnDraw = new LinkedList<>();    }    public void init() {        // Create program        mProgram = GLToolbox.createProgram(VERTEX_SHADER, FRAGMENT_SHADER);        // Bind attributes and uniforms        mTexSamplerHandle = GLES20.glGetUniformLocation(mProgram,                "tex_sampler");        mTexCoordHandle = GLES20.glGetAttribLocation(mProgram, "a_texcoord");        mPosCoordHandle = GLES20.glGetAttribLocation(mProgram, "a_position");        // Setup coordinate buffers        mTexVertices = ByteBuffer.allocateDirect(                TEX_VERTICES.length * FLOAT_SIZE_BYTES)                .order(ByteOrder.nativeOrder()).asFloatBuffer();        mTexVertices.put(TEX_VERTICES).position(0);        mPosVertices = ByteBuffer.allocateDirect(                POS_VERTICES.length * FLOAT_SIZE_BYTES)                .order(ByteOrder.nativeOrder()).asFloatBuffer();        mPosVertices.put(POS_VERTICES).position(0);    }    public void tearDown() {        GLES20.glDeleteProgram(mProgram);    }    public void updateTextureSize(int texWidth, int texHeight) {        mTexWidth = texWidth;        mTexHeight = texHeight;        computeOutputVertices();    }    public void updateViewSize(int viewWidth, int viewHeight) {        mViewWidth = viewWidth;        mViewHeight = viewHeight;        computeOutputVertices();    }    public void renderTexture(int texId) {        GLES20.glUseProgram(mProgram);        GLToolbox.checkGlError("glUseProgram");        GLES20.glViewport(0, 0, mViewWidth, mViewHeight);        GLToolbox.checkGlError("glViewport");        GLES20.glDisable(GLES20.GL_BLEND);        GLES20.glVertexAttribPointer(mTexCoordHandle, 2, GLES20.GL_FLOAT, false,                0, mTexVertices);        GLES20.glEnableVertexAttribArray(mTexCoordHandle);        GLES20.glVertexAttribPointer(mPosCoordHandle, 2, GLES20.GL_FLOAT, false,                0, mPosVertices);        GLES20.glEnableVertexAttribArray(mPosCoordHandle);        GLToolbox.checkGlError("vertex attribute setup");        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);        GLToolbox.checkGlError("glActiveTexture");        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texId);//把已经处理好的Texture传到GL上面        GLToolbox.checkGlError("glBindTexture");        GLES20.glUniform1i(mTexSamplerHandle, 0);        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);    }    private void computeOutputVertices() { //调整AspectRatio 保证landscape和portrait的时候显示比例相同，图片不会被拉伸 if (mPosVertices != null) {            float imgAspectRatio = mTexWidth / (float)mTexHeight;            float viewAspectRatio = mViewWidth / (float)mViewHeight;            float relativeAspectRatio = viewAspectRatio / imgAspectRatio;            float x0, y0, x1, y1;            if (relativeAspectRatio > 1.0f) {                x0 = -1.0f / relativeAspectRatio;                y0 = -1.0f;                x1 = 1.0f / relativeAspectRatio;                y1 = 1.0f;            } else {                x0 = -1.0f;                y0 = -relativeAspectRatio;                x1 = 1.0f;                y1 = relativeAspectRatio;            }            float[] coords = new float[] { x0, y0, x1, y0, x0, y1, x1, y1 };            mPosVertices.put(coords).position(0);        }    }        private void initEffect() {        EffectFactory effectFactory = mEffectContext.getFactory();        if (mEffect != null) {            mEffect.release();        }        /**         * Initialize the correct effect based on the selected menu/action item         */        switch (mCurrentEffect) {        case R.id.none:            break;        case R.id.autofix:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_AUTOFIX);            mEffect.setParameter("scale", 0.5f);            break;        case R.id.bw:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_BLACKWHITE);            mEffect.setParameter("black", .1f);            mEffect.setParameter("white", .7f);            break;        case R.id.brightness:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_BRIGHTNESS);            mEffect.setParameter("brightness", 2.0f);            break;        case R.id.contrast:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_CONTRAST);            mEffect.setParameter("contrast", 1.4f);            break;        case R.id.crossprocess:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_CROSSPROCESS);            break;        case R.id.documentary:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_DOCUMENTARY);            break;        case R.id.duotone:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_DUOTONE);            mEffect.setParameter("first_color", Color.YELLOW);            mEffect.setParameter("second_color", Color.DKGRAY);            break;        case R.id.filllight:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_FILLLIGHT);            mEffect.setParameter("strength", .8f);            break;        case R.id.fisheye:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_FISHEYE);            mEffect.setParameter("scale", .5f);            break;        case R.id.flipvert:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_FLIP);            mEffect.setParameter("vertical", true);            break;        case R.id.fliphor:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_FLIP);            mEffect.setParameter("horizontal", true);            break;        case R.id.grain:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_GRAIN);            mEffect.setParameter("strength", 1.0f);            break;        case R.id.grayscale:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_GRAYSCALE);            break;        case R.id.lomoish:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_LOMOISH);            break;        case R.id.negative:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_NEGATIVE);            break;        case R.id.posterize:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_POSTERIZE);            break;        case R.id.rotate:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_ROTATE);            mEffect.setParameter("angle", 180);            break;        case R.id.saturate:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_SATURATE);            mEffect.setParameter("scale", .5f);            break;        case R.id.sepia:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_SEPIA);            break;        case R.id.sharpen:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_SHARPEN);            break;        case R.id.temperature:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_TEMPERATURE);            mEffect.setParameter("scale", .9f);            break;        case R.id.tint:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_TINT);            mEffect.setParameter("tint", Color.MAGENTA);            break;        case R.id.vignette:            mEffect = effectFactory.createEffect(EffectFactory.EFFECT_VIGNETTE);            mEffect.setParameter("scale", .5f);            break;        default:            break;        }    }        public void setCurrentEffect(int effect) {        mCurrentEffect = effect;    }        public void setImageBitmap(final Bitmap bmp){        runOnDraw(new Runnable() {                        @Override            public void run() {                // TODO Auto-generated method stub                loadTexture(bmp);            }        });    }        private void loadTexture(Bitmap bmp){        GLES20.glGenTextures(2, mTextures , 0);        updateTextureSize(bmp.getWidth(), bmp.getHeight());                mImageWidth = bmp.getWidth();        mImageHeight = bmp.getHeight();        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextures[0]);        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bmp, 0);        GLToolbox.initTexParams();    }        private void applyEffect() {        if(mEffect == null){            Log.i("info","apply Effect null mEffect");        }                mEffect.apply(mTextures[0], mImageWidth, mImageHeight, mTextures[1]);    }    private void renderResult() {        if (mCurrentEffect != R.id.none) {            renderTexture(mTextures[1]);        } else {            renderTexture(mTextures[0]);        }    }    @Override    public void onDrawFrame(GL10 gl) {        // TODO Auto-generated method stub        if(!initialized){            init();            mEffectContext = EffectContext.createWithCurrentGlContext();            initialized = true;        }                GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);        synchronized (mRunOnDraw) {            while (!mRunOnDraw.isEmpty()) {                mRunOnDraw.poll().run();            }        }                if (mCurrentEffect != R.id.none) {            initEffect();            applyEffect();        }        renderResult();    }    @Override    public void onSurfaceChanged(GL10 gl, int width, int height) {        // TODO Auto-generated method stub        updateViewSize(width, height);    }    @Override    public void onSurfaceCreated(GL10 gl, EGLConfig config) {        // TODO Auto-generated method stub            }        protected void runOnDraw(final Runnable runnable) {        synchronized (mRunOnDraw) {            mRunOnDraw.add(runnable);        }    }}

　　这里有一个地方需要注意，任何使用Opengl接口的方法调用需要在Opengl Context中进行，否则会出现：call to OpenGL ES API with no current context (logged once per thread) 报错信息。所谓的Opengl Context 其实就是需要在onDrawFrame(GL10 gl)，onSurfaceChanged(GL10 gl, int width, int height)，onSurfaceCreated(GL10 gl, EGLConfig config)中调用，注意到这三个方法都有一个参数GL10。这里还有一个地方就是在载入纹理之前需要载入位图，使用了runOnDraw()方法将loadTexure的步骤放在onDrawFrame() 中来完成，巧妙的为外界提供了一个接口并使得操作在具有Opengl Context的黄金中完成。

　　最后来看看辅助的工具类（GLToolbox），该类完成Shader程序的创建，应用程序提供Shader 源码给该工具类编译：

package com.example.effectsfilterdemo;import android.opengl.GLES20;public class GLToolbox {    public static int loadShader(int shaderType, String source) {        int shader = GLES20.glCreateShader(shaderType);        if (shader != 0) {            GLES20.glShaderSource(shader, source);            GLES20.glCompileShader(shader);            int[] compiled = new int[1];            GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compiled, 0);            if (compiled[0] == 0) {                String info = GLES20.glGetShaderInfoLog(shader);                GLES20.glDeleteShader(shader);                shader = 0;                throw new RuntimeException("Could not compile shader " +                shaderType + ":" + info);            }        }        return shader;    }    public static int createProgram(String vertexSource,            String fragmentSource) {        int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexSource);        if (vertexShader == 0) {            return 0;        }        int pixelShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);        if (pixelShader == 0) {            return 0;        }        int program = GLES20.glCreateProgram();        if (program != 0) {            GLES20.glAttachShader(program, vertexShader);            checkGlError("glAttachShader");            GLES20.glAttachShader(program, pixelShader);            checkGlError("glAttachShader");            GLES20.glLinkProgram(program);            int[] linkStatus = new int[1];            GLES20.glGetProgramiv(program, GLES20.GL_LINK_STATUS, linkStatus,                    0);            if (linkStatus[0] != GLES20.GL_TRUE) {                String info = GLES20.glGetProgramInfoLog(program);                GLES20.glDeleteProgram(program);                program = 0;                throw new RuntimeException("Could not link program: " + info);            }        }        return program;    }    public static void checkGlError(String op) {        int error;        while ((error = GLES20.glGetError()) != GLES20.GL_NO_ERROR) {            throw new RuntimeException(op + ": glError " + error);        }    }    public static void initTexParams() {        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,                GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,                GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,                GLES20.GL_CLAMP_TO_EDGE);        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,                GLES20.GL_CLAMP_TO_EDGE);   }}

　　这里就不提供整个工程了，结合上面的代码，自己在资源文件中提供一个图片载入就可以看到效果了。

更多相关文章

随机推荐