Android OpenGL ES基本用法（12），单个Surface渲染多个纹理，实现画中画

---

目录

---

PicRender

package com.example.opengl.eglpic;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.opengl.GLES20;
import android.opengl.GLUtils;
import android.opengl.Matrix;
import android.util.Log;

import com.example.opengl.R;
import com.example.opengl.egl.MyGlSurfaceView;
import com.example.opengl.egl.ShaderUtil;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

public class PicRender implements MyGlSurfaceView.EGLRender {
    private static final String TAG = "PicRender";
    private Context context;

    //顶点坐标
    private float[] vertexData = {
            -1f, -1f,
            1f, -1f,
            -1f, 1f,
            1f, 1f,

            //画中画，第二张图片的位置
            -0.5f, -0.5f,
            0.5f, -0.5f,
            -0.5f, 0.5f,
            0.5f, 0.5f
    };
    private FloatBuffer vertexBuffer;

    //纹理坐标
    private float[] fragmentData = {
//            0f, 1f,
//            1f, 1f,
//            0f, 0f,
//            1f, 0f
            0f, 0f,
            1f, 0f,
            0f, 1f,
            1f, 1f
    };
    private FloatBuffer fragmentBuffer;

    //生成的shader程序
    private int program;
    //顶点坐标
    private int vPosition;
    //纹理坐标
    private int fPosition;
    //纹理的id
    private int textureId;
    private int sampler;

    //vbo
    private int vboId;
    //fbo
    private int fboId;
    //图片
    private int imageTextureId;
    //图片二，顶层图片
    private int imageTextureId2;
    //
    private FboRender fboRender;
    //正交矩阵
    private int uMatrix;
    //具体的矩阵的值
    private float[] matrix = new float[16];

    private OnRenderCreateListener onRenderCreateListener;

    public void setOnRenderCreateListener(OnRenderCreateListener onRenderCreateListener) {
        this.onRenderCreateListener = onRenderCreateListener;
    }

    public PicRender(Context context) {
        this.context = context;
        fboRender = new FboRender(context);

        vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)//4个字节
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(vertexData);
        vertexBuffer.position(0);

        fragmentBuffer = ByteBuffer.allocateDirect(fragmentData.length * 4)//4个字节
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(fragmentData);
        fragmentBuffer.position(0);
    }

    /**
     * OpenGl
     */
    @Override
    public void onSurfaceCreated() {
        fboRender.onCreate();
        //读取shader的源码
        String vertexSource = ShaderUtil.readRawTxt(context, R.raw.vertex_shader_m);
        String fragmentSource = ShaderUtil.readRawTxt(context, R.raw.fragment_shader);

        //创建shader程序
        program = ShaderUtil.createProgram(vertexSource, fragmentSource);

        vPosition = GLES20.glGetAttribLocation(program, "v_Position");
        fPosition = GLES20.glGetAttribLocation(program, "f_Position");
        sampler = GLES20.glGetUniformLocation(program, "sTexture");
        uMatrix = GLES20.glGetUniformLocation(program, "u_Matrix");

        int[] vbos = new int[1];
        //创建vbo，生成一个，偏移量为0
        GLES20.glGenBuffers(1, vbos, 0);
        vboId = vbos[0];
        //绑定vbo
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vboId);
        //分配VBO需要的缓存大小，data=null是只需要申请空间，暂时不赋值
        GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, vertexData.length * 4 + fragmentData.length * 4, null, GLES20.GL_STATIC_DRAW);
        //为VBO设置顶点数据的值
        GLES20.glBufferSubData(GLES20.GL_ARRAY_BUFFER, 0, vertexData.length * 4, vertexBuffer);
        GLES20.glBufferSubData(GLES20.GL_ARRAY_BUFFER, vertexData.length * 4, fragmentData.length * 4, fragmentBuffer);
        //解绑vbo
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);


        //创建fbo
        int[] fbos = new int[1];
        GLES20.glGenBuffers(1, fbos, 0);
        fboId = fbos[0];
        //绑定fbo
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);


        //生成纹理
        int[] textureIds = new int[1];
        GLES20.glGenTextures(1, textureIds, 0);
        textureId = textureIds[0];
        //绑定
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
        //激活第0个
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        //绑定sampler和0
        GLES20.glUniform1i(sampler, 0);
        //设置环绕方式
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
        //设置过滤
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);


        //设置FBO分配内存大小，绑定纹理之后glBindTexture
        GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, 1000, 500, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
        //把纹理绑定到FBO
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureId, 0);
        if (GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER) != GLES20.GL_FRAMEBUFFER_COMPLETE) {
            Log.e(TAG, "fbo wrong");
        } else {
            Log.e(TAG, "fbo success");
        }


//        //得到图片
//        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.photo);
//        //图片绑定到纹理
//        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
//
//        //回收
//        bitmap.recycle();
//        bitmap = null;

        //解绑纹理
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        //解绑fbo
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);

        imageTextureId = loadTexrute(R.mipmap.diezhongdie);
        imageTextureId2 = loadTexrute(R.mipmap.logo);

        if (onRenderCreateListener != null) {
            //离屏渲染的id
            onRenderCreateListener.onCreate(textureId);
        }
    }

    private int loadTexrute(int src) {
        //创建纹理
        int[] textureIds = new int[1];
        GLES20.glGenTextures(1, textureIds, 0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureIds[0]);

        //环绕过滤
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

        //解析绑定图片
        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), src);
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

        //解绑
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        return textureIds[0];
    }

    @Override
    public void onSurfaceChanged(int width, int height) {
        GLES20.glViewport(0, 0, width, height);
        Log.e(TAG, "onSurfaceChanged: width=" + width + "---height=" + height);
        fboRender.onChange(width, height);
        //横屏时候
        if (width > height) {
            Matrix.orthoM(matrix, 0, -width / ((height / 665f * 500f)), width / ((height / 665f * 500f)), -1f, 1f, -1f, 1f);
        } else {
            Matrix.orthoM(matrix, 0, -1, 1, -height / ((width / 500 * 655f)), height / ((width / 500f * 665f)), -1f, 1f);
        }
//        Matrix.rotateM(matrix, 0, 180, 1, 0, 0);
//        Matrix.rotateM(matrix, 0, 45, 0, 0, 1);
    }

    @Override
    public void onDrawFrame() {

        //绑定FBO，绑定后，下面的操作都不会显示到窗口上了，不需要离屏渲染的话最后一个参数0
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);

        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        GLES20.glClearColor(1f, 0f, 0f, 1f);

        //使用shader程序
        GLES20.glUseProgram(program);

        //这里使用正交投影
        GLES20.glUniformMatrix4fv(uMatrix, 1, false, matrix, 0);
        //使用vbo，绑定，在顶点和纹理赋值之前
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vboId);

        //绑定图片1
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, imageTextureId);
        //顶点赋值
        GLES20.glEnableVertexAttribArray(vPosition);
//        从buffer中取数据
//        GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 8, vertexBuffer);
        //从vbo中取数据，开始的点
        GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 8, 0);
        //纹理赋值
        GLES20.glEnableVertexAttribArray(fPosition);
//        GLES20.glVertexAttribPointer(fPosition, 2, GLES20.GL_FLOAT, false, 8, fragmentBuffer);
        //从fbo中取数据
        GLES20.glVertexAttribPointer(fPosition, 2, GLES20.GL_FLOAT, false, 8, vertexData.length * 4);
        //从0开始绘制4个点
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);


        //绑定图片2
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, imageTextureId2);
        //顶点赋值
        GLES20.glEnableVertexAttribArray(vPosition);
//        从buffer中取数据
//        GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 8, vertexBuffer);
        //从vbo中取数据，开始的点
        GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 8, 8 * 4);
        //纹理赋值
        GLES20.glEnableVertexAttribArray(fPosition);
//        GLES20.glVertexAttribPointer(fPosition, 2, GLES20.GL_FLOAT, false, 8, fragmentBuffer);
        //从fbo中取数据
        GLES20.glVertexAttribPointer(fPosition, 2, GLES20.GL_FLOAT, false, 8, vertexData.length * 4);
        //从0开始绘制4个点
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);


        //解绑
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);

        //解绑vbo
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);
        //解绑fbo
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
        fboRender.onDraw(textureId);
    }

    public interface OnRenderCreateListener {
        void onCreate(int textureId);
    }
}